/* ============ General settings ================ */

@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@900&family=Josefin+Sans:wght@500&&display=swap'); /* Fonts: Josefin Sans, Inknut Antiqua */

* {
  margin: 0;
  padding: 0;
}

/* Variables*/

:root{
  --bg-color-red: #ae0001;
  --bg-color-yellow: #F6C715;
}

/* ============ Scrollbar =============== */

::-webkit-scrollbar {
  width: 2.8vmin; }

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #000; }
 
::-webkit-scrollbar-thumb {
  background:rgba(28, 30, 28, 0.994); }

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-color-yellow);
}

/* =========== Patterns ======================= */

hr {
  margin: 1.5px auto;
  width: 70%;
  background-color: #fff;
}

/* =========== Media query ======================= */

@media (max-width: 52rem) {  /* mobile format */

  .header, .trybewarts-login {
    display: flex;
    flex-flow: column wrap;
    text-align: center;
    padding: 3vmin;
  }

  .trybewarts-header-logo {
    margin-top: 3.5vmin;
  }
  
  #evaluation-form , .textarea {
    text-align: center;
    max-width: 80%; }  
  
   #evaluation-form {
     margin: 0.7vmax 2vmax;
  }

  #trybewarts-forms-logo , .animation-container {
    display: none; }
  }

@media (min-width: 50rem) {  /* desktop format */
  #trybewarts-forms-mobile {
    display: none;
  }
}

/* ============== Background image =============== */
html {
  background-image: url('images/bg-img.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

body {
  background-color:rgba(7, 8, 8, 0.665);
  font-family: Josefin Sans, sans-serif;
  overflow-x: hidden;
}

body:before {
  content: '';
  position: absolute;
}

/* =========== Header ===================== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: var(--bg-color-yellow);
  padding: 0 5vmin;
  margin-bottom: 2vmax;
}

/* ========== Navigation bar =============== */

/* Img - small trybe logo */
.trybewarts-header-logo {
  width: 4rem;
  height: 4rem;
}

/* Title */
#trybewarts-header-title {
  font: 1.9em Inknut Antiqua, serif;
  font-weight: 900;
  color: #fff;
  display: flex;
  justify-content: center;
}

/* Login form */
.trybewarts-login {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.button-nav-bar {
  padding: 0.4rem 0.8rem;
  font: 1.05rem Josefin Sans, sans-serif;
  font-weight: 700;
  letter-spacing: .05rem;
  border: none;
  border-radius: 0.7rem;
  background-color: var(--bg-color-red);
  color: #fff;
  cursor: pointer;
}

.button-nav-bar:active {
  transform: scale(1.1);
  transition: 0.2s;
}

/* =========== Main =================  */
main {
  display: flex;
  margin: 2vmax;
  color: #fff;
}

.checkbox , input , label {
  cursor: pointer;
}

/* Trybewarts image logo */
#trybewarts-forms-logo {
  height: 35vmax;
}

/* Trybewarts image logo - mobile format */
#trybewarts-forms-mobile {
  height: 30vmax;
}

/* =========== Evaluation form =================  */

input, select, textarea, option, button, placeholder {
  font-family: 1.1vmax Josefin Sans, sans-serif;
  border: none;
  border-radius: 1.5rem;
  padding: 1.5vmin 2vmin;
}

#forms {
  display: flex;
  justify-content: center;
  max-width: 100%;
  flex-wrap: wrap;
}

#evaluation-form {
  display: flex;
  flex-flow: column wrap;
  max-width: 100%;
  margin: 0.7vmax 2vmax 0.7vmax 3vmax;
  padding: 2.5vmax;
  font-size: 1.2rem;
  border-radius: 1.7rem;
  background-color: rgba(59, 67, 65, 0.384);
}

.container-form01 , .container-form02 , .container-form-white {
  width: 100%;
}

#textarea {
  width: 90%;
}

/* All inputs */
input {
  margin: 0.8vmin;
}

.container-form01 {
  margin: 1vmin;
}

/* Select-menu */
#house {
  width: 35%;
}

/* Radio-buttons */
.container-form-white > div {
  color: #fff;
  margin: 0.5rem;
}

.container-form-white {
  margin: 0.8vmax;
}

/* Submit button */

.sub-agreement , .sub-btn {
  display: flex;
  justify-content: center;
}

#submit-btn {
  font: 1rem Josefin Sans, sans-serif;
  font-weight: 700;
  letter-spacing: .1rem;
  text-align: center;
  padding: 0.5rem;
  width: 35%;
  background-color: var(--bg-color-red);
  color: #fff;
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
}

#submit-btn:disabled {
  font-weight: 400;
  background-color: rgba(113, 12, 12, 0.629);
  border: 1px solid var(--bg-color-red);
}

#submit-btn:enabled {
  transform: scale(1.05);
}

#submit-btn:active {
  transform: scale(1.2);
  transition: 0.2s;
}

/* footer */
.container-footer {
  font-size: 1rem;
  position: relative;
  padding: 0.57rem;
  margin: 0;
  text-align: center;
  color: #fff;
  background-color: var(--bg-color-yellow);
}

/* =============== Second page - form reply ======================= */

#form-data {
  background-image: url('images/img-03.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 1.7rem;
  margin-top: 7% !important;
  padding: 40% 7% 7% !important;
  font-size: 1.7vmax !important;
  text-align: center;
  color: #000 !important;
}

/* ====== Flying birds animation effect ================================================ */

