*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  align-items: center;

  --blue-100: #dce8f9;
  --blue-200: #7194c2;
  --blue-300: #3d5a80;
  --black: #333333;
  --gray: #666666;
}

.controls {
  padding: 1rem;
  width: 1080px;
  height: 4rem;
  border: 1px solid black;
  border-radius: 0.5rem 0.5rem 0 0;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
}

select,
input,
button {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  margin: 0;
  height: 1.75rem;
}

button#download {
  width: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: all 0.05s ease;
  img {
    height: 1.1rem;
    width: 1.1rem;
  }

  &:hover {
    background-color: #eee;
  }
}

.post-container {
  border: 1px solid black;
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  position: relative;
}

.post {
  transform: scale(1);
  transform-origin: top left;
}

pre {
  background-color: #eee;
  min-height: 5rem;
  width: 1080px;
  border-radius: 0 0rem 0.5rem 0.5rem;
  border: 1px solid black;
  margin: 0;
  padding: 1rem;
}

/*  */
div.post {
  display: flex;
  width: 1080px;
  height: 1350px;
  align-items: center;
  justify-content: center;
  div.body {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: "Amaranth";
    color: var(--black);
    div.title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h1 {
        font-size: 3.75rem;
        margin: 0;
        text-align: center;
      }
      h2 {
        font-weight: 600;
        color: var(--blue-200);
        font-size: 2.5rem;
        margin: 0;
      }
    }
    ul {
      min-width: 650px;
      font-family: "Inter";
      font-size: 2.75rem;
      font-weight: 300;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      li {
        display: flex;
        align-items: center;
        gap: 2.75rem;
        img {
          width: 2.75rem;
        }
      }
    }
    div.people {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      div.image-container {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        min-width: 650px;
        background-color: var(--blue-100);
        height: 220px;
        border-radius: 9999px;
        img {
          height: 220px;
          width: 220px;
          object-fit: cover;
          border-radius: 9999px;
          border: 6px solid var(--blue-100);
          box-sizing: border-box;
        }
      }
      div.names {
        width: 100%;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        span {
          display: inline-block;
          width: 200px;
          text-align: center;
          font-size: 1.75rem;
          font-family: "Inter";
          font-weight: 600;
          color: var(--gray);
        }
      }
    }
  }
  div.decoration {
    display: flex;
    flex-direction: column;
    width: 50px;
    height: 100%;
    div.solid {
      width: 100%;
      height: 650px;
      background-color: var(--blue-300);
    }
    div.gradient {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(var(--blue-100), white);
    }
  }
}