:root{
      --bg-dark: hsl(0 0% 0%);
      --bg: hsl(0 0% 10%);
      --bg-light: hsl(0 0% 20%);
      --text: hsl(0 0% 95%);
      --text-muted: hsl(0 0% 75%);
      --link: hsl(232, 44%, 50%);
      --border: hsl(0 0% 50%);
      --shadow: 1px 1px 3px hsla(0, 0%, 60%, 0.93), 3px 3px 3px hsla(0, 0%, 50%, 0.85);
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: var(--bg-dark);
      color: var(--text-muted);
      float: left;
    }
    header {
      background: var(--bg-dark);
      color: var(--text);
      padding: 1rem;
      text-align: center;
    }
    nav {
      background: var(--bg);
      color: var(--text);
      display: flex;
      justify-content: center;
      gap: 1rem;
      padding: 0.5rem;
    }
    button {
      background: var(--bg);
      color: var(--text);
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-radius: 8px;
      border: solid 1px var(--border);
    }
    .focus {
      scale: 1.07;
      font-weight: 700;
    }
    section {
      max-width: 80%;
      margin: 2rem auto;
      padding: 1rem;
      background: var(--bg);
      border-radius: 8px;
      border: solid 2px var(--border);

      align-items: center;
      display: flex;
      justify-content: center;
    }

a {
  background-color: var(--bg);
  color: var(--text);
  padding: 0.5rem 1rem;
  border: solid 1px var(--border);
  border-radius: 8px;
  cursor: pointer;
}

a:hover{
  color: var(--link);
  animation: zoom 0.5s ease-in-out forwards;
}

    h2 {
      color: var(--text);
      font-size: 5.5vw;
    }
    h3 {
      color: var(--text);
      font-size: 4vw;
      padding: 0;
      text-decoration: underline 2px;
    }
    h4 {
      color: var(--text);
      font-size: 2.75vw;
    }
    img {
      max-width: 90%;
      object-fit: cover;
      margin: auto;
      border-radius: 4px;
    }
    img:hover{
      animation: zoom 1s ease-in-out forwards;
    }
    .hidden {
      display: none;
    }

    .side-by-side{
      display: flex;
      gap: 20px;
      padding: 5px;
      width: 90%;
      margin: auto;
    }

    .text{
      display: block;
      max-width: 45%;
      font-size: 2.3vw;
      margin: 0px;
      color: var(--text-muted);
    }

    .links{
      display: grid;
      grid-auto-flow: row;
      grid-gap: auto;
    }
    
  @keyframes zoom {
  100% {
    scale: 1.07;
  }
}