body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family:"Roboto", sans-serif;
    color:white;
}
canvas {
    display: block;
    margin: 0 auto;
    background: black;}
.size {
    width: 50vw;
    height: 50vh;}

.myCanvas{
    background-image: url("https://vignette.wikia.nocookie.net/pixeldungeon/images/8/8f/Floor.png/revision/latest?cb=20130530170444");
    background-repeat: repeat;
}
.page{
    display:none;
    background:black;
    width:100%;
    height:100vh;
    animation:fade .3s;
}
.start{
    display:block;
}
.title{
    position:absolute;
    width:100%;
    text-align:center;
    top:24px;
    letter-spacing: 0.3em;
    font-size:112px;
}
#name{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:50%;
    padding:16px;
    width:50%;
    font-size:24px;
    font-weight:700;
    text-align:center;
}
#startdesc{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:60%;
    font-size:18px;
}
@keyframes fade{
    from{
        opacity:0;
    }to{
        opacity:1;
    }
}
#enddesc{
    position:absolute;
    top:30%;
    font-size:24px;
    width:100%;
    text-align:center;
}
.leaderboard{
    background:#212121;
    width:50%;
    box-shadow:0px 0px 50px white;
}
.leaderboard th{
    background:black;
}
.leaderboard td{
    text-align:center;
}
.leaderboard tr:nth-of-type(even){
    background:#424242;
}
#end{
    position:absolute;
    top:60%;
    left:50%;
    transform:translateX(-50%);
}
#leaderboard-button, #back-button{
    text-decoration:none;
    color:white;
    cursor:pointer;
    margin:16px;
    display:inline-block;
}
#leaderboard-button:hover, #back-button:hover{
    text-decoration:underline;
}
#lb{
    position:absolute;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%);
}