/* --- Reset --- */
* {
   box-sizing: border-box;
   padding: 0px;
   margin: 0px;
}

html,
body {
   height: 100%;
   width: 100%;
}

body {
   font-family: "Inter", sans-serif;
   font-weight: 300;
   background-color: #ebebee;
   color: black;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
   color: #999;
   font-family: "Inter", sans-serif;
   font-weight: 300;
}

p {
   font-size: 18px;
}

a,
input,
textarea,
select,
button {
   transition: background-color 0.8s ease;
   -webkit-appearance: none;
   appearance: none;
   font-family: "Inter", sans-serif;
}

.inner {
   max-width: 1400px;
   width: 100%;
   display: block;
   margin: 0 auto;
}

/* --- Main styles --- */

section {
   padding: 100px 0;
}

section .inner {
   display: flex;
   gap: 150px;
   align-items: center;
}

.form {
   flex: 1.5;
}

.form form {
   display: flex;
   flex-direction: column;
   gap: 10px;

   background-color: white;
   padding: 50px;
   border-radius: 10px;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
}

.form form .about {
   margin-bottom: 20px;
}

.form form .about h1 {
   margin-bottom: 5px;
}

.form form .about ul {
   margin-top: 5px;
   margin-bottom: 20px;
   margin-left: 40px;
}

.form form .about p {
   font-size: 15px;
}

.form form .about p + p {
   margin-top: 10px;
}

.form form input {
   border: solid 1px #999;
   padding: 20px;
   font-size: 18px;
   border-radius: 3px;
}

.form form button {
   padding: 15px 30px;
   background-color: #F54857;
   border: none;
   font-size: 18px;
   border-radius: 10px;
   margin-top: 20px;
   font-weight: bold;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   color: white;
}

.form form button:hover {
   background-color: #6d2128;
}

.form .legal {
   font-size: 12px;
   padding: 0 50px;
   margin-top: 30px;
}

.info {
   flex: 0.5;
   flex-basis: 200px;
}

.info iframe {
   aspect-ratio: 9 / 16;
   width: 100%;
   min-width: 300px;
   border-radius: 5px;
}

/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
   .info {
      padding-right: 30px;
   }

   .form {
      padding-left: 30px;
   }

   section .inner {
      gap: 30px;
   }
}

/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {
   body {
      background-color: white;
   }
   section {
      padding: 0;
   }
   section .inner {
      gap: 0;
      flex-direction: column;
   }

   .form form {
      border-radius: 0;
   }

   .info {
      order: 1;
      width: auto;
      height: 80%;
      background-color: white;
      padding-top: 15px;
      padding-right: 0;
   }

   .info iframe {
      border-radius: 0;
   }

   .form {
      order: 2;
   }

   .form .legal {
      margin: 30px 0;
   }

   .form {
      padding-left: 0;
   }


}