@font-face {
  font-family: "Fervojo";
  src: url(../fonts/fervojo/fervojo/OTF_ver1.0/Fervojo-Regular.otf);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Fervojo, sans-serif;
  letter-spacing: 2.5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* background: linear-gradient(#FDB103, #C68878); */
}

.bg-blur {
  position: absolute;
  background-image: url(../imgs/happyhour.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mask-image: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 55%);
  height: 100vh;
  width: 100vw;
  top: 0;
}

.img-logo {
  position: absolute;
  background-image: url('../imgs/logo-fundo-transparente.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
  width: 87.5vw;
  max-width: 530px;
  height: 530px;
}

.ctn-main {
  position: relative;
  width: 87.5vw;
  max-width: 530px;
  height: 90vh;
  background: #231F1EEA;
  border: 2px solid #FDB103;
  border-radius: 12px;
  display: flex;
  padding: 36px;
  box-shadow: 0 0 30px #231F1E;
  overflow: hidden;
}

.aval-avaliacao, .aval-login, .aval-signin {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.aval .page-title {
  text-align: center;
  color: #FDB103;
  margin-bottom: 40px;
}

.aval .radio-group-box {
  font-size: 18px;
  font-weight: bold;
  color: #FDB103;
  margin-bottom: 30px;
}

.page-title h2 {
  font-size: 34px;
  line-height: 1.5;
}

.page-title p {
  font-size: 18px;
  font-weight: bold;
}

.aval .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  border: 1.5px solid #FDB10390;
  border-radius: 6px;
  font-size: 18px;
  color: #FFF;
  padding: 15px 18px 5px 18px;
  transition: .3s ease;
}

.input-box input:focus {
  border: 2px solid #FDB103;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #FFF;
  pointer-events: none;
  transition: .3s ease;
}

.input-box input:focus~label,
.input-box input:valid~label {
  top: 1px;
  left: 12px;
  font-size: 14.5px;
  color: #FDB103;
  padding: 3px 7px;
  border: 1px solid #FDB103;
  border-radius: 6px;
  background: #231F1E;
}

.radio-group-box input {
  accent-color: #94752E;
}

.radio-group-box label {
  font-weight: normal;
}

.btn-box {
  position: absolute;
  bottom: 0;
  right: 0;
}

.btn-box button {
  background: #231F1E;
  border: 1.5px solid #FDB103;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #FDB103;
  padding: 8px 18px;
  box-shadow: 0 0 15px -5px black;
}

.btn-box button:hover {
  box-shadow: 0 0 15px -5px #FDB103;
}

.btn-box.btn-back {
  left: 0;
}

.btn-box.btn-back button {
  background: transparent;
  box-shadow: 0 0 15px -5px #FDB103;
  border: none;
  color: #FFF;
}

.aval-avaliacao .ctn-slider {
  margin-bottom: 6.66%;
}

.aval-avaliacao h3 {
  color: #FFF;
  font-size: 22px;
  text-align: center;
  margin-bottom: 6.66%;
  text-shadow: 2px 2px 4px black;
}

.aval-avaliacao form {
  position: relative;
  margin-bottom: 13.5%;
}

.aval form.avaliacao-form fieldset {
  padding: 3.33%;
  margin-bottom: 6.66%;
  border: 2px solid #FCCEC3;
  border-radius: 6.66px;
  background: #231F1E6A;
  font-size: 17px;
}

fieldset legend {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #FCCEC3;
  border: 2px solid #FCCEC3;
  border-radius: 6.66px;
  padding: 5px;
  background: #231F1E;
  text-shadow: 2px 2px 3px black;
}

fieldset .attributes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.attributes label {
  width: 30%;
  font-weight: bold;
  color: #FCCEC3;
  text-shadow: 2px 2px 3px black;
}

.attributes input[type="range"] {
  width: 50%;
}

form.avaliacao-form input[type="submit"] {
  width: 100%;
  background: #231F1E;
  border: 1.5px solid #FDB103;
  border-radius: 6px;
  color: #FDB103;
  font-size: 26px;
  padding: 10px;
  box-shadow: 0 0 15px -5px black;
  cursor: pointer;
  margin-bottom: 20px;
}

form.avaliacao-form input[type="submit"]:hover {
  box-shadow: 0 0 15px -5px #FDB103;
}

form.avaliacao-form output {
  color: #FCCEC3;
}

@media only screen and (max-height: 840px) {
  .bg-blur {
    min-height: 635px;
  }
  .ctn-main {
    height: 95vh;
    min-height: 635px;
    width: 95vw;
    padding: 15px;
  }
}

@media only screen and (max-width: 750px) {
  .aval .input-box {
    margin-bottom: 10px;
  }

  .aval .radio-group-box {
    margin-bottom: 20px;
  }

  fieldset legend {
    font-size: 18px;
  }

  .attributes label {
    width: 35%;
  }

  .attributes input[type="range"] {
    width: 45%;
  }
}