@media only screen and (min-width: 3840px){
    body,
    .catchphrase .title,
    .catchphrase-container div,
    .music-title,
    .sosmed-text,
    .gameplay-description .title,
    .news-container .title{
        font-size: 2.75em;
    }

    .container.catchphrase .title{
        font-size: 2.5em;
    }

    .container.catchphrase .catchphrase,
    .catchphrase .description{
        font-size: 1.5em;
    }

    .cta-button .button{
        padding: 24px 32px 16px;
        font-size: 1.25em;
    }

    .cta-button .button .fab{
        font-size: 1.25em;
    }

    .video-list-container .video-item{
        height: 100px;
        margin: 0 0 40px
    }

    .fa, .fab, .fas, 
    .prev-news i, 
    .next-news i{
        font-size: 2em;
    }

    .prev-news, .next-news{
        width: 3em;
        height: 3em;
        top: calc(50% - 1em);
    }
}

@media only screen and (min-width: 2560px) and (max-width: 3839px){
    body,
    .catchphrase .title,
    .catchphrase-container div,
    .music-title,
    .sosmed-text,
    .gameplay-description .title,
    .news-container .title{
        font-size: 2.25em;
    }

    .container.catchphrase .title{
        font-size: 2em;
    }

    .container.catchphrase .catchphrase,
    .catchphrase .description{
        font-size: 1.25em;
    }

    .cta-button .button{
        padding: 24px 32px 16px;
        font-size: 1.25em;
    }

    .cta-button .button .fab{
        font-size: 1.25em;
    }

    .video-list-container .video-item{
        height: 100px;
        margin: 0 0 40px
    }

    .sosmed-container .fa,
    .sosmed-container .fab{
        margin: 0 1%;
    }

    .fa, .fab, .fas,
    .prev-news i, 
    .next-news i{
        font-size: 2em;
    }

    .prev-news, .next-news{
        width: 3em;
        height: 3em;
        top: calc(50% - 1em);
    }

    .wayang.lamp{
        width: 10%;
    }

    .wayang.tree.left-one{
        width: 30%;
        left: -4vw;
    }

    .wayang.tree.left-two{
        width: 20%;
    }

    .wayang.tree.right-one{
        width: 40%;
        right: -26vw;
    }

    .wayang.tree.right-two{
        width: 25%;
        right: -4vw;
    }

    .wayang.flower{
        width: 7.5%;
    }
}

@media only screen and (max-width: 1366px){
    body,
    .cta-button .button{
        font-size: 18px;
    }

    .video-list-container .video-item{
        height: 48px;
    }

    .catchphrase .title,
    .catchphrase-container div,
    .music-title,
    .sosmed-text,
    .gameplay-description .title{
        font-size: 32px;
    }

    .visualizer-canvas{
        margin: 2.5vh;
    }
      
    .character-description{
        margin-left: 5%;
    }
} 

@media only screen and (max-width: 1080px) and (orientation: landscape){
    body,
    .cta-button .button{
        font-size: 16px;
    }

    .cover-image-container{
        width: 125%;
        bottom: -10%;
        left: -12.5%;
    }

    .video-box-container{
        width: 90%;
    }

    .video-list-container .video-item{
        height: 40px;
    }

    .video-item .text{
        top: 2px;
    }

    .catchphrase .title,
    .catchphrase-container div,
    .music-title,
    .sosmed-text,
    .gameplay-description .title{
        font-size: 28px;
    }

    .visualizer-canvas{
        height: 100px;
    }

    .prev-music-button, 
    .next-music-button, 
    .prev-image-button, 
    .next-image-button{
        width: 50px;
    }

    .prev-music-button .fa, 
    .next-music-button .fa, 
    .prev-image-button .fa, 
    .next-image-button .fa{
        font-size: 35px;
    }

    .petal.nala-one,
    .petal.flower-one,
    .petal.grandpa-one{
        width: 40px;
    }

    .petal.nala-two,
    .petal.flower-two,
    .petal.grandpa-two{
        width: 20px;
    }

    .petal.nala-three,
    .petal.flower-three,
    .petal.grandpa-three{
        width: 50px;
    }

    .wayang.tree.left-one{
        left: -11%;
    }

    .wayang.tree.left-two{
        left: -16%;
    }

    .wayang.tree.right-one{
        right: -24%;
    }

    .wayang.tree.right-two{
        right: -8%;
    }

    .gameplay-item{
        flex-direction: column;
    }

    .gameplay-video,
    .gameplay-description{
        width: 80%;
    }

    .gameplay-description .title{
        margin-bottom: 0;
        margin-top: 5vh;
    }

    .ov-character-item{
        width: 80%;
    }

    .character-image{
        height: 150%;
    }
}

