@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Rampart+One&display=swap');
:root {
    --primary: #191654;
    --white:#ffffff;
    --black: #333333;
}

body{
    font-family: 'Dancing Script', cursive;
   
    color: var(--black);
    background-image: linear-gradient(yellow,red);
    margin: 0 auto;
    max-width: 85%;
    width: 100%;
    
}

/**Nav bar**/
.navigation{
    padding:.1rem;
}

.nav-heading{
    text-align: center;
    font-size: 50px;
}

/** container **/
.container {
    padding: 2rem 2rem;
    
}

.container-center {
    max-width: 600px;
    margin: auto;
}

.md-margin{
    margin-top: 1rem;
}
/**button**/
.btn-translate{
    background-color: var(--white);
    display: block;
    margin-left:auto;
    margin-right:auto;
    box-shadow: .1rem .2rem var(--black);
    border-radius: 1rem;
    padding: .8rem;
    min-width: 20vw;
    width: 30%;
    font-family: 'Dancing Script', cursive;
    font-size: larger;
   
}

/**textarea**/
.translation{
    text-align: center;
    font-size: xx-large;
}
.textarea{
    font-family: 'Dancing Script', cursive;
    width: 700px;
    max-width: 60vw;
    min-height: 20vh;
    border-radius: 1rem;
    box-shadow: .1rem .2rem var(--black);
    padding: 1rem;
    font-size: larger;
    display: block;
    margin: 0 auto;
}

.translate-output{
    font-family: 'Dancing Script', cursive;
    font-size: larger;
    width: 700px;
    max-width: 60vw;
    min-height: 20vh;
    border-radius: 1rem;
    box-shadow: .2rem .2rem .2rem .2rem var(--black);
    padding: 1rem;
    margin: 1rem 0rem;
    background-color: white;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/** footer **/
.footer{
    margin: 0;
    padding: 1rem;
    text-align: center;
}

.footer-heading{
    font-size: 50px;
}

footer p{
    font-family: 'Dancing Script', cursive;
    font-size: larger;
    font-weight: 600;
}