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

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

body {
    font-family: "Poppins", sans-serif;
    background-color: #9AD2C9;
}

section {
    height: 100vh;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.container {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 20px #66b2b2;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.backbutton {   
 float: right; 
 position: top;
 top: 0;
 right: 0;
}

.form-group {
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
    color: #10494A;
}

.form-group input, .form-group textarea {
 width: 100%;   
 padding: 5px;
 font-size: 18px;   
 border: 1px solid #10494A;
 margin-top: 5px;
}

textarea {
     resize: vertical;
}


button[type="submit"] {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px;    
    font-size: 24px;
    border-radius: 8px;
    font-family: sans-serif;
    color: #10494A;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    transition: .3s ease background-color;
}

button[type="submit"]:hover {
 background-color: #b2d8d8;   
}

#status {
 width: 90%;   
 max-width: 500px;
 text-align: center;
 padding: 10px;
 margin: 0 auto;
 border-radius: 8px;
}

#status.success {
    background-color: #006666;
    animation: status 4s ease forwards;
}

#status.error {
 background-color: rgb(250, 129, 92); 
 color: #006666;
 animation: status 4s ease forwards;
}

@keyframes status { 
      0% {
    opacity: 1;
    pointer-events: all;
    }
 
      90% {
    opacity: 1;
    pointer-events: all;
    }
    
     100% {
    opacity: 0;
    pointer-events: none;
    }
    
}