* {
  box-sizing: border-box;
  font-family: inherit;
}

@media (max-width: 600px) {
  :root {
    --product-box-h5-marg-top: 10px;
    --product-box-a-pad: 3px;
    --product-box-a-width: 80%;
    --discord-icon-size: 20vw;
  }
}
@media (min-width: 601px) {
  :root {
    --product-box-h5-marg-top: 20px;
    --product-box-a-pad: 12px;
    --product-box-a-width: 60%;
    --discord-icon-size: 30vh;
  }
}
@media (min-width: 601px) {
  html {
    font-size: calc(0.5vw + 9px);
  }
}
@media (max-width: 600px) {
  html {
    font-size: calc(1.4vw + 3px);
  }
}

body {
  width: 100vw;
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  overflow-y: hidden;
}

#wrap {
  background: linear-gradient(
    #00100a 80vh,
    #004c30 132.5vh,
    #775967 200vh,
    #775967 255vh,
    #804c74 255vh,
    #804c74 420vh,
    #b37f9c 425vh,
    #b37f9c 525vh
  );
  /* background-image: url("/images/beta.jpg"); */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.join-button-wrapper {
  display: flex;
}

/* CSS */
.join-beta {
  align-items: center;
  background-image: linear-gradient(144deg, #af40ff,  #5b42f3 50%, #00ddeb);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  margin: 5px;
}

.join-beta:active,
.join-beta:hover {
  outline: 0;
}

.join-beta span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}

.join-beta:hover span {
  background: none;
}

@media (min-width: 768px) {
  .join-beta {
    font-size: 24px;
    min-width: 196px;
  }
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
header h1 {
  margin: 0;
  color: #ffffff;
  font-size: 6em;
}
header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 4em;
}
header h3 {
  margin: 0;
  color: #f6edff;
  font-size: 2em;
  font-weight: 600;
  white-space: nowrap;
}
header h3 span {
  width: fit-content;
  display: inline-block;
}
header form {
  width: 30em;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  margin-top: 15em;
  font-size: 1.2em;
}
header form input {
  height: 3em;
  border: none;
  border-radius: 0.5em;
  font-weight: 500;
  font-size: 1em;
  box-shadow: -3px 3px 3px 1px #402c4c;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, z-index 0.3s;
}
header form #wl-email {
  width: 60%;
  padding: var(--padd-size);
  padding-left: 1em;
  background-color: #ffcfcf;
}
header form #wl-submit {
  width: 30%;
  background-color: #805c9c;
  color: white;
  text-align: center;
}
header form input::placeholder {
  color: #805c9c;
}
header form input:hover,
header form #wl-email:focus {
  box-shadow: -2px 2px 2px 1px #b37f9c;
}
header form #wl-submit:hover {
  cursor: pointer;
}

main {
  width: 100vw;
}

#sponsors {
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 35vh;
  margin: 20vh 0 0 0;
  border: 5px solid #ffcfcf;
  background-color: #ffcfcf;
  box-shadow: 0 2px 10px #1c133b;
  font-size: 2em;
}
#sponsors aside {
  --aside-height: 1.8em;
  position: absolute;
  display: inline-flex;
  height: var(--aside-height);
  left: -5px;
  top: calc(-1 * var(--aside-height));
  color: #634459;
  vertical-align: middle;
}
#sponsors aside h5 {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1em;
  margin: 0 0 2vh 0;
  background-color: #ffcfcf;
  font-weight: 700;
  vertical-align: middle;
}
#sponsors aside::after {
  content: "";
  display: inline-block;
  border-right: var(--aside-height) solid transparent;
  border-bottom: var(--aside-height) solid #ffcfcf;
}
#sponsors figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 20%;
  height: 30vh;
  max-height: calc(20vh + 5vw);
  margin: 0;
  padding: 0 2%;
  background-color: #ffdada;
  box-shadow: -2px 2px 3px 2px #daa;
  border-radius: 0.3em;
}
#sponsors figure img {
  margin: auto;
  padding-top: 10px;
  width: auto;
  height: calc(10vh + 5vw);
  object-fit: contain;
}
#sponsors figure img.MIT {
  width: 100%;
  height: auto;
}
#sponsors figure figcaption {
  margin-bottom: 10px;
  color: #1c133b;
  font-size: 0.9em;
  font-family: "Young Serif", serif;
  justify-self: flex-end;
}

