#top-anim {
  height: calc(100vh - 4rem);
  background-color: #222533;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#top-anim .anim-card {
  --rotate: 132deg;
  margin-top: 3rem;
  position: relative;
  cursor: pointer;
  display: flex;
  height: 36vw;
  width: 24vw;
}
#top-anim .anim-card div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #191c29;
}
#top-anim .anim-card h1 {
  opacity: 0;
}
#top-anim .anim-card::before {
  content: " ";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  top: -1%;
  left: -2%;
}
#top-anim .anim-card::after {
  position: absolute;
  content: " ";
  top: 5vw;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.9);
  filter: blur(5vw);
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
  transition: opacity 0.5s;
}
#top-anim .anim-card.active {
  transition: 1s;
}
#top-anim .anim-card.active::before, #top-anim .anim-card.active::after {
  animation: none;
  opacity: 0;
}
#top-anim .anim-card.active h1 {
  transition: 1s;
  opacity: 1;
  background: linear-gradient(0deg, rgba(125, 142, 213, 0) 0%, rgb(199, 205, 255) 50%, rgba(125, 142, 213, 0) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#top-anim h6 {
  color: black;
  margin-top: 2rem;
  z-index: 1;
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
}

#rows .about, #rows .curator, #rows .team {
  padding: 3.25rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#rows .about .small, #rows .curator .small, #rows .team .small {
  color: #9D9EA0;
}
#rows .about p, #rows .curator p, #rows .team p {
  padding-left: 0.25rem;
}
#rows .about p, #rows .about h2, #rows .curator p, #rows .curator h2, #rows .team p, #rows .team h2 {
  margin-bottom: 0.25rem;
}
#rows .about h1, #rows .curator h1, #rows .team h1 {
  text-align: center;
  line-height: 2rem;
  z-index: 1;
}
#rows .about span, #rows .curator span, #rows .team span {
  display: block;
  height: 1rem;
  border-radius: 0.5rem;
  margin-top: -1rem;
  filter: drop-shadow(0px 6px 18px rgba(0, 0, 0, 0.25));
  width: 12.5rem;
}
#rows .bg-color-1 {
  color: white;
  background-color: #5A77AB;
}
#rows .bg-color-1 h1 {
  color: #E1F282;
}
#rows .bg-color-1 span {
  background-color: #8CAEEA;
}
#rows .bg-color-2 {
  color: #E37E63;
  background-color: #F1E8E0;
}
#rows .bg-color-2 h1 {
  color: #89CFC8;
}
#rows .bg-color-2 span {
  background-color: #FDFAFA;
}
#rows .bg-team-1 {
  color: white;
  background-color: #7C9186;
}
#rows .bg-team-1 h1 {
  color: white;
}
#rows .bg-team-1 span {
  background-color: #EEDDCD;
}
#rows .bg-team-2 {
  color: white;
  background-color: #F1C2B4;
}
#rows .bg-team-2 h1 {
  color: white;
}
#rows .bg-team-2 span {
  background-color: #FAF0E7;
}
#rows .bg-team-3 {
  color: white;
  background-color: #B5B1C7;
}
#rows .bg-team-3 h1 {
  color: white;
}
#rows .bg-team-3 span {
  background-color: #FAF0E7;
}
#rows .bg-team-4 {
  color: #484646;
  background-color: #D6CDC5;
}
#rows .bg-team-4 h1 {
  color: white;
}
#rows .bg-team-4 span {
  background-color: #FAF0E7;
}
#rows .box-big {
  padding: 3rem 4rem;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
#teams {
  position: relative;
  transition: 0.3s;
  overflow: hidden;
}
#teams .control-prev {
  position: absolute;
  left: 5rem;
  width: auto;
  height: 100%;
  display: flex;
}
#teams .control-box {
  position: absolute;
  right: 0;
  height: 100%;
  width: auto;
}
#teams .control-prev .bar, #teams .control-box .bar {
  width: 4rem;
  padding: 2rem 1rem;
  height: 100%;
  cursor: pointer;
  display: inline-flex;
  position: relative;
}
#teams .control-prev .bar .underline, #teams .control-box .bar .underline {
  margin-top: auto;
  display: block;
  height: 0.5rem;
  border-radius: 0.25rem;
  filter: drop-shadow(0px 6px 18px rgba(0, 0, 0, 0.25));
  width: 100%;
  background-color: white;
  position: relative;
  z-index: auto;
}
#teams .control-prev .bar .underline.active::before, #teams .control-box .bar .underline.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  margin-left: -0.5rem;
  margin-top: -1.25rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1.5rem;
  animation: scale 1s infinite alternate ease-in-out;
}
#teams .team-page {
  display: none;
  min-height: 30rem;
}
#teams .team-page b {
  padding-right: 1.5rem;
}
#teams .team-page.active {
  display: block;
}
#teams .team-page table {
  margin-top: 0;
}
#teams .team-page table tr {
  border-bottom: 1rem solid transparent;
}
#teams .team-page table th {
  font-weight: 400;
}
#teams .team-page img {
  height: 2rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
}
#teams .team-page img.smaller {
  height: 1.5rem;
}
#teams .team-page img.bigger {
  height: 2.5rem;
}
#teams #team-page-1 {
  padding-right: 8rem;
}

@media (min-width: 768px) {
  #teams .team-page {
    background-color: transparent;
  }
}
@media (max-width: 767.98px) {
  #top-anim .anim-card {
    height: 60vw;
    width: 40vw;
  }
  #top-anim .anim-card::after {
    filter: blur(10vw);
  }

  #teams .team-page {
    display: block;
  }
  #teams #team-page-1 {
    padding-right: 0;
  }
  #teams .control-box, #teams .control-prev {
    display: none;
  }

  #teams .box-big, #rows .box-big {
    padding: 2.5rem;
  }
}