@font-face {
    font-family: 'joystix';
    src: url('joystix.otf') format("opentype");
    font-weight: normal;
    font-style: normal;
}

body {font-family: 'joystix';
    display: grid;
    background-color: rgb(53, 53, 91);
    justify-content: center;
    touch-action: manipulation;
    user-select: none;
}

@media (min-width: 600px) {

    .wrapper {
    width: 600px;
    padding-bottom: 5px;
    margin-top: 2px;
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-template-rows: 8% 50% 42%;
    grid-template-areas:
      "head head head"
      "hold game next"
      "menu game control";
    background-color: rgb(75, 75, 119);
    }
    .lvl {
    z-index: 5;
    position: fixed;
    visibility: hidden;
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    margin-left: 10px;
    transform: translateX(200px) translateY(-200px);
    }
    .overhead {
        width: 600px;
    }
} 


@media (max-width: 600px) {
     .wrapper {
        width: 100dvw;
        margin-top: 2px;
        margin-left: 0px;
        display: grid;
        grid-template-columns: 60dvw 40dvw;
        grid-template-areas:
          "head head"
          "game next"
          "game hold"
          "control menu";
        background-color: rgb(75, 75, 119);
    }  

    .lvl {
        z-index: 5;
        position: fixed;
        visibility: hidden;
        display: flex;
        flex-wrap: wrap;
        width: 200px;
        margin-left: 10px;
        transform: translateX(-200px) translateY(-300px);
    }
    .playfield {
        transform: scale(105%) translateX(2vw);
        transform-origin: 0 0;
    }
    .vcontrols {
        transform: translateX(2vw) translateY(4vw);
    }
    .overhead {
        width: 100dvw;
    }

}

body {
    margin: 0px;
}

.overhead {
    text-align: center;
    color: wheat;
    background-color: black;
    padding-top: 10px;
    padding-bottom: 10px;
}
.overhead h1 {
font-family: 'joystix';
    margin: 0;
}
.header {
    grid-area: head;
    display: flex;
    justify-content: space-around;
    color: white;
    background-color: black;
    font-size: 30px;
}
.hold {
    grid-area: hold;
}
.next {
    grid-area: next;
}
.windowt {
    aspect-ratio: 1 / 1;
    align-self: center;
    width: 50%;
    height: 50%;
    background-color: black;
    
}
.wheader {
    color: white;
    background-color: black;
    font-size: 30px;
    width: 90%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    margin: auto;
    border-radius: 2px;
    outline: 5px rgb(113, 118, 188) ridge;
    outline-offset: -5px;
}
.high {
    color: white;
    background-color: black;
    font-size: 20px;
    width: 90%;
    text-align: center;
    margin: 3px 10px 3px 10px;
    border-radius: 2px;
    outline: 5px rgb(113, 118, 188) ridge;
    outline-offset: -5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.menu {
    grid-area: menu;
    display: flex;
    flex-direction: column;
}
#openstart:hover {
    background-color: white;
    animation: none;
}
@keyframes example {
    0%   {background-color: rgb(255, 210, 210);}
    50%  {background-color: red;}
    100%   {background-color: rgb(255, 210, 210);}
  }
#openstart {
    background-color: rgb(255, 210, 210);
    justify-self: center;
    border: none;
    font-size: 30px;
    font-family: 'joystix';
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
#pause {
    background-color: rgb(255, 210, 210);
    display: none;
    justify-self: center;
    border: none;
    font-size: 30px;
    font-family: 'joystix';
}

.playfield {
    grid-area: game;
    width: 200px;
    height: 400px;
    border: 5px rgb(113, 118, 188) ridge;
    background-color: rgb(14, 23, 48);
}
#gamegrid {
    position: fixed;
    width: 200px;
    height: 400px;
    z-index: 2;
}
#gameeffects {
    position: fixed;
    width: 200px;
    height: 400px;
    z-index: 3;
}

.window {
    aspect-ratio: 1/1;
    margin: auto;
    width: 80%;
    display: flex;
    align-content: center;
    justify-content: center;
    border: 5px rgb(113, 118, 188) ridge;
    background-color: black;
}
.lvl button {
    font-family: 'joystix';
    margin: 0px;
    background-color: rgb(72, 70, 69);
    font-size: 25px;
    width: 36px;
    height: 36px;
    color: aliceblue;
    border: 0.5px rgb(127, 155, 215) solid;
}
.lvl button:hover {
    background-color: rgb(106, 103, 101);
}
.lvl p {
    margin: 0px;
    text-align: center;
    font-size: 28px;
    background-color: rgb(72, 70, 69);
    width: 180px;
    height: 64px;
    color: aliceblue;
    border: 0.5px gray solid;
}
.left { 
    grid-area: left; 
    border-radius: 3px 2px 2px 3px;

    }
.rl { 
    grid-area: upleft; 
    justify-content: space-around;
    border-radius: 3px 2px 2px 0px;
    }
.up { 
    grid-area: up; 
    justify-content: space-around;
    height: 59px;
    }
.up img {
    height: 30px;
    width: 30px;
}
.down { 
    grid-area: down;
    height: 59px;
    }
.rr { 
    grid-area: upright; 
    justify-content: space-around;
    border-radius: 2px 0px 3px 2px;
        }
.right { 
    grid-area: right; 
     border-radius: 2px 3px 3px 2px;
    }
.vcontrols {
    grid-area: control;
display: grid;
height: 128px;
max-width:fit-content;
margin-top: 5px;
margin-left: 5px;
justify-content: center;
grid-template-columns: 64px 64px 64px;
border-style: ridge;
border-color: rgb(58, 64, 112);
border-width: 5px;
border-radius: 7px;
grid-template-areas:
'upleft up upright'
'left down right';
gap: 0px;
}
.vcontrols > div {
background-color: rgb(145, 153, 241);
color: black;
text-align: center;
font-size: 20px;
font-weight: 700;
display: inline-grid;
align-content: space-around;
border: 3px rgb(58, 64, 112) outset;
cursor: pointer;
}
.active {
    color: rgb(232, 232, 232) !important;
    text-shadow: 1px 1px 5px rgb(112, 125, 181) !important;
    border: 3px rgb(58, 64, 112) inset !important;
    }
.active img  {
        filter: invert(100%);
        }


.vcontrols > div:hover {
        background-color: rgb(133, 142, 237);
    }
.help {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    max-width: 70vw;
    color: white;
}
.none {
    color: rgb(150, 98, 0)
}

#overlay {
    position: fixed; 
    display: none; 
    width: 100dvw; 
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); 
    z-index: 4; 
    cursor: pointer; 
  }
#text{
    position: absolute;
    top: 70%;
    left: 50%;
    font-size: 50px;
    color: rgb(255, 0, 0);
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 7;
  }
#keys{
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    max-width: 100dvw;
    top: 10dvh;
    left: 50%;
    transform: translate(-50%);
    -ms-transform: translate(-50%);
    z-index: 6;
  }