@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Kiwi+Maru:wght@300&family=Montserrat+Alternates:wght@500&display=swap');

* {
    padding: 0;
    margin:  0;
    box-sizing: border-box;
  }
  body {
    font-family: "Josefin Sans";
  }
  section {
    height: 110vh;
    width: 100%;
    background-color: aliceblue;
    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 #00000010;
    background-color: white;
    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: 5px;
    font-size: 18px;
    border: 1px solid rgba(128, 128, 128, 0.199);
    margin-top: 5px;
  }
  
  textarea {
    resize: vertical;
  }

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

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


@keyframes extend {
  0% {
      width: 300px;
      height: 100px;
      border-radius: 50px;
      } 10% {
      width: 305px;
      height: 105px;
      background: #fff;
      margin-left: - 10px;
      margin-top: - 10px;
      } 20% {
      width: 300px;
      height: 100px;
      background: #6fb07f;
      margin-left: 0px;
      margin-top: 0px;
      } 100% {
      width: 100px;
      height: 100px;
      border-radius: 50px;

      margin-left: 95px;
      background: #6fb07f;
      }
  }

@-webkit-keyframes disappear {
  0% {
      opacity: 1;
      } 20% {
      color: #fff;
      } 100% {
      opacity: 0;
      }
  }
@keyframes disappear {
  0% {
      opacity: 1;
      } 20% {
      color: #fff;
      } 100% {
      opacity: 0;
      }
  }
@-webkit-keyframes appear {
  0% {
      opacity: 0;
      } 70% {
      opacity: 0;
      } 100% {
      opacity: 1;
      }
  }
@keyframes appear {
  0% {
      opacity: 0;
      } 70% {
      opacity: 0;
      } 100% {
      opacity: 1;
      }
  }
html {
  background: #fff
  }

input, button, submit {
  border: none
  }

.cont {
  position: absolute;
  width: 305px;
  height: 5px;
  left: 50%;
  top: 102%;
  margin: -50px 0 0 -150px;

  }

button {
  border-width: 1px;
  width: 300px;
  height: 100px;
  /*border-radius*/
  border-radius: 50px;
  background: #fff;
  position: absolute;
  border: 5px solid #6fb07f;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s ease background-color;
  }
button:hover{
      background-color: #6fb07f;
    }

button > span {
  font-size: 30px;
  color: #0e8a2c
  }

img12 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0
  }

button:focus {
  -webkit-animation: extend 1s ease-in-out;
  -ms-animation: extend 1s ease-in-out;
  animation: extend 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
  }

button:focus > span {
  -webkit-animation: disappear 1s ease-in-out;
  -ms-animation: disappear 1s ease-in-out;
  animation: disappear 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
  }

button:focus > img {
  -webkit-animation: appear 1s ease-in-out;
  -ms-animation: appear 1s ease-in-out;
  animation: appear 1s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
  }

 
  .form {
    padding: 10px 50px 20px;
    font-size: 60px;
    font:  "Josefin Sans";
}

.checkbox-container {
  padding: 10px;
  font-size:  25px;
  display: flex;
  align-items: center;
}

.answer {
  padding: 10px;
  font-size: 20px;
  font-family: Josefin Sans;
}
.checkbox-container label {
  cursor: pointer;
  display: flex;
}

.checkbox-container input[type='checkbox'] {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.checkbox-container label::before {
  content: '';
  width: 1em;
  height: 1em;
  border-radius: .15em;
  margin-right: .5em;
  border: .05em solid black;
}

.checkbox-container label:hover::before,
.checkbox-container input[type='checkbox']:hover + label::before {
  background-color: #35E07D;
}

.checkbox-container input[type='checkbox']:focus + label::before {
  box-shadow: 0 0 20px black;
}

.checkbox-container input[type='checkbox']:disabled + label,
.checkbox-container input[type='checkbox']:disabled {
  color: #aaa;
  cursor: default;
}

.checkbox-container input[type='checkbox']:checked + label::before {
  content: '\002714';
  background-color: #27AE60;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.checkbox-container input[type='checkbox']:disabled + label::before {
  background-color: #ccc;
  border-color: #999;}