.bird {
  background-image: url('http://www.iamramraj.com/demo/Flying_birds_CSS_animation_examples/bird-cells.svg');
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  -webkit-animation-name: fly-cycle;
  animation-name: fly-cycle;
  -webkit-animation-timing-function: steps(10);
  animation-timing-function: steps(10);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.bird--one {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.bird--two {
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-delay: -0.75s;
  animation-delay: -0.75s;
}

.bird-container {
  position: absolute;
  top: 20%;
  left: -7.5vw;
  -webkit-transform: scale(0);
  transform: scale(0);
  will-change: transform;
  -webkit-animation-name: fly-right-one;
  animation-name: fly-right-one;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.bird-container--one {
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
.bird-container--two {
  -webkit-animation-duration: 16s;
  animation-duration: 16s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes fly-cycle {

  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-cycle {

  100% {
    background-position: -900px 0;
  }
}

@-webkit-keyframes fly-right-one {

  0% {
    left: -10%;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }

  10% {
    left: 10%;
    -webkit-transform: translateY(2vh) scale(0.4);
    transform: translateY(2vh) scale(0.4);
  }

  20% {
    left: 30%;
    -webkit-transform: translateY(0) scale(0.5);
    transform: translateY(0) scale(0.5);
  }

  30% {
    left: 50%;
    -webkit-transform: translateY(4vh) scale(0.6);
    transform: translateY(4vh) scale(0.6);
  }

  40% {
    left: 70%;
    -webkit-transform: translateY(2vh) scale(0.6);
    transform: translateY(2vh) scale(0.6);
  }

  50% {
    left: 90%;
    -webkit-transform: translateY(0) scale(0.6);
    transform: translateY(0) scale(0.6);
  }

  60% {
    left: 110%;
    -webkit-transform: translateY(0) scale(0.6);
    transform: translateY(0) scale(0.6);
  }

  100% {
    left: 110%;
    opacity: 1;
    -webkit-transform: translateY(0) scale(0.6);
    transform: translateY(0) scale(0.6);
  }
}

@keyframes fly-right-one {

  0% {
    left: -10%;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }

  10% {
    left: 10%;
    -webkit-transform: translateY(2vh) scale(0.4);
    transform: translateY(2vh) scale(0.4);
  }

  20% {
    left: 30%;
    -webkit-transform: translateY(0) scale(0.5);
    transform: translateY(0) scale(0.5);
  }

  30% {
    left: 50%;
    -webkit-transform: translateY(4vh) scale(0.6);
    transform: translateY(4vh) scale(0.6);
  }

  40% {
    left: 70%;
    -webkit-transform: translateY(2vh) scale(0.6);
    transform: translateY(2vh) scale(0.6);
  }

  50% {
    left: 90%;
    -webkit-transform: translateY(0) scale(0.6);
    transform: translateY(0) scale(0.6);
  }

  60% {
    left: 110%;
    -webkit-transform: translateY(0) scale(0.6);
    transform: translateY(0) scale(0.6);
  }

  100% {
    left: 110%;
    opacity: 1;
    -webkit-transform: translateY(0) scale(0.6);
    transform: translateY(0) scale(0.6);
  }
}

@-webkit-keyframes fly-right-two {

  0% {
    left: -10%;
    opacity: 1;
    -webkit-transform: translateY(-2vh) scale(0.5);
    transform: translateY(-2vh) scale(0.5);
  }

  10% {
    left: 10%;
    -webkit-transform: translateY(0vh) scale(0.4);
    transform: translateY(0vh) scale(0.4);
  }

  20% {
    left: 30%;
    -webkit-transform: translateY(-4vh) scale(0.6);
    transform: translateY(-4vh) scale(0.6);
  }

  30% {
    left: 50%;
    -webkit-transform: translateY(1vh) scale(0.45);
    transform: translateY(1vh) scale(0.45);
  }

  40% {
    left: 70%;
    -webkit-transform: translateY(-2.5vh) scale(0.5);
    transform: translateY(-2.5vh) scale(0.5);
  }

  50% {
    left: 90%;
    -webkit-transform: translateY(0) scale(0.45);
    transform: translateY(0) scale(0.45);
  }

  51% {
    left: 110%;
    -webkit-transform: translateY(0) scale(0.45);
    transform: translateY(0) scale(0.45);
  }

  100% {
    left: 110%;
    -webkit-transform: translateY(0) scale(0.45);
    transform: translateY(0) scale(0.45);
  }
}

@keyframes fly-right-two {

  0% {
    left: -10%;
    opacity: 1;
    -webkit-transform: translateY(-2vh) scale(0.5);
    transform: translateY(-2vh) scale(0.5);
  }

  10% {
    left: 10%;
    -webkit-transform: translateY(0) scale(0.4);
    transform: translateY(0) scale(0.4);
  }

  20% {
    left: 30%;
    -webkit-transform: translateY(-4vh) scale(0.6);
    transform: translateY(-4vh) scale(0.6);
  }

  30% {
    left: 50%;
    -webkit-transform: translateY(1vh) scale(0.45);
    transform: translateY(1vh) scale(0.45);
  }

  40% {
    left: 70%;
    -webkit-transform: translateY(-2.5vh) scale(0.5);
    transform: translateY(-2.5vh) scale(0.5);
  }

  50% {
    left: 90%;
    -webkit-transform: translateY(0) scale(0.45);
    transform: translateY(0) scale(0.45);
  }

  51% {
    left: 110%;
    -webkit-transform: translateY(0) scale(0.45);
    transform: translateY(0) scale(0.45);
  }

  100% {
    left: 110%;
    -webkit-transform: translateY(0) scale(0.45);
    transform: translateY(0) scale(0.45);
  }
}