@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

:root {
    --primary-color: #F2C94C;
    

}

body {

    font-family: 'Kalam',
        cursive;

    margin: 0.5rem 0.1rem;
    color: black;
}





/** textarea **/
textarea {

    border: 1px solid black;
    height: 20vh;
    width: 40vh;
    padding: 1rem 2rem;
    margin: 2rem auto;
    
}

/** button  **/
.button{

    padding: 1rem 2rem;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: larger;
    margin: auto;
    border-radius: 0.3rem;
}



/** output box **/
#output {
    border: 1px solid black;
    height: 20vh;
    width: 40vh;
    padding: 1rem 2rem;
    
     
}

.navigation{
    
    background-color: var(--primary-color);
    
    padding: 1rem;

}

.container-center{

     margin: 1rem auto;
     max-width: 150px;

}

.container{
    margin: 1rem auto;
    max-width: 400px;
    padding: 0.2rem;
}

.good{
     
    font-weight: bold;
    padding: 2rem;

}

.footer{

     background-color: var(--primary-color);
     text-align: center;
     padding: 1rem 2rem;

}

.footer .new{

    font-weight: bold;
    font-size: larger;
    
}

.footer .parag{

    border: 1rem;
    margin: 1rem auto;
}