@import url('reset.css');
@import url('font.css');

*{
    box-sizing: border-box;
    text-decoration: none;
}

body{
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(39, 1fr);
    aspect-ratio: 1 / 2.4375;
    font-family: 'Inter', sans-serif;
}

body img{
    -webkit-user-drag: none;
    user-select: none;
}

.screensaver{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 8;
    background-color: #AE1645;
    justify-content: center;
}


title{
    display: flex;
    grid-column-start: 10;
    grid-column-end: 17;
    grid-row-start: 1;
    grid-row-end: 4;
    background-color: #2C3E50;
    color: #F6B901;
    justify-content: center;
    align-items: center;
    font-size: clamp(55px, 10vw, 140px);
    font-weight: 900;
    background-image: url('../assets/images/title.svg');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.egypt-eye{
    display: flex;
    grid-column-start: 10;
    grid-column-end: 17;
    grid-row-start: 4;
    grid-row-end: 8;
    background-color: #FAF8F3;
    padding: 2vh;
}

.egypt-eye-image{
    position: relative;
    background-image: url(../assets/images/egypt-eye.svg);
    width: 90%;
    height: 90%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.pupil{
    position: absolute;
    width: 20%;
    height: 20%;
    left: 42%;
    left: 24%;
}

.eqypt-god{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 8;
    grid-row-end: 13;
    background-color: #FAF8F3;
    padding: 5%;
}

.eqypt-table{
    display: flex;
    grid-column-start: 4;
    grid-column-end: 13;
    grid-row-start: 8;
    grid-row-end: 13;
    background-color: #F6B901;
    background-image: url(../assets/images/egypt-table.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
}

.chip{
    position: absolute;
    width: 7%;
}

[data-cell="1"]{left: 6%; top: 8%;}
[data-cell="2"]{left: 10%; top: 9%;}
[data-cell="3"]{left: 20%; top: 8%;}
[data-cell="4"]{left: 30%; top: 7%;}
[data-cell="5"]{left: 40%; top: 7%;}
[data-cell="6"]{left: 50%; top: 9%;}
[data-cell="7"]{left: 60%; top: 8%;}
[data-cell="8"]{left: 70%; top: 6%;}
[data-cell="9"]{left: 80%; top: 8%;}
[data-cell="10"]{left: 90%; top: 8%;}
[data-cell="11"]{left: 4%; top: 32%;}
[data-cell="12"]{left: 10%; top: 32%;}
[data-cell="13"]{left: 20%; top: 34%;}
[data-cell="15"]{left: 40%; top: 30%;}
[data-cell="14"]{left: 30%; top: 33%;}
[data-cell="16"]{left: 50%; top: 32%;}
[data-cell="17"]{left: 60%; top: 32%;}
[data-cell="18"]{left: 70%; top: 33%;}
[data-cell="19"]{left: 80%; top: 31%;}
[data-cell="20"]{left: 90%; top: 32%;}
[data-cell="21"]{left: 4%; top: 55%;}
[data-cell="22"]{left: 10%; top: 55%;}
[data-cell="23"]{left: 20%; top: 53%;}
[data-cell="25"]{left: 40%; top: 52%;}
[data-cell="24"]{left: 30%; top: 54%;}
[data-cell="26"]{left: 50%; top: 56%;}
[data-cell="27"]{left: 60%; top: 55%;}
[data-cell="28"]{left: 70%; top: 55%;}
[data-cell="29"]{left: 80%; top: 53%;}
[data-cell="30"]{left: 90%; top: 55%;}

.eqypt-person{
    display: flex;
    grid-column-start: 13;
    grid-column-end: 17;
    grid-row-start: 8;
    grid-row-end: 13;
    background-color: #B8860B;
}

.first-chess-fig{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 13;
    grid-row-end: 16;
    background-color: #AE1645;
    background-image: url('../assets/images/1fig1var.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    
}
.second-chess-fig{
    display: flex;
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 13;
    grid-row-end: 16;
    background-color: #FAF8F3;
    background-image: url('../assets/images/2fig1var.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.third-chess-fig{
    display: flex;
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 13;
    grid-row-end: 16;
    /* background-color: #AE1645; */
    background-image: url('../assets/images/3fig1var.svg');
    background-size: 111%;
    background-repeat: no-repeat;
    background-position: center;
}

.fourth-chess-fig{
    display: flex;
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 13;
    grid-row-end: 16;
    background-color: #FAF8F3;
    background-image: url('../assets/images/4fig1var.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.chess-queen{
    display: flex;
    grid-column-start: 9;
    grid-column-end: 13;
    grid-row-start: 13;
    grid-row-end: 19;
    background-color: #2C3E50;
    position: relative;
    z-index: -2;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.first-chessboard{
    display: flex;
    grid-column-start: 13;
    grid-column-end: 15;
    grid-row-start: 13;
    grid-row-end: 15;
    background-color: #AE1645;
}

.second-chessboard{
    display: flex;
    grid-column-start: 15;
    grid-column-end: 17;
    grid-row-start: 13;
    grid-row-end: 15;
    background-color: #FAF8F3;
}

.third-chessboard{
    display: flex;
    grid-column-start: 13;
    grid-column-end: 15;
    grid-row-start: 15;
    grid-row-end: 17;
    background-color: #FAF8F3;
}

.fourth-chessboard{
    display: flex;
    grid-column-start: 15;
    grid-column-end: 17;
    grid-row-start: 15;
    grid-row-end: 17;
    background-color: #AE1645;
}

.chess-sword{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 16;
    grid-row-end: 19;
    background-color: #2C3E50;
    padding: 9%;
}

.chess-fact{
    display: flex;
    grid-column-start: 3;
    grid-column-end: 9;
    grid-row-start: 16;
    grid-row-end: 19;
    background-color: #F6B901;
    padding: 7%;
    background-image: url('../assets/images/chess-fact.svg');
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}

.chess-slider{
    display: flex;
    grid-column-start: 13;
    grid-column-end: 17;
    grid-row-start: 17;
    grid-row-end: 19;
    background-color: #AE1645;
    justify-content: center;
    padding-top: 50%;
}

input[type=range]{
    appearance: none;
    background: none;
    cursor: pointer;
    width: 85%;

    font-size: 1vw;
}
input[type=range]::-webkit-slider-runnable-track{
    background: url("../assets/images/slider1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    height: 15em;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 4em;
    height: 11em;
    background: url("../assets/images/slider2.svg");
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -1.2em;
}

[data-js='js-queen']{
    position: absolute;
    z-index: -1;
    overflow: hidden;
    width: 231%;
    left: 18%;
}

.dnd-cube{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 19;
    grid-row-end: 23;
    background-color: #AE1645;
    background-image: url('../assets/images/dnd-cube.svg');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    justify-content: center; 
    align-items: center;
}

.dnd-cube img{
    position: absolute;
}

[data-js="js-cube-fact1"]{
    width: 43%;
    left: 28.5%;
    top: 6.5%;
    opacity: 0;
    cursor: pointer;
}

[data-js="js-cube-fact2"]{
    width: 32%;
    left: 7%;
    top: 35.5%;
    opacity: 0;
    cursor: pointer;
}

[data-js="js-cube-fact3"]{
    width: 43%;
    left: 28%;
    top: 34.5%;
    opacity: 0;
    cursor: pointer;
}

[data-js="js-cube-fact4"]{
    width: 40%;
    left: 41.3%;
    top: 45%;
    opacity: 0;
    cursor: pointer;
}



.dnd-first-fact{
    display: flex;
    grid-column-start: 5;
    grid-column-end: 8;
    grid-row-start: 19;
    grid-row-end: 23;
    background-color: #B8860B;
    background-image: url('../assets/images/dnd-sword1.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.dnd-second-fact{
    display: flex;
    grid-column-start: 8;
    grid-column-end: 11;
    grid-row-start: 19;
    grid-row-end: 23;
    background-color: #FAF8F3;
    background-image: url('../assets/images/dnd-sword2.svg');
    background-size: 74%;
    background-repeat: no-repeat;
    background-position: center;
}

.dnd-third-fact{
    display: flex;
    grid-column-start: 11;
    grid-column-end: 14;
    grid-row-start: 19;
    grid-row-end: 23;
    background-color: #B8860B;
    background-image: url('../assets/images/dnd-sword3.svg');
    background-size: 46%;
    background-repeat: no-repeat;
    background-position: center;
}

.dnd-fourth-fact{
    display: flex;
    grid-column-start: 14;
    grid-column-end: 17;
    grid-row-start: 19;
    grid-row-end: 23;
    background-color: #FAF8F3;
    background-image: url('../assets/images/dnd-sword4.svg');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.who-is-mafia{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 23;
    grid-row-end: 26;
    background-color: #F6B901;
    justify-content: center;
}

.who-is-mafia img{
    width: 85%;
}

.jaws{
    display: flex;
    grid-column-start: 10;
    grid-column-end: 17;
    grid-row-start: 23;
    grid-row-end: 30;
    background-color: #2C3E50;
    /* background-image: url('../assets/images/mafia-fact.svg'); */
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center top 57%;
    position: relative;
    justify-content: center;
    z-index: 2;
}

.jaws img{
    position: absolute;
    width: 80%;
}

#lower-jaw{
    animation: jawsMove 2s linear forwards;
}

@keyframes jawsMove{
    0%{top: 27%}
    100%{top: 60%}
}

.first-mafia-card{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 26;
    grid-row-end: 30;
    background-color: #2C3E50;
    background-image: url('../assets/images/who.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.second-mafia-card{
    display: flex;
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 26;
    grid-row-end: 30;
    background-color: #2C3E50;
    background-image: url('../assets/images/who.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.third-mafia-card{
    display: flex;
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 26;
    grid-row-end: 30;
    background-color: #2C3E50;
    background-image: url('../assets/images/who.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.monopoly{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 30;
    grid-row-end: 32;
    background-color: #AE1645;
    background-image: url('../assets/images/monopoly.svg');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}


.mon1{animation: mn1Anim 5s linear;}

@keyframes mn1Anim {
    0%{top: -15%; transform: rotateX(0deg);}
    50%{top: 50%; transform: rotateX(360deg);}
    100%{top: 110%; transform: rotateX(0deg);}
}

.mon2{animation: mn2Anim 2s linear;}

@keyframes mn2Anim{
    0%{top: -15%; transform: rotateZ(0deg);}
    50%{top: 50%; transform: rotateZ(360deg);}
    100%{top: 110%; transform: rotateZ(0deg);}
}

.mon3{animation: mn3Anim 3s linear;}

@keyframes mn3Anim{
    0%{top: -15%; transform: rotateX(0deg);}
    50%{top: 50%; transform: rotateX(360deg);}
    100%{top: 110%; transform: rotateX(0deg);}
}


.fact-monopoly{
    display: flex;
    grid-column-start: 10;
    grid-column-end: 17;
    grid-row-start: 30;
    grid-row-end: 37;
    background-color: #AE1645;
    position: relative;
    z-index: 0;
    background-image: url('../assets/images/monopoly-fact.svg');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center top 80%;
    overflow: hidden;
}

.fact-monopoly img{
    z-index: -2;
    width: 15%;
    position: absolute;
}

.monopoly-houses{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 32;
    grid-row-end: 37;
    background-color: #FAF8F3;
    background-image: url('../assets/images/hom1.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

footer{
    display: flex;
    grid-column-start: 1;
    grid-column-end: 17;
    grid-row-start: 37;
    grid-row-end: 40;
    background-color: #B8860B;
    z-index: 2;
    background-image: url('../assets/images/footer.svg');
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}


@media (max-width: 800px){
    body{
        grid-template-columns: repeat(14, 1fr);
        grid-template-rows: repeat(57, 1fr);
        aspect-ratio: 1 / 4.0714;
    }

    title{
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row-start: 1;
        grid-row-end: 5;
    }

    .eqypt-person{
        grid-column-start: 9;
        grid-column-end: 15;
        grid-row-start: 1;
        grid-row-end: 7;
    }

    .screensaver{
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row-start: 5;
        grid-row-end: 11;
    }

    .egypt-eye{
        grid-column-start: 9;
        grid-column-end: 15;
        grid-row-start: 7;
        grid-row-end: 11;
    }

    .eqypt-god{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 11;
        grid-row-end: 17;
    }

    .eqypt-table{
        grid-column-start: 5;
        grid-column-end: 15;
        grid-row-start: 11;
        grid-row-end: 17;
    }

    .chess-queen{
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 17;
        grid-row-end: 25;
    }

    .first-chessboard{
        grid-column-start: 9;
        grid-column-end: 11;
        grid-row-start: 17;
        grid-row-end: 19;
    }

    .second-chessboard{
        grid-column-start: 7;
        grid-column-end: 9;
        grid-row-start: 17;
        grid-row-end: 19;
    }

    .third-chessboard{
        grid-column-start: 11;
        grid-column-end: 13;
        grid-row-start: 17;
        grid-row-end: 19;
    }

    .fourth-chessboard{
        grid-column-start: 13;
        grid-column-end: 15;
        grid-row-start: 17;
        grid-row-end: 19;
    }

    .chess-fact{
        grid-column-start: 7;
        grid-column-end: 12;
        grid-row-start: 19;
        grid-row-end: 22;
    }

    .chess-slider{
        grid-column-start: 7;
        grid-column-end: 12;
        grid-row-start: 22;
        grid-row-end: 24;
    }

    .chess-sword{
        grid-column-start: 12;
        grid-column-end: 15;
        grid-row-start: 19;
        grid-row-end: 24;
    }

    .fourth-chess-fig{
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 25;
        grid-row-end: 30;
        background-size: 111%;
    }

    .third-chess-fig{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 25;
        grid-row-end: 30;
    }

    .second-chess-fig{
        grid-column-start: 7;
        grid-column-end: 11;
        grid-row-start: 22;
        grid-row-end: 30;
    }

    .first-chess-fig{
        grid-column-start: 11;
        grid-column-end: 15;
        grid-row-start: 22;
        grid-row-end: 30;
    }

    .dnd-cube{
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 30;
        grid-row-end: 36;
    }

    .dnd-first-fact{
        grid-column-start: 7;
        grid-column-end: 11;
        grid-row-start: 30;
        grid-row-end: 33;
        background-size: 28%;
    }

    .dnd-second-fact{
        grid-column-start: 7;
        grid-column-end: 11;
        grid-row-start: 33;
        grid-row-end: 36;
        background-size: 42%;
    }

    .dnd-third-fact{
        grid-column-start: 11;
        grid-column-end: 15;
        grid-row-start: 33;
        grid-row-end: 36;
        background-size: 28%;
    }

    .dnd-fourth-fact{
        
        grid-column-start: 11;
        grid-column-end: 15;
        grid-row-start: 30;
        grid-row-end: 33;
        background-size: 36%;
    }

    .who-is-mafia{
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 36;
        grid-row-end: 38;
    }

    .jaws{
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 38;
        grid-row-end: 45;
    }

    .first-mafia-card{
        grid-column-start: 7;
        grid-column-end: 11;
        grid-row-start: 36;
        grid-row-end: 41;
    }

    .second-mafia-card{
        grid-column-start: 11;
        grid-column-end: 15;
        grid-row-start: 36;
        grid-row-end: 41;
    }

    .third-mafia-card{
        grid-column-start: 7;
        grid-column-end: 15;
        grid-row-start: 41;
        grid-row-end: 45;
        background-size: 25%;
    }

    .monopoly{
        grid-column-start: 1;
        grid-column-end: 15;
        grid-row-start: 45;
        grid-row-end: 48;
        z-index: 2;
    }

    .fact-monopoly{
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 48;
        grid-row-end: 55;
    }

    .monopoly-houses{
        grid-column-start: 6;
        grid-column-end: 15;
        grid-row-start: 48;
        grid-row-end: 55;
    }

    footer{
        grid-column-start: 1;
        grid-column-end: 15;
        grid-row-start: 55;
        grid-row-end: 58;
    }
}

@media (max-width: 475px){
    body{
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(77, 1fr);
        aspect-ratio: 1 / 8.5556;
    }

    title{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 1;
        grid-row-end: 5;
    }

    .eqypt-person{
        grid-column-start: 6;
        grid-column-end: 10;
        grid-row-start: 15;
        grid-row-end: 20;
    }

    .screensaver{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 5;
        grid-row-end: 12;
    }

    .egypt-eye{
        grid-column-start: 6;
        grid-column-end: 10;
        grid-row-start: 12;
        grid-row-end: 15;
    }

    .eqypt-god{
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 12;
        grid-row-end: 20;
    }

    .eqypt-table{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 20;
        grid-row-end: 25;
    }

    .chess-queen{
        grid-column-start: 5;
        grid-column-end: 10;
        grid-row-start: 35;
        grid-row-end: 42;
    }

    .first-chessboard{
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 42;
        grid-row-end: 44;
    }

    .second-chessboard{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 42;
        grid-row-end: 44;
    }

    .third-chessboard{
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 42;
        grid-row-end: 44;
        background-color: #AE1645;
    }

    .fourth-chessboard{
        display: none;
    }

    .chess-fact{
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 30;
        grid-row-end: 35;
    }

    .chess-slider{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 40;
        grid-row-end: 42;
        padding-top: 31%;
    }

    .chess-sword{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 35;
        grid-row-end: 40;
    }

    .fourth-chess-fig{
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 25;
        grid-row-end: 30;
        background-size: 111%;
    }

    .third-chess-fig{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 25;
        grid-row-end: 30;
    }

    .second-chess-fig{
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 25;
        grid-row-end: 30;
        background-size: 112%;
    }

    .first-chess-fig{
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 30;
        grid-row-end: 35;
        background-size: 112%;
    }

    .dnd-cube{
        grid-column-start: 5;
        grid-column-end: 10;
        grid-row-start: 44;
        grid-row-end: 49;
    }

    .dnd-first-fact{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 44;
        grid-row-end: 49;
        background-size: 44%;
    }

    .dnd-second-fact{
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 49;
        grid-row-end: 53;
        background-size: 72%;
    }

    .dnd-third-fact{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 49;
        grid-row-end: 53;
        background-size: 46%;
    }

    .dnd-fourth-fact{
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 49;
        grid-row-end: 53;
        background-size: 59%;
    }

    .who-is-mafia{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 53;
        grid-row-end: 59;
    }

    .jaws{
        grid-column-start: 5;
        grid-column-end: 10;
        grid-row-start: 53;
        grid-row-end: 59;
    }

    .first-mafia-card{
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 59;
        grid-row-end: 63;
    }

    .second-mafia-card{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 59;
        grid-row-end: 63;
    }

    .third-mafia-card{
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 59;
        grid-row-end: 63;
        background-size: 50%;
    }

    .monopoly{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 63;
        grid-row-end: 65;
        z-index: 2;
    }

    .fact-monopoly{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 65;
        grid-row-end: 71;
    }

    .monopoly-houses{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 71;
        grid-row-end: 76;
        z-index: 2;
    }

    footer{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 76;
        grid-row-end: 78;
    }
}