@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Molengo&display=swap");

:root {
  --light: #efeff1;
  --footer: #e7e7ea;
  --dark: #080707;
  --less-dark: #251e1e;
  --warmer: #471212;
  --glow: #310303;
  --red: #ea0043;
  /* --fire: #ffc8c8;
  --gold: #f2efed; */
  --fire: rgba(250, 30, 30, 0.2);
  --gold: rgba(238, 101, 0, 0.2);
  --green: #39b54a;
  --blue: #6daae3;
  font-size: 20px;
}
@media screen and (max-width: 600px) {
  :root {
    font-size: 16px;
  }
}
html {
  height: 100%;
}
body {
  background-color: var(--light);
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  height: 100%;
  margin: 0;
}
main {
  color: var(--dark);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow: clip;
  min-height: calc(100% - 4rem);
  margin:0 1em;
}
main.help {
  font-size: 16px;
  text-align: left;
  max-width: 700px;
  margin: 2em auto;
}
h1 {
  font-size: 1.1rem;
  font-weight: 550;
}
h2 {
  font-size: 1rem;
  font-weight: 600;
}
.help strong {
  font-weight: 600;
}
h1.seo {
  display: none;
}
.large {
  font-size: large;
}
section {
  width: 100%;
}

.g {
  line-height: 3em;
  font-weight: 450;
  letter-spacing: 1px;
}
.b {
  line-height: 2em;
  font-weight: 400;
}
.r {
  line-height: 1.5em;
  /* color: var(--less-dark); */
}
.thinner {
  font-weight: 350;
  letter-spacing: 1px;
}
.pause {
  margin-bottom: 2em;
}
.long-pause {
  margin-bottom: 5em;
}
section.portal-link {
  border-top-width: 0px;
}
section.portal-link a {
  margin: 3em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
section.portal-link img {
  width: 40px;
  height: auto;
  margin: 2em 0;
}
.portal-link a {
  /* color: var(--warmer); */
  color: var(--dark);
  text-decoration: none;
  margin: 1em 0;
  letter-spacing: 1px;
  font-size: 1.1rem;
  animation: glowing 5s infinite;
}
.portal-link a:hover {
  color: var(--glow);
  text-shadow:
    1px -1px 1px var(--fire),
    0px 0px 1px var(--gold);
  animation: none;
}
footer a {
  text-decoration: none;
  color: var(--dark);
}
footer a:hover {
  text-decoration: underline;
}
h2.details-heading {
  font-weight: 450;
  margin-top:3em;
  margin-bottom: 3em;
  details-heading
}
.details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  font-size: 0.9rem;
  margin-bottom: 5rem;
  font-size: 16px;
}
.details h2.label {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1.2rem;
  margin: 0;
  font-weight: 450;
  background-color: var(--light);
  top: -1.6rem;
  left: 0.2em;
  padding: 0.2em;
  border-radius: 50%;
  width: 2em;
  height: 2em;
}
.details h3 {
  font-size: 1rem;
  font-weight: 550;
}
.details-r,
.details-g,
.details-b {
  position: relative;
  padding: 0.2em 1em;
  text-align: left;
}
.details-r {
  border: 1px solid var(--red);
}
.details-g {
  border: 1px solid var(--green);
}
.details-b {
  border: 1px solid var(--blue);
}
.details strong {
  font-weight: 550;
}
.help section {
  border-top: 1px solid var(--dark);
}
.portal {
  display: block;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}
