body {
  --color-primary: #000000;
}

#main > h1 {
  margin: 0;
  padding: 2rem;
}

#main section {
  padding: 2rem 4rem;
}

.shenon {
  --color-primary: #d62828;
}

.agarshan {
  --color-primary: #2a9d8f;
}

.thenush {
  --color-primary: #6a4c93;
}

.nathan {
  --color-primary: #264653;
}

.jason {
  --color-primary: #e76f51;
}

.rich {
  --color-primary: #495057;
}

.thisangha {
  --color-primary: #e63946;
}

.tenuja {
  --color-primary: #ffb703;
}

.eirane {
  --color-primary: #ff4f64;
}

.jerom {
  --color-primary: #a0522d;
}

.shenon,
.agarshan,
.thenush,
.nathan,
.jason,
.rich,
.thisangha,
.tenuja,
.eirane,
.jerom {
  background-color: color-mix(in srgb, var(--color-primary) 15%, white 85%);
}

.info-box {
  width: 16rem;
  background-color: var(--color-primary);
  color: #1e1e1e;
  border: 0.25rem solid var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: right;
  margin: 0 4rem 2rem 2rem;
  overflow: hidden;
}

.info-box__img-container {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.info-box__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms;
}

.info-box__img-container:hover .info-box__img {
  transform: scale(1.125);
}

.info-box__overlay {
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(
    to bottom right,
    transparent 45%,
    #ededed22 50%,
    transparent 55%
  );
  background-size: 500% 500%;
  background-repeat: no-repeat;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: bottom right;
  }

  100% {
    background-position: top left;
  }
}

.info-box__name {
  height: 3rem;
  background-color: var(--color-primary);
  color: #ededed;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-box__name > * {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 750;
}

.info-box__data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.info-box__data-table th,
td {
  padding: 0.5rem;
}

.info-box__data-table tr {
  height: 3rem;
  background-color: color-mix(in srgb, var(--color-primary) 45%, white 55%);
}

.info-box__data-table tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--color-primary) 60%, white 40%);
}

.gallery-section,
.gallery-section > h2 {
  margin-bottom: 2rem;
}

.gallery {
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 16rem);
  place-content: center;
  gap: 2rem;
}

.gallery__img-container {
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 1rem;
  box-shadow: 0 0 1rem #1e1e1e22;
  transition: transform 500ms, box-shadow 500ms;
}

.gallery__img-container:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0 1rem #1e1e1e33;
  cursor: pointer;
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms;
}

.gallery__img-container:hover .gallery__img {
  transform: scale(1.125);
}

.trivia-list {
  list-style: none;
}

.trivia-list > li {
  margin-bottom: 1rem;
}

@media (max-width: 475px) {
  #main > h1 {
    text-align: center;
  }

  .info-box {
    float: none;
    width: 75%;
    margin: 0 auto 4rem auto;
  }
}