*{margin:0; padding: 0; box-sizing: border-box;}

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
body{
    font-family: 'Satisfy', cursive;
    background-color: #FFFBEB;
}
:root{
    --box-width :400px;
    --box-height: 200px;
    --section:600px;
    --primary-color:#FBBF24;
    --radius:1.2rem;
    --secondary-color:#78350F;
    --gray: #F3F4F6;
    --dark-gray:#6B7280;
}
#box-output{
    border:1px solid black;
    width: var(--box-width);
    height: var(--box-height);
    margin: auto;
    overflow: auto;
    border-radius: var(--radius);
    background-color: white;
}
.content-center{
    width: var(--section);
    height: var(--section);
    margin: auto;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: var(--radius);
    box-shadow: 0px 0px 40px ;
}

h1 {
    text-align: center;
    margin: 1rem;
    font-size: 2rem;
}
.input{
    width: var(--box-width);
    height: var(--box-height);
    margin:auto
}
textarea{
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    padding: 1rem;
}
.text-center{
  text-align: center;
}
#btn-translate{
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin: 0.9rem;
    background-color: var(--primary-color);
    font-weight: bold;
    box-shadow: 2.5px 2.5px;
}
/* --------------------component-lib-css------------------------------------------- */