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

:root {
    --primary: #F2C94C;
}

body {
    /* max-width: 600px; */
    font-family: 'Sansita Swashed', cursive;
    font-size: large;
    margin: auto;
    text-align: center;

}

textarea {
   width:80%;
    display: block;
    height: 10vh;
    padding: 1rem;
    margin: 1rem;
       border-radius: 1rem;

}

#output {
    
    display: block;
    margin: 1rem;
    padding: 1rem 1rem;
    border-radius: 1rem;
    height: 10vh;
    border: 1px solid black;
}




.header {
    text-align: center;
    background-color: var(--primary);
    max-width:none;
    
    border-bottom-right-radius: 2rem;
    padding: 2rem 1rem;

}
img{
    display: block;
    margin: auto;
    width: 350px;
    height: auto;
    padding: 1rem;
}
.main-style{
    display: block;
    max-width: 500px; 
    margin: auto;
}

#btn-translate {
    text-align: center;
    background-color: var(--primary);
     margin: auto;
   border-radius: 0.5rem;
    font-size: larger;

}

.output {
    font-size: larger;
    text-align: center;
}


.footer {
    background-color: #ffb22d;
    text-align: center;
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    border-top-left-radius: 2rem;
    color: whitesmoke;
    border-style: outset;
    
}
.link{
    text-decoration: none;

}