:root {
    --primary-color : yellow;

}

.container { 
    padding: 0rem 1rem;
  }

.navigation {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    display:flex;
    justify-content:center;
    align-items : center;
    flex-direction : column;
}
h1 ,h2
{
    text-align: center;
    color : black;
    margin : auto;
}
body {
    background-color: var(--primary-color);
    font-family: 'Combo', cursive;
}
div{
    color: black;
}
.txt-input {
    font: 100;
}
textarea{

    width: 40%;
    height: 20vh;
    display: block;
    padding: 1rem;
    margin:auto;
    border-radius: 20px
    
    }
   #output {
       border: 1px solid black;
       width: 40%;
    height: 20vh;
    padding: 1rem;
    margin: 1rem;
    display: block;
    background-color: white;
    font-family: 'Combo', cursive;
    border-radius: 20px;
 } 
 #btn-translate{
        margin-top : 1rem;
        margin-left : auto;
        margin-right: auto;
        width : 5rem ;
 }
 P{
    text-align: center;
    color: black;
 }
 #socials {
    display: flex;
    flex-direction : center;
    justify-content : space-between;
    width: 10%;
    margin-left: auto;
    margin-right:auto;
   }