/* --- 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;
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  background-image: radial-gradient(18% 28% at 24% 50%, #865D44FF 7%, #073AFF00 100%), radial-gradient(18% 28% at 18% 71%, #D8171759 6%, #073AFF00 100%), radial-gradient(70% 53% at 36% 76%, #4D4334FF 0%, #073AFF00 100%), radial-gradient(42% 53% at 15% 94%, #F64949FF 7%, #073AFF00 100%), radial-gradient(42% 53% at 34% 72%, #991616FF 7%, #073AFF00 100%), radial-gradient(18% 28% at 35% 87%, #ED1818FF 7%, #073AFF00 100%), radial-gradient(31% 43% at 7% 98%, #EB4040FF 24%, #073AFF00 100%), radial-gradient(21% 37% at 72% 23%, #A0E2089C 24%, #073AFF00 100%), radial-gradient(35% 56% at 91% 74%, #510BDDF5 9%, #073AFF00 100%), radial-gradient(74% 86% at 67% 38%, #068E42F5 24%, #073AFF00 100%), linear-gradient(125deg, #0665A9FF 1%, #2D0786FF 100%);
}

body {
  background-size: 400% 400%;
  background-position: 0px 0px;
  animation: animateBackground 15s infinite linear alternate;
  background-image:
    radial-gradient(25% 35% at 30% 50%, #332940 10%, transparent 100%),
    radial-gradient(20% 30% at 20% 75%, #5A1F66 10%, transparent 100%),
    radial-gradient(60% 50% at 40% 80%, #2D155A 0%, transparent 100%),
    radial-gradient(50% 50% at 10% 95%, #7D1536 10%, transparent 100%),
    radial-gradient(40% 50% at 35% 70%, #521646 10%, transparent 100%),
    radial-gradient(20% 30% at 35% 90%, #A51429 10%, transparent 100%),
    radial-gradient(30% 40% at 10% 100%, #C71F33 30%, transparent 100%),
    radial-gradient(25% 40% at 70% 20%, #1E6323 20%, transparent 100%),
    radial-gradient(40% 60% at 90% 70%, #3519A9 10%, transparent 100%),
    radial-gradient(70% 80% at 65% 35%, #0B6A40 20%, transparent 100%),
    linear-gradient(135deg, #092E6E 0%, #2D0786 100%);
}

@keyframes animateBackground {
  0% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
  }

  50% {
    background-position: 100% 100%;
    filter: hue-rotate(50deg);
  }

  100% {
    background-position: 0% 0%;
    filter: hue-rotate(-50deg);
  }
}

::-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 --- */

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.9px);
  -webkit-backdrop-filter: blur(10.9px);
  display: inline-block;
  padding: 50px;
  text-align: center;
  color: white;
}

.main h1 {
  margin-bottom: 5px;
}

.main img {
  margin-top: 50px;
  width: 100px;
}


/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
  .inner {
    width: 85%;
  }
}

/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {
  .inner {
    width: 100%;
    padding: 20px;
  }
}