@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Courgette&family=Kalam:wght@300;700&family=Maven+Pro:wght@400;700&family=Nanum+Myeongjo:wght@400;800&family=Noto+Sans+HK:wght@100&family=Spartan:wght@100;300;500&display=swap');

:root{
    --primary-color:#36746a;
    --dark:#1a322e;
    --light:#ddfffa;
    --bright:#bbfff4;
}
body{
   padding:0;
   margin:0;
   background-color: var(--dark);
/*   font-family: 'Amatic SC', cursive; 
   font-family: 'Courgette', cursive;*/
   font-family: 'Kalam', cursive;
    /*font-family: 'Maven Pro', sans-serif;
    font-family: 'Nanum Myeongjo', serif;
    font-family: 'Noto Sans HK', sans-serif;
    font-family: 'Spartan', sans-serif;  */
}

header{
    color:var(--light);
    text-align: center;
    font-size: larger;
    font-family: 'Amatic SC', cursive;
}
#middle{
    background-image: url(images/bg.jfif);
}
footer{
    background-color: var(--primary-color);
    color:var(--light);
    margin:0; 
    position:fixed; 
    bottom:0; 
    left:0; 
    right:0;
    text-align: center;
}

textarea{
    width:50%;
    height:20vh;
    opacity: 0.5;
    font-family: 'Spartan', sans-serif; 
    padding:1rem;
    margin:2px;
    border:none;
    border-radius: 0.1rem;
}

button{
    font-family: 'Kalam', cursive;
    font-weight:700;
    background-color: var(--dark);
    color:var(--light);
    border:none;
    border-radius: 0.1rem;;
}
.container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    padding:1rem;
}

.container > div{
    margin:1rem;
    padding:1rem;

}