html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-image: url("back.png");
  font-family: sans-serif;
  background-color: #004A1E;
}

main {
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
}

h2 {
  color: white;
  font-weight: normal;
  font-size: 30px;
}

.radio div,
.checkbox div {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #6bffb8;
  font-size: 30px;
  padding: 10px 20px;
  margin: 10px 0;
  cursor: pointer;
}
.radio div:hover,
.checkbox div:hover {
  border-color: white;
}
.radio div.selected,
.checkbox div.selected {
  background-color: orange;
  border: 1px solid #ff610e;
  color: black;
}

.checkbox div {
  color: rgba(214, 209, 166, 0.8);
  position: relative;
  padding-left: 70px;
  line-height: 30px;
}
.checkbox div span {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 50px;
  font-size: 20px;
  line-height: 30px;
  padding: 10px 0;
  background-color: rgba(231, 205, 74, 0.7019607843);
  color: black;
  text-align: center;
}
.checkbox div.selected {
  background-color: rgba(74, 27, 9, 0.368627451);
  color: orange;
  border-color: orange;
}
.checkbox div.selected span {
  background-color: orange;
}

button {
  width: 100%;
  padding: 15px;
  font-size: 20px;
  background-color: rgba(171, 255, 149, 0.59);
  border: 2px solid #2a571f;
  color: black;
  cursor: pointer;
  border-radius: 10px;
}
button:hover {
  background-color: #ffc70e;
}
button:disabled {
  opacity: 0.2;
}

.loader {
  width: 100px;
  height: 100px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid rgba(243, 243, 243, 0.2666666667);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 100px auto;
  display: none;
}

#result {
  display: none;
}

#result.loading .loader {
  display: block;
}

#code {
  text-align: center;
  color: white;
  font-size: 24px;
  margin-top: 80px;
}

#pass h1 {
  text-align: center;
  color: white;
  margin: 40px 0;
  padding: 0;
  font-weight: normal;
}
#pass input {
  width: 100%;
  padding: 10px;
  font-size: 40px;
  border: 2px solid #2a571f;
  border-radius: 10px;
  margin-bottom: 30px;
  color: black;
}
#pass input.error {
  border-color: red;
  animation: shake 0.5s linear;
  box-shadow: 0 0 20px red;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

/*# sourceMappingURL=style.css.map */