footer {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background-color: var(--footer);
  height: 4rem;
  align-items: center;
}
footer .inner {
  width: 100%;
  max-width: 700px;
  display: flex;
  justify-content: space-between;
  margin:0 1em;
}
footer a {
  font-size: 0.8rem;
}
@keyframes glowing {
  0% {
    color: var(--dark);
    text-shadow:
      1px -1px 1px var(--fire),
      0px 0px 2px var(--gold);
  }
  70% {
    color: var(--dark);
    text-shadow:
      1px -1px 4px var(--fire),
      0px 0px 14px var(--gold);
  }
  100% {
    color: var(--dark);
    text-shadow:
      1px -1px 1px var(--fire),
      0px 0px 2px var(--gold);
  }
}
.animated-gradient {
  position: relative;
  z-index: 1;
}
:root {
  --grad-duration: 10s;
  --grad-duration2: 7s;

  --red-start-x: -150%;
  --red-mid-x: -160%;
  --red-end-x: -155%;

  --red-start-y: 10%;
  --red-mid-y: 30%;
  --red-end-y: 20%;

  --blue-start-x: -130%;
  --blue-mid-x: -140%;
  --blue-end-x: -150%;

  --blue-start-y: 80%;
  --blue-mid-y: 60%;
  --blue-end-y: 70%;

  --green-start-x: 50%;
  --green-mid-x: 70%;
  --green-end-x: 60%;

  --green-start-y: 30%;
  --green-mid-y: 60%;
  --green-end-y: 80%;
}

.animated-gradient {
  position: relative;
  z-index: 1;
}

.animated-gradient:before,
.animated-gradient:after,
.animated-gradient > *:after {
  content: "";
  position: absolute;
  aspect-ratio: 1 / 1;
  max-height: 99%;
  width: 33%;
  max-width: 33%;
  padding: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.animated-gradient:before {
  background: radial-gradient(
    circle at 50% 50%,
    rgb(250, 223, 223) 0%,
    rgba(239, 239, 241, 0) 45%
  );
  -webkit-animation: red-ani var(--grad-duration) linear 0s infinite normal
    forwards;
  -moz-animation: red-ani var(--grad-duration) linear 0s infinite normal
    forwards;
  animation: red-ani var(--grad-duration) linear 0s infinite normal forwards;
}

.animated-gradient:after {
  background: radial-gradient(
    circle at 50% 50%,
    rgb(207, 252, 252) 0%,
    rgba(239, 239, 241, 0) 45%
  );
  -webkit-animation: blue-ani var(--grad-duration2) linear 0s infinite normal
    forwards;
  -moz-animation: blue-ani var(--grad-duration2) linear 0s infinite normal
    forwards;
  animation: blue-ani var(--grad-duration2) linear 0s infinite normal forwards;
}

.animated-gradient > *:after {
  background: radial-gradient(
    circle at 50% 50%,
    rgb(221, 240, 226) 0%,
    rgba(239, 239, 241, 0) 45%
  );
  -webkit-animation: green-ani var(--grad-duration) linear 0s infinite normal
    forwards;
  -moz-animation: green-ani var(--grad-duration) linear 0s infinite normal
    forwards;
  animation: green-ani var(--grad-duration) linear 0s infinite normal forwards;
}

@keyframes red-ani {
  0% {
    transform: translate(var(--red-start-x), var(--red-start-y));
    opacity: 0;
  }

  50% {
    transform: translate(var(--red-mid-x), var(--red-mid-y));
    opacity: 1;
  }

  100% {
    transform: translate(var(--red-end-x), var(--red-end-y));
    opacity: 0;
  }
}

@keyframes blue-ani {
  0% {
    transform: translate(var(--blue-start-x), var(--blue-start-y));
    opacity: 0;
  }

  50% {
    transform: translate(var(--blue-mid-x), var(--blue-mid-y));
    opacity: 1;
  }

  100% {
    transform: translate(var(--blue-end-x), var(--blue-end-y));
    opacity: 0;
  }
}

@keyframes green-ani {
  0% {
    transform: translate(var(--green-start-x), var(--green-start-y));
    opacity: 0;
  }

  50% {
    transform: translate(var(--green-mid-x), var(--green-mid-y));
    opacity: 1;
  }

  100% {
    transform: translate(var(--green-end-x), var(--green-end-y));
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --red-start-y: var(--spacing-4xl);
    --red-end-y: calc(-1 * var(--spacing-4xl));
    --blue-start-y: calc(-1 * var(--spacing-4xl));
    --blue-end-y: var(--spacing-4xl);
  }

  .animated-gradient:before,
  .animated-gradient:after,
  .animated-gradient > *:after {
    top: calc(100% - 50vw);
  }
  section.details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}