body{
    margin:0px;
}

.main-container{
    position:relative;
    overflow: hidden;
    width:1920px;
    transform-origin: top left;
}

.bg{
    width:100%;
}

.bg-m{
    display:none;
    width:100%;
}

.board{
    position: absolute;
    z-index:3;
    top:94px;
    left:1195px;
    transform: rotate(5deg);
}

.label1{
    position: absolute;
    z-index:3;
    top:334px;
    left:406px;
}

.label2{
    position: absolute;
    z-index:3;
    top:728px;
    left:406px;
}

.label3{
    position: absolute;
    z-index:3;
    top:1118px;
    left:406px;
}

.label-container{
    position:relative;
}

.smallboard_txt{
    font-size: 38px;
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    font-family: 'Fredoka One', cursive;
}

.book {
    width: 172px;
    margin:0;
    transition: width 0.1s, margin 0.1s;
}

.book:hover{
    width:200px;
    margin:-14px;
}

.book1{
    position: absolute;
    z-index:4;
    top:420px;
    left:536px;
}

.book2{
    position: absolute;
    z-index:4;
    top:420px;
    left:766px;
}

.book3{
    position: absolute;
    z-index:4;
    top:420px;
    left:990px;
}

.book4{
    position: absolute;
    z-index:4;
    top:420px;
    left:1218px;
}

.book5{
    position: absolute;
    z-index:4;
    top:810px;
    left:536px;
}

.book6{
    position: absolute;
    z-index:4;
    top:810px;
    left:766px;
}

.book7{
    position: absolute;
    z-index:4;
    top:810px;
    left:990px;
}

.book8{
    position: absolute;
    z-index:4;
    top:810px;
    left:1218px;
}

.book9{
    position: absolute;
    z-index:4;
    top:1197px;
    left:536px;
}

.book10{
    position: absolute;
    z-index:4;
    top:1197px;
    left:766px;
}

.book11{
    position: absolute;
    z-index:4;
    top:1197px;
    left:990px;
}

.book12{
    position: absolute;
    z-index:4;
    top:1197px;
    left:1218px;
}

.game_container{
    position: absolute;
    z-index:3;
    top:1550px;
    left:780px;
    cursor:pointer;
}

.game_container1{
    top:1550px;
    left:780px;
}

.game_container2{
    top:1550px;
    left:993px;
}

.game_container:hover .game_tri{
    animation-name: game_tri;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.game_container:hover .game_pad{
    transform: translateX(0%);
    /* animation: headShake infinite;
    animation-duration: 0.5s */
}

/* .game_container:hover .game_shadow{
    animation: headShake infinite;
    animation-duration: 0.5s
} */

@keyframes game_tri {
    0% {transform: translateY(-5px) translateX(-50%);}
    50% {transform: translateY(10px) translateX(-50%);}
    100% {transform: translateY(-5px) translateX(-50%);}
}

.game_container_relative{
    position:relative;
}

.game_shadow{
    position: absolute;
    z-index:2;
    bottom:0px;
    left:0px;
}

.game_pad{
    position: relative;
    z-index:3;
    display:block;
}

.game_dialog{
    width:160px;
    height:165px;
    border:1px solid #FFF200;
    border-radius:20px;
    margin-bottom:27px;
    position: relative;
}




.game_tri{
    position: absolute;
    top:154px;
    left:50%;
    transform:translateX(-50%);
    
}



.game_text{
    position: absolute;
    top:50%;
    left:50%;
    width:80%;
    transform:translateX(-50%) translateY(-50%);
    font-family: 'Tajawal', sans-serif;
    font-size:27px;
    color:#FFF;
    line-height: 1.2;
}

.back{
    position: absolute;
    z-index:3;
    top:48px;
    left:384px;
    cursor:pointer;
    transform: scale(1);
    transition: transform 0.1s;
}

.back:hover{
    transform: scale(1.2);
}

a:focus{
    opacity:0.8;
    outline: none;
}

@media screen and (max-width: 1023px) {
    .main-container{
        width:750px;
    }
    .bg-m{
        display:block;
    }
    .bg{
        display:none;
    }

    .board{
        top:16px;
        left:67px;
        transform: rotate(0deg);
    }

    .label1{
        top:402px;
        left:1px;
    }

    .label2{
        top:1347px;
        left:1px;
    }

    .label3{
        top:2293px;
        left:1px;
    }

    .shadow{
        height:375px;
    }

    .book{
        width:264px;
    }

    .book:hover{
        width:300px;
        margin:-18px;
    }

    .book1{
        top:487px;
        left:89px;
    }

    .book2{
        top:487px;
        left:397px;
    }

    .book3{
        top:963px;
        left:89px;
    }

    .book4{
        top:963px;
        left:397px;
    }

    .book5{
        top:1435px;
        left:89px;
    }

    .book6{
        top:1435px;
        left:397px;
    }

    .book7{
        top:1913px;
        left:89px;
    }

    .book8{
        top:1913px;
        left:397px;
    }

    .book9{
        top:2377px;
        left:89px;
    }

    .book10{
        top:2377px;
        left:397px;
    }

    .book11{
        top:2850px;
        left:89px;
    }

    .book12{
        top:2850px;
        left:397px;
    }

    .game_container1{
        top: 3293px;
        left: 106px;
    }

    .game_container2{
        top:3293px;
        left:414px;
    }

    .game_dialog{
        margin-top: 20px;
        width: 224px;
        height: 208px;
    }

    .game_pad {
        width: 210px;
    }

    .game_shadow {
        width: 268px;
    }

    .game_tri {
        top: 193px;
    }

    .back{
        top:0px;
        left:471px;
    }
}