article#quote-text {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: radial-gradient(#fdd6 15%, transparent 60%),
    linear-gradient(
      transparent,
      -10%,
      #775967 0%,
      transparent 20%,
      transparent 80%,
      #804c74 100%
    ),
    radial-gradient(#fdd 15%, #775967);
}
article#quote-text p {
  width: fit-content;
  height: fit-content;
  margin: auto;
  color: #402c4c;
  font-size: 2.3em;
  line-height: 2em;
  font-weight: 500;
  text-align: center;
}
article#quote-text p .small-text {
  font-weight: 400;
  font-size: 0.7em;
}
article#quote-text p .big-text {
  font-weight: 600;
  font-size: 1.4em;
}

article#introducing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  margin: 0;
  text-align: center;
}
article#introducing h5 {
  margin: 0;
  color: white;
  font-size: 2.5em;
}
article#introducing h2 {
  margin: 0;
  color: #ffd3e6;
  font-size: 6.5em;
}

#section-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

#product-boxes {
  display: flex;
  justify-content: space-around;
  height: 70vh;
  padding-top: 10vh;
}
#product-boxes .product-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 27%;
  min-height: calc(30em - 5vw);
  max-hegiht: 50vh;
  margin: auto;
  border-radius: 3vw;
  background-color: #ccadbe;
  transform: scale(1);
  transition: transform 0.5s, background 0.5s;
  box-shadow: -5px 5px 4px 2px #402c4c;
}
#product-boxes .product-box h5 {
  margin: 0;
  margin-top: 1em;
  color: #775967;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
}
#product-boxes .product-box p {
  width: 85%;
  font-size: 0.95em;
  text-align: justify;
}
#product-boxes .product-box a {
  width: var(--product-box-a-width);
  padding: var(--product-box-a-pad);
  margin-bottom: 1.5em;
  border-radius: 1.2vw;
  background-color: #904c7c;
  color: white;
  font-size: 1.2em;
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  box-shadow: -2px 2px 3px 1px #402c4c;
}
#product-boxes .product-box:nth-of-type(2) {
  transform: scale(1.1);
  background: #ffcfcf;
}

#wip {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 30vh;
  border: 1px solid transparent;
}
#wip h6 {
  color: #ffd3e6;
  margin-top: 25px;
  margin-bottom: 0;
  font-size: 1.5em;
}
#wip p {
  margin-top: 5px;
  color: white;
  font-size: 1.7em;
  text-align: center;
  font-weight: 500;
}

section#discord {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: 20vh 35vh;
  row-gap: 5vh;
  height: 70vh;
  width: 100%;
  padding-top: 5vh;
}
section#discord aside#join-our-discord {
  display: flex;
  align-content: center;
  width: 100%;
  height: 20vh;
  background-color: #ffcfcf;
  box-shadow: 0 2px 4px 1px #775967;
}
section#discord aside#join-our-discord h3 {
  font-size: 4em;
  text-align: center;
  color: #904c7c;
  margin: auto;
}
section#discord a {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 80vw;
  height: 35vh;
  background-color: linear-gradient(#804c74, #775967);
  text-decoration: none;
}
section#discord a img {
  border-radius: 15%;
  box-shadow: -5px 5px 10px 4px #775967;
  width: var(--discord-icon-size);
  height: var(--discord-icon-size);
}
section#discord a p {
  width: 45vw;
  color: white;
  font-weight: 600;
  font-size: 1.4em;
}

footer {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  height: 30vh;
  padding: 15px 0;
  border: 1px solid transparent;
  background: linear-gradient(#ffcfcf, #e6afed 200%);
  box-shadow: 0 -2px 4px 1px #775967;
}
footer #icons {
  grid-column-start: 1;
  grid-column-end: 3;
  display: flex;
  width: 60%;
  max-width: 500px;
  justify-content: space-evenly;
  font-size: 3em;
}
footer #icons i {
  color: #402c4c;
  margin: 0 10px;
}
footer img {
  justify-self: right;
  width: 7vw;
  height: auto;
  margin-right: 2.5vw;
}
footer #copy {
  justify-self: left;
  color: #402c4c;
  margin-left: 2.5vw;
  font-size: 0.8em;
  text-align: center;
  font-weight: 600;
}
footer #copy a {
  color: #402c4c;
}

/*
  header, main > section, main > article, footer {
      position: absolute;
      top: 100vh;
      width: 100%;
      height: 100vh;
  }
  
  header {
      top: 0;
  }
  */