*{
    margin:0;
    padding:0;
}

body{background-image:url(min.jpg);
    background-size: cover;
    height:100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
 }


header{
    flex:0.1;
    background-color:#F2C94C;
    color:white;
    font-family: 'Kalam', cursive;

    width: 100%;

    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

header >h1{
    font-size:2vw;

}


.translator{
    flex:0.75;
    text-align: center;
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: space-around;

}

textarea{


    
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.6);
    font-family: 'Kalam', cursive;
    color: white;
    font-weight: bold;
    
    font-size:2vw;

    height:30%;
    width:50vw;
    padding:1vw;
    
}

button{
    
    background-color:#F2C94C;
    color:white;
    border:0.5vw solid white;
    border-radius:15px;
    padding:0.5vw 2vw;
    font-family: 'Kalam', cursive;
    font-weight: bold;

    font-size:1.5vw;
    cursor: pointer;

}



button:hover{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
}

footer{

    flex:0.15;
    background-color:#F2C94C;
    color:#333333;
    font-family: 'Kalam', cursive;
    text-align: center;

    

    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding:0vw 5vw

}

footer >h1{
    font-size:1.5vw;
}

footer >p{
    font-size:1.1vw;
    
}


@media only screen and (max-width: 600px) {
    header >h1{
        font-size:4vw;
    
    }

    button{
        font-size:2vw;
    }

    footer >h1{
        font-size:4vw;
    }
    
    footer >p{
        font-size:2vw;
        
    }
}