@font-face {
	font-family: Century Gothic;
	src: url(fonts/GOTHIC.TTF);
}

*{
  font-family:  Century Gothic;
}
  
  section .container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .form-group {
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
  }
  .form-group input, .form-group textarea {
    width: 100%;
    padding: 7px;
    font-size: 18px;
    border-radius: 36px;
    border: 1px solid #542e71;
    margin-top: 5px;
  }
  
  textarea {
    resize: vertical;
  }
  
  button[type="submit"] {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px;
    font-size: 24px;
    border-radius: 8px;
    color: #542e71;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
    border-radius: 36px;
  }

  button[type="submit"]:hover {
    background-color: #542e71;
    color: white;
  }
  #status {
    width: 90%;
    max-width: 500px;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    border-radius: 8px;
    border-radius: 36px;
  }

  #status.success {
    background-color: rgb(211, 250, 153);
    animation: status 4s ease forwards;
  }
  #status.error {
    background-color: #fb3640;
    color: white;
    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;
    }
  }