@media (max-width:1200px){

    main{

        padding:20px;

        padding-bottom:120px;

    }

}

@media (max-width:992px){

    #festivalTitle{

        font-size:30px;

    }

    .profile-card{

        grid-template-columns:repeat(3,1fr);

    }

    .profile-stats{

        grid-template-columns:repeat(2,1fr);

    }

    #stagesContainer{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    body{

        font-size:15px;

    }

    main{

        padding:15px;

        padding-bottom:120px;

    }

    .hero-content{

        padding:18px;

    }

    #festivalTitle{

        font-size:28px;

    }

    #festivalDescription{

        font-size:15px;

    }

    .popup-box{

        padding:18px;

        border-radius:22px;

    }

    .profile-card{

        grid-template-columns:1fr;

    }

    .profile-stats{

        grid-template-columns:1fr;

    }

    #stagesContainer{

        grid-template-columns:1fr;

    }

    .leaderboard-header{

        display:none;

    }

    .leaderboard-item{

        grid-template-columns:55px 1fr;

        row-gap:10px;

    }

    .leaderboard-stage{

        text-align:right;

    }

    .leaderboard-xp{

        text-align:left;

    }

}

@media (max-width:576px){

    #taskbar{

        width:96%;

        height:75px;

        padding:8px;

        bottom:10px;

    }

    .taskbar-item{

        width:55px;

        height:55px;

    }

    .taskbar-item img{

        width:20px;

        height:20px;

    }

    .taskbar-item span{

        font-size:10px;

    }

    #profileImage{

        width:90px;

        height:90px;

    }

    #profileFullName{

        font-size:22px;

    }

    #stageTitle{

        font-size:28px;

    }

    .stage-card{

        min-height:190px;

    }

    .mission-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .mission-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .mission-button{

        width:100%;

    }

    .ai-header{

        flex-direction:column;

        text-align:center;

    }

    .ai-info h2{

        text-align:center;

    }

    .ai-input-box{

        flex-direction:column;

    }

    #sendAiMessage{

        width:100%;

    }

}

@media (max-width:400px){

    #festivalTitle{

        font-size:24px;

    }

    #festivalDescription{

        font-size:14px;

    }

    .popup-box{

        padding:15px;

    }

    #taskbar{

        height:70px;

    }

    .taskbar-item{

        width:48px;

        height:48px;

    }

    .taskbar-item span{

        display:none;

    }

}