@media (min-width: 1930px) {
    .result-box{
        height: 45vh; 
    }
    
}
@media (min-width: 1330px) {
    .result-box{
        height: 35vh; 
    }
    
}
@media (max-width: 1030px) {
    
    .container{
        height: 100vh;
        width: 100%;
        padding: 2vw;
        background-color: rgb(138, 138, 138);
    }

    header {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        height: 120px;
        width: 100%;
        height: auto;
        padding:2vw 1.5vw;
        gap: 5px;
    }

    header button {
        width: 100%;
        font-size: 2.5vw;
        border-radius: 10px;
    }

    .text-boxes {
        flex-direction: column;
        height: auto;
        margin-top: 3vw;
    }

    .box-1, .box-2 {
        width: 100%;
        height: 200px;
        border-radius: 20px;
    }

    .box-1 textarea{
        border-radius: 20px;
        padding: 3vw;
        
    }
    
    .box-2 textarea{
        border-radius: 20px;
        padding: 3vw;
    }

    .box-1 button, .box-2 button {
        bottom: 10px;
        right: 10px;
        height: 35px;
        width: 70px;
        font-weight: 800;
        border-radius: 10px;
    }

    #generateBtn {
        height: 60px;
        font-size: 5vw;
        margin: 3vw 0vw;
    }

    .result-box {
        height: 50vw;
    }

  
    
    .result-box button{
        bottom: 5px;
        right: 20px;
    }
} 

@media (max-width: 450px) {
    

    .container{
        height: 100vh;
        width: 100%;
        padding: 2vw;
        background-color: rgb(138, 138, 138);
    }
     

    header {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        width: 100%;
        height: auto;
        padding:2vw 1.5vw;
        gap: 5px;
    }

    header button {
        width: 100%;
        font-size: 4vw;
        border-radius: 10px;
    }

    .text-boxes{
        flex-direction: column;
        height: auto;
        margin-top: 5vw;
    }

    .box-1, .box-2 {
        width: 100%;
        height: 200px;
        margin-top: 3vw;
        padding: 2px;
    }

    .box-1 textarea{
        border-radius: 20px;
        padding: 3vw;
        
    }

    .box-2 textarea{
        border-radius: 20px;
        padding: 3vw;
    }

    .box-1 button, .box-2 button {
        bottom: 10px;
        right: 10px;
        height: 35px;
        width: 70px;
        font-weight: 800;
    }

    #generateBtn {
        height: 60px;
        font-size: 5vw;
        margin: 3vw 0vw;
    }

    .result-box {
        height: 50vw;
    }
    
    .result-box span{
        height: 25px;
        width: 40px;
        font-weight: 800;
        bottom: 5px;
        right: 20px;
    }

    .result-box textarea{
        padding: 5vw;
    }
}