@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

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

body{
     background-color: hsl(0, 0%, 97%);
     color: hsl(229, 6%, 66%);
     text-align: center;
     font-size: 16px;
     font-family: 'Poppins', sans-serif;

}

.container{
     max-width: 700px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     padding: 40px;
     margin: 0px auto;
}

h1{
     font-size: 40px;
     background-color: hsl(180, 62%, 75%);
     padding: 25px;
     color: hsl(234, 12%, 34%);
}

p{
     color: hsl(234, 12%, 34%);
     opacity: 0.7;
     font-size: 17px;
}

textarea{
     width: 550px;
     height: 200px;
     font-size: 18px;
     font-weight: 300;
     font-family: 'Poppins', sans-serif;
     padding: 20px;
     border-radius: 5px;
     border: 1px solid #fff;
     margin: 35px;
     outline: none;
     background-color: #fff;
     resize: none;
     box-shadow: 0 10px 20px rgba(0, 0, 5, 0.08), 0 5px 6px rgba(0, 0, 0, 0.2)
}

#textOutput{
     color: hsl(234, 18%, 41%);
     font-weight: 400;
}

textarea:focus{
     border: 3px solid hsl(180, 62%, 75%);
}

button{
     padding: 15px;
     width: 250px;
     margin: 20px 35px 0;
     background-color: hsl(180, 62%, 55%);
     border: none;
     color: hsl(0, 0%, 100%);
     font-size: 22px;
     font-weight: 400;
     border-radius: 5px;
}

button:active{
     transform: translateY(2%);
     background-color: hsl(180, 45%,40%);
}

footer{
     color: hsl(234, 18%, 41%);
     font-weight: 400;
     font-size: 18px;
     padding: 50px;
     text-align: center;
     display: block;
     margin: 0 auto;
     background-color: hsl(180, 62%, 75%);
}

footer p{
     padding: 0 20%;
     margin: 30px auto;
}

footer h2{
     font-weight: 400;
}

footer a{
     color: hsl(0, 78%, 62%);
     text-decoration: none;
}

footer a:hover{
     color: hsl(0, 0%, 100%);
}
.credit{
     margin-top: 50px;
}