:root {
  --BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/home/home-background-light.avif");
}

:root[data-theme="dark"] {
  --BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/home/home-background-dark.avif");
}

body {
  background-image: var(--BODY-BG);
}

.page-intro {
  width: (77vw, 85%);
  text-align: center;
  margin: auto;
  padding: 2rem;
  background-color: var(--BODY-BGCOLOR2);
  border-radius: 0.7rem;
}

.awards-page-container {
  /* background-color: var(--BODY-BGCOLOR); */
  border-radius: 1rem;
  padding: min(4.5rem, 14vw);
  overflow-x: hidden;
}

.awards-page-container h2 {
  font-size: min(3.5rem, 8vw);
  text-align: center;
  margin: 0 2rem;
}

.awards-page-container p {
  font-size: min(1.2rem, 4vw);
  font-family: "Nunito", Calibri, sans-serif;
}

section {
  padding: 3rem 0;
  width: 70vw;
  margin: auto;
}

.nomination-section {
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
}

.nomination-img {
  width: 20vw;
  margin: 2rem;
}

.medal-section {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  flex-direction: row-reverse;
}

.medal-img {
  width: 20vw;
  margin: 2rem;
}

.thank-you-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.team-pic {
  width: 65vw;
}

.thank-you-note {
  width: (77vw, 85%);
  text-align: center;
  margin: 0 1rem;
  padding: 2rem;
  background-color: var(--BODY-BGCOLOR2);
  border-radius: 0.7rem;
}

.secret-message {
  color: transparent;
}

.nomination-img,
.medal-img {
  transform: translateX(0);
  transition: transform 0.8s ease-out;
}

.from-left {
  transform: translateX(-150%);
}

.from-right {
  transform: translateX(150%);
}

.slide-in {
  transform: translateX(0);
}

@media screen and (max-width: 850px) {
  body {
    background-position: left;
  }

  .medal-section,
  .nomination-section {
    flex-wrap: wrap;
    padding: ;
  }

  .nomination-img,
  .medal-img {
    width: 30vw;
    margin: 2rem auto;
  }

  section {
    padding: 1rem 0;
  }

  .team-pic {
    width: 90vw;
  }
}