@media only screen and (max-width: 992px){
    .section{
        height: fit-content;
    }

    .subsection{
        padding: 5vh 0;
    }

    .content-container{
        padding: 10% 0;
    }

    .game-title{
        height: 30vh;
    }

    .cover-image-container{
        width: 175%;
        bottom: 10%;
        left: -37.5%;
    }

    .container.catchphrase{
        width: 100vw;
        right: -5%;
        bottom: 0;
        padding: 10% 0;
        background-image: linear-gradient(transparent, #111, #111);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .cta-button-container{
        align-items: center;
        justify-content: center;
    }

    .cta-button{
        margin: 20px 10px 0;
    }

    .video-box-container{
        width: 90%;
        flex-direction: column-reverse;
    }

    .video-box-container .video{
        width: 100%;
        margin-top: 5%;
    }

    .video-box-container .video-list-container{
        width: 100%;
        flex-direction: row;
        overflow-x: scroll;
    }

    .video-list-container .video-item{
        margin: 0 20px;
        width: max-content;
    }

    .video-item .text{
        position: relative;
        width: max-content;
        padding: 10px 24px;
    }

    .video-item .bg.bg-1{
        transform: rotate(4deg) translate(-3px,-2px);
    }

    .video-item .bg.bg-2{
        transform: rotate(-3deg) translate(-3px,-2px);
    }

    .portal-section{
        padding: 5vh 0 0;
    }

    .portal-container{
        width: 33%;
        aspect-ratio: 1/1;
    }

    .visual{
        flex-direction: column;
        align-items: center;
    }

    .visual .catchphrase{
        width: 100%;
    }

    .catchphrase .title{
        margin-bottom: 30px;
    }

    .slideshow-container{
        width: 100%;
        margin: 5% 0;
    }

    .music-container{
        width: 100%;
        flex-direction: column;
    }

    .prev-music-button{
        left: 40px;
        top: 20%;
    }

    .next-music-button{
        right: 40px;
        top: 20%;
    }

    .music-control-container{
        width: 50%;
    }

    .music-item-container{
        width: 100%;
    }

    .visualizer-area{
        width: 100%;
        padding: 10% 2%;
    }

    .visualizer-canvas .bar{
        width: 7px;
    }

    .section.character{
        height: fit-content;
    }

    .character-container{
        flex-direction: column;
        height: fit-content;
    }

    .character-item{
        width: 100%;
        height: 450px;
        margin: 10% 0;
    }

    .character-container .character{
        background-size: contain;
    }

    .sosmed{
        height: 40vh;
    }

    .gameplay-item{
        flex-direction: column;
    }

    .gameplay-video{
        width: 100%;
    }

    .gameplay-description{
        width: 100%;
    }

    .gameplay-description .title{
        margin-top: 5%;
        margin-bottom: 2%;
    }

    .ov-character-item{
        flex-direction: column;
    }

    .silhouette{
        width: 100%;
        right: 0;
        background-size: cover;
    }

    .character-image{
        width: 100%;
        background-size: contain;
        margin-top: 0;
    }

    .character-description{
        width: 100%;
        height: max-content;
    }

    .character-description .title{
        margin-bottom: 5%;
    }

    /* Pernak pernik */

    .star-1{
        width: 40px;
    }

    .star-2{
        width: 30px;
        bottom: 30vh;
        left: 12vw;
    }

    .star-3{
        width: 50px;
    }

    .star-4{
        width: 40px;
        top: 30vh;
        right: 22.5vw;
    }

    .star-5{
        width: 30px;
        bottom: 40vh;
        right: 18vw;
    }

    .star-6{
        width: 50px;
        bottom: 55vh;
        right: 5vw;
    }

    .star-7{
        width: 30px;
        bottom: 41vh;
        left: 4vw;
    }

    .news-container{
        display: none;
    }

    .news-container.mobile-view{
        display: block;
        position: relative;
        width: 100%;
        margin: auto;
        padding: 5vh 0;
        left: auto;
        bottom: auto;
        background-color: #111;
    }

    .news{
        width: 50%;
        margin: auto;
    }

    .prev-news{
        left: calc(-3rem - 2%);
    }

    .next-news{
        right: calc(-3rem - 2%);
    }

    .dots{
        width: 50%;
        margin: auto;
    }

    .mask.big-one{
        bottom: -3vh;
        right: -10vw;
    }

    .mask.big-two{
        top: -14vh;
        left: -12vw;
    }

    .memfragment.big-one{
        bottom: 3vh;
        right: -3vw;
    }

    .memfragment.big-two{
        right: 7vw;
    }

    .memfragment.big-three{
        top: 10vh;
        left: -6vw;
    }

    .floatingobj.one{
        width: 25vw;
        top: 0vh;
        left: -7vw;
    }

    .floatingobj.two{
        width: 25vw;
        bottom: -2vh;
        left: 3vw;
    }

    .floatingobj.three{
        width: 30vw;
        top: 10vh;
    }

    .comet.one{
        width: 20%;
    }

    @keyframes comet-one {
        0% {top: 0%; left: 100%; opacity: 0;}
        5% {opacity: .3;}
        95% {opacity: .3;}
        100% {top: 90%; left: -10%; opacity: 0;}
    }

    .comet.two{
        width: 14%;
    }

    @keyframes comet-two {
        0% {top: 30%; right: -30%; opacity: 0;}
        5% {opacity: .3;}
        95% {opacity: .3;}
        100% {top: 120%; right: 80%; opacity: 0;}
    }

    .comet.three{
        width: 10%;
    }
      
    @keyframes comet-three {
        0% {top: -10%; right: 50%; opacity: 0;}
        5% {opacity: .3;}
        95% {opacity: .3;}
        100% {top: 80%; right: 140%; opacity: 0;}
    }

    .wayang.tree.left-one{
        left: -14%;
    }

    .wayang.tree.left-two{
        left: -18%;
    }

    .wayang.tree.right-one{
        right: -26%;
    }

    .wayang.tree.right-two{
        right: -8%;
    }

    @keyframes flower-walk{
        0% {left:25%; transform: scaleX(1);}
        100% {left:60%; transform: scaleX(1);}
    }
    
    @keyframes flower-jump{
        0% {bottom: -35%;}
        100% {bottom: -30%;}
    }

    .memfragment.big-one.overlay{
        width: 30vw;
        bottom: 8vh;
    }

    .memfragment.big-two.overlay{
        width: 30vw;
    }

    .memfragment.big-three.overlay{
        width: 50vw;
        bottom: 24vh;
        left: -5vw;
    }

    .transition-petal.active{
        left: -81%;
        bottom: -47%;
    }
}

@media only screen and (max-width: 600px){
    body,
    .cta-button .button{
        font-size: 16px;
    }

    /* .video-list-container .video-item{
        height: 48px;
    } */

    .catchphrase .title,
    .catchphrase-container div,
    .music-title,
    .sosmed-text,
    .gameplay-description .title{
        font-size: 28px;
    }

    .content-container{
        width: 95%;
    }

    .game-title{
        height: 40vh;
        width: 100%;
    }

    .cover-image-container{
        width: 250%;
        left: -75%;
    }

    .container.catchphrase{
        left: -2.5%;
    }

    .portal-section{
        flex-direction: column;
    }

    .portal-container{
        width: 50%;
        margin-bottom: 5%;
    }

    .prev-music-button{
        width: 40px;
        top: 15%
    }

    .next-music-button{
        width: 40px;
        top: 15%;
    }

    .prev-music-button .fa,
    .next-music-button .fa{
        font-size: 25px;
    }

    .visualizer-canvas .bar{
        width: 5px;
        margin: 0 1px;
    }

    .fa, .fab{
        font-size: 30px;
    }

    .gameplay-item{
        width: 95%;
        padding: 0;
    }

    .prev-gameplay-button,
    .next-gameplay-button, 
    .prev-character-button, 
    .next-character-button, 
    .close-button{
        width: 40px;
        bottom: 20%;
    }

    .prev-gameplay-button,
    .prev-character-button{
        left: 30%;
    }

    .next-gameplay-button,
    .next-character-button{
        right: 30%;
    }

    .ov-character-item{
        margin-top: -5%;
        width: 95%;
        height: 70%;
    }

    .character-description{
        width: 90%;
        margin: auto;
    }

    .character-description .name{
        font-size: 70px;
    }

    .character-description .title{
        font-size: 28px;
    }

    .prev-character-button,
    .next-character-button{
        bottom: 10%;
    }

    .silhouette{
        width: 100%;
    }

    .close-button{
        top: 30px;
        right: 30px;
    }

    .star-1{
        width: 20px;
        top: 11vh;
        left: 7vw;
    }

    .star-2{
        width: 15px;
        bottom: 34vh;
    }

    .star-3{
        width: 25px;
        top: 34vh;
    }

    .star-4{
        width: 20px;
    }

    .star-5{
        width: 15px;
    }

    .star-6{
        width: 25px;
    }

    .star-7{
        width: 15px;
        bottom: 47vh;
    }

    .news, .dots{
        width: 70%;
        margin: auto;
    }

    .mask.big-one{
        bottom: -2vh;
    }

    .mask.big-two{
        top: -5vh;
    }

    .memfragment.big-one{
        bottom: 2vh;
        right: 0vw;
        width: 30vw;
    }

    .memfragment.big-two{
        right: 1vw;
        width: 25vw;
        top: 2vh;
    }

    .memfragment.big-three{
        top: 37vh;
        left: 3vw;
        width: 40vw;
        opacity: .15;
    }

    .floatingobj.one{
        width: 30vw;
        left: -3vw;
    }

    .floatingobj.two{
        width: 35vw;
        bottom: -1vh;
    }

    .floatingobj.three{
        width: 40vw;
        top: 16vh;
    }

    .wayang.lamp.left-one{
        left: 5%;
    }

    .wayang.tree.left-one{
        left: -52%;
    }

    .wayang.tree.left-two{
        left: -49%;
    }

    .wayang.lamp.right-one{
        right: 5%;
    }

    .wayang.tree.right-one{
        right: -76%;
    }

    .wayang.tree.right-two{
        right: -43%;
    }

    .wayang.flower{
        width: 60px;
    }

    @keyframes flower-walk{
        0% {left:20%; transform: scaleX(1);}
        100% {left:60%; transform: scaleX(1);}
    }
      
    @keyframes flower-jump{
        0% {bottom: -45%;}
        100% {bottom: -40%;}
    }

    .transition-petal{
        width: 275%;
    }

    .transition-petal.active{
        width: 275%;
        left: -105%;
        bottom: -29%;
    }

    .coming-soon{
        width: 100%;
    }
}