@media(max-width: 1100px){
    .container{
        width: auto;
    }
   .header__content-title{
        font-size: 150px;
        margin-bottom: 80px;
    } 
    #start-btn{
        width: 250px;
        height: 55px;
        font-size: 20px;
    }
    #reting-btn{
        width: 250px;
        height: 55px;
        font-size: 20px;
        padding-left: 16px;
    }
    .music{
        width: 33px;
        height: 33px;
        font-size: 15px;
    }
    .loginBtn{
        width: 33px;
        height: 33px;
    }
    .loginBtn i {
        font-size: 15px
    }
    .telegram__icon{
        width: 33px;
        height: 33px;
        font-size: 15px;
    }
    .header__content-top{
        width: 122px;
    }
    .book{
        width: auto;
    }
    .book__content{
        width: auto;
    }
}
@media(max-width: 720px){
    .header__content-title{
        font-size: 120px;
        margin-bottom: 75px;
    } 
    #start-btn{
        width: 230px;
        height: 50px;
        font-size: 20px;
    }
    #reting-btn{
        width: 230px;
        height: 50px;
        font-size: 20px;
        padding-left: 16px;
    }
    .header__content-top{
        width: 100px;
        top: 60px;
        right: 50px;
    }
    .music{
        width: 33px;
        height: 33px;
        font-size: 15px;
    }
    .loginBtn{
        width: 33px;
        height: 33px;
    }
    .loginBtn i {
        font-size: 15px
    }
    .telegram__icon{
        width: 33px;
        height: 33px;
        font-size: 15px;
    }
    .header__content-top{
        width: 122px;
    }
    .book__content a img{
        width: 270px;
        height: 350px;
    }
}
@media(max-width: 576px){
    .header__content-title{
        font-size: 95px;
        margin-bottom: 70px;
    }
    .header__content-top{
        justify-content: flex-end;  
    }
    #start-btn{
        width: 215px;
        height: 40px;
        font-size: 16px;
    }
    #reting-btn{
        width: 215px;
        height: 40px;
        font-size: 16px;
        padding-left: 16px;
    }
}
@media(max-width: 491px){
    .header__content-title{
        font-size: 80px;
        margin-bottom: 60px;
    }
    .header__content-top{
        justify-content: flex-end;
    }
    #start-btn{
        width: 200px;
        height: 40px;
        font-size: 16px;
    }
    #reting-btn{
        width: 200px;
        height: 40px;
        font-size: 16px;
        padding-left: 16px;
    }
}
@media(max-width: 431px){
    .container{
        width: auto;
        height: auto;
        margin: 0;
    }
    .header__content-title{
        font-size: 80px;
        margin-bottom: 70px;
        /* color: red; */
    }
    #start-btn{
        width: 180px;
        height: 40px;
        font-size: 16px;
    }
    #reting-btn{
        width: 180px;
        height: 40px;
        font-size: 16px;
        padding-left: 16px;
    }
    .header__content-top{
        width: 100px;
        top: 60px;
        right: 20px;
        justify-content: flex-end;
    }
    .music{
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .loginBtn{
        width: 30px;
        height: 30px;
    }
    .loginBtn i {
        font-size: 16px
    }
    .telegram__icon{
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    .book__content a img{
        width: 230px;
        height: 320px;
    }
    .unite{
        width: 350px;
        height: 500px;
        border-color: #fff;
    }
    .unite__content-item{
        padding: 14px;
        font-size: 20px;
        /* border: 4px solid #00fff3; */
        border: 4px solid white;
    }
    .quiz__content{
    width: 360px;
    height: 560px;
    }
    .quiz__content-top{
        width: 85%;
        margin-bottom: 30px;
    }
    .quiz__content-time{
        width: 55px;
        font-size: 16px;
    }
    #countSavol{
        width: 220px;
        max-width: none;
        font-size: 17px;
    }
    #modalSavol{
        text-align: center;
        width: 80%;
        height: 95px;
        padding: 25px;
        margin-bottom: 40px;
    }
    .quiz__content-btn{
        width: 200px;
        padding: 8px 5px;
        font-size: 22px;
    }
    .quiz_actions{
        width: 300px;
        margin-top: 60px;
    }
    .btn-home{
        width: 130px;
        font-size: 15px;
    }
    .restart{
        width: 130px;
        font-size: 15px;
    }
    .end-title {
        width: 180px;
        font-size: 16px;
        padding: 12px 0;
    }
}
@media(max-width: 410px){
    .container{
        width: auto;
        height: max-content;
        margin: 0;
    }
    .header__content-title{
        font-size: 70px;
        margin-bottom: 60px;
    }
    #start-btn{
        width: 160px;
        height: 40px;
        font-size: 14px;
    }
    #reting-btn{
        width: 160px;
        height: 40px;
        font-size: 14px;
        padding-left: 16px;
    }
    .header__content-top{
        width: 100px;
        top: 60px;
        right: 20px;
        justify-content: flex-end;
    }
    .music{
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .loginBtn{
        width: 30px;
        height: 30px;
    }
    .loginBtn i {
        font-size: 16px
    }
    /* .telegram__icon{
        width: 30px;
        height: 30px;
        font-size: 16px;
    } */
    .unite{
        width: 330px;
        height: 500px;
        border-color: #fff;
    }
    .unite__content-item{
        padding: 14px;
        font-size: 20px;
        border: 4px solid #00fff3;
    }
}