*{
    box-sizing: border-box;
}

body{
    background: rgb(240, 180, 67);
    color: white;
    transition: 2s;
    transition: color 2s;
    
}

main{
    display: flex;
    flex-direction: column;
}

.container{
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.words{
width: 70vw;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
bottom: 20vh;
z-index: 99;
}

.expression{
    display: flex;
    justify-content: center;
    align-items: center;
   
}

@media screen and (max-width: 4000px){
    body{
        background-color: #00bbff;
        color: #ffffff;
        font-size: 70%;
        align-items: center;
    }
    main{
        flex-direction: column;
    }
    #phrase1{
        display: none;
    }
    #phrase2{
        display: none;
    }
    #phrase3{
        display: none;
    }
    #phrase4{
        display: none;
    } 
    #phrase5{
        display: inline;
    }

}

@media screen and (max-width: 1400px){
    body{
        background-color: #067cc5;
        color: #ffffff;
        font-size: 90%;
        align-items: center;
    }
    main{
        flex-direction: column;
    }
    #phrase1{
        display: none;
    }
    #phrase2{
        display: none;
    }
    #phrase3{
        display: none;
    }
    #phrase4{
        display: inline;
    } 
    #phrase5{
        display: none;
    }


}

@media screen and (max-width: 1200px){
    body{
        background-color: #1a4f8b;
        color: #ffffff;
        font-size: 110%;
        align-items: center;
    }
    main{
        flex-direction: column;
    }
    #phrase1{
        display: none;
    }
    #phrase2{
        display: none;
    }
    #phrase3{
        display: inline;
    }
    #phrase4{
        display: none;
    } 
    #phrase5{
        display: none;
    }

}

@media screen and (max-width: 800px){
    body{
        background-color: #112f4c;
        color: #ffffff;
        font-size: 130%;
        align-items: center;
    }
    main{
        flex-direction: column;
    }
    #phrase1{
        display: none;
    }
    #phrase2{
        display: inline;
    }
    #phrase3{
        display: none;
    }
    #phrase4{
        display: none;
    } 
    #phrase5{
        display: none;
    }

}

@media screen and (max-width: 500px){
    body{
        background-color: #000000;
        color: white;
        font-size: 160%;
        align-items: center;
    }
    main{
        flex-direction: column;
    }
    #phrase1{
        display: inline;
    }
    #phrase2{
        display: none;
    }
    #phrase3{
        display: none;
    }
    #phrase4{
        display: none;
    } 
    #phrase5{
        display: none;
    }

}