:root {
    --mango: rgb(245, 202, 132);
    --pink: rgb(250,150,150);
    --dark: rgb(93,81,85);
}
body {
    margin: 0;
    width: 100vw; 
    min-height: 50vw;
    overflow-x: hidden;
    background-color: var(--mango);
}
body * {outline:0; max-width:100%; max-height:100%}
#menu[hidden] * {display:none}
#menu {
    width: 100vw;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
}
#menu button, #menu progress {
    width: 30vw;
    border: none;
    background: none;
    position: absolute;
    cursor: pointer;
    transition: 2s all ease;
}
button:active {transform: scale(.9);}
#menu progress {margin-top: 30%;}
.dec {width:100vw}
#timer {
    color: white;
    margin: auto;
    margin-top: -14.5vw;
    font-size: 5vw;
    line-height: 6vw;
}
#board {
    background-color: var(--dark);
    border: 1vw solid var(--pink);
    border-radius: 1vw;
    width: 59vw; 
    height: 41.5vw;
    display: flex; 
    margin: 5vw auto;
}
.win {
    position: absolute;
    width: 40vw;
    margin: -45vw 30vw;
    z-index: 100000;
    filter: drop-shadow(0 0 30vw black);
}
.puzzle {
    position: absolute;
    width: 17.5%;
}
.puzzle.active {z-index: 10;}
.puzzle.p {z-index: 1;}
.g1 {
    margin-left: 44.47%;
    margin-top: -4.4%;
}
.g2 {
    margin-left: 37.8%;
    margin-top: -2.8%;
}
.g3 {
    margin-left: 29.1%;
    margin-top: -4.25%;
}
.g4 {
    margin-left: 20.9%;
    margin-top: -2.38%;
}
.g5 {
    margin-left: 12.36%;
    margin-top: -4.1%;
}
.g6 {
    margin-left: 4%;
    margin-top: -2.39%;
}
.g7 {
    margin-left: -2.5%;
    margin-top: -3.9%;
}
.g8 {
    margin-left: -4.2%;
    margin-top: 4.2%;
}
.g9 {
    margin-left: 3.55%;
    margin-top: 4.2%;
}
.g10 {
    margin-left: 12.3%;
    margin-top: 4%;
}
.g11 {
    margin-left: 20.9%;
    margin-top: 3.9%;
}
.g12 {
    margin-left: 29.4%;
    margin-top: 3.3%;
}
.g13 {
    margin-left: 37.9%;
    margin-top: 3.7%;
}
.g14 {
    margin-left: 45.7%;
    margin-top: 3.5%;
}
.g15 {
    margin-left: 44.3%;
    margin-top: 12.1%;
}
.g16 {
    margin-left: 37.6%;
    margin-top: 12%;
}
.g17 {
    margin-left: 29.2%;
    margin-top: 12.4%;
}
.g18 {
    margin-left: 20.6%;
    margin-top: 12.4%;
}
.g19 {
    margin-left: 12.1%;
    margin-top: 12.4%;
}
.g20 {
    margin-left: 3.7%;
    margin-top: 12.5%;
}
.g21 {
    margin-left: -2.65%;
    margin-top: 12.6%;
}
.g22 {
    margin-left: -4.4%;
    margin-top: 21%;
}
.g23 {
    margin-left: 3.35%;
    margin-top: 21%;
}
.g24 {
    margin-left: 11.9%;
    margin-top: 21%;
}
.g25 {
    margin-left: 20.4%;
    margin-top: 21%;
}
.g26 {
    margin-left: 29.1%;
    margin-top: 21%;
}
.g27 {
    margin-left: 37.5%;
    margin-top: 20.7%;
}
.g28 {
    margin-left: 45.7%;
    margin-top: 21.1%;
}
.g29 {
    margin-left: 44.3%;
    margin-top: 28.6%;
}
.g30 {
    margin-left: 37.4%;
    margin-top: 26.64%;
}
.g31 {
    margin-left: 28.8%;
    margin-top: 28.63%;
}
.g32 {
    margin-left: 20.2%;
    margin-top: 26.8%;
}
.g33 {
    margin-left: 11.9%;
    margin-top: 28.75%;
}
.g34 {
    margin-left: 3.3%;
    margin-top: 27%;
}
.g35 {
    margin-left: -3%;
    margin-top: 28.7%;
}