* {
    padding: 0;
    margin: 0;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    font-family: "Arial";
}
#popup, #main, .btn, .levelNum, svg {
    touch-action: none;
}
.levelSelectPage, #levels, .level {
    touch-action: pan-y;
}
html, body {
    font-size: 10svmin;
}
body {
    position: relative;
}
svg {
    width: 100%;
    height: 100%;
}
#popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: #777;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 100svw 1fr 1fr;
    grid-template-areas: 
    ".... .... close"
    "num menu restart"
    "main main main"
    ".... up ...."
    "left down right";
}
#main {
    width: 100svmin;
    height: 100svmin;
    grid-area: main;
}
.levelSelectPage {
    position: relative;
    grid-area: main;
    overflow: scroll;
    background-color: #333;    
    color: #eee;
    text-align: center;
}
.scroll {
    width: 8%;
    height: 8%;
    position: fixed;
    right: 0;
    display: grid;
    place-content: center;
}
.scrollUp {
    bottom: 50svh;
}
.scrollDown {
    top: 50svh;
}
#levels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.btn {
    background: linear-gradient(#ddd, #aaa);
    border: 2px solid #333;
    border-radius: 8px;
    color: #333;    
    padding: 10px;
    cursor: pointer;
    display: grid;
    place-content: center;
}
.level {
    width: 25%;
    height: 18%;
    margin: 1%;
}
.levelNum {
    grid-area: num;
    text-align: center;
    color: #fff;
    font-size: 8svmin;

}
.restart {
    grid-area: restart;
}
.menu {
    grid-area: menu;
}
.ArrowUp {
    grid-area: up;
}
.ArrowLeft {
    grid-area: left;
}
.ArrowDown {
    grid-area: down;
}
.ArrowRight {
    grid-area: right;
}
@media screen and (min-aspect-ratio: 1/1) {
    #popup {
        grid-template-columns: 1fr 1fr 1fr 100svh 1fr 1fr 1fr; 
        grid-template-rows: 25svh 25svh 25svh 25svh;
        grid-template-areas: 
        "num num .... main restart menu close"
        ".... .... .... main .... .... ...."
        ".... up .... main .... .... ...."
        "left down right main .... .... ....";
    }
    .scroll {
        right: calc(50svw - 50svh);
    }
}