@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Removing this will mess with element sizing for the whole site*/
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* change the main font of the site here*/
}

html {
  scroll-behavior: smooth;
}

a {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
}

/* General Styling*/

/* header start */
#header {
      background: linear-gradient(135deg, #1a7a7a 0%, #2d9b9b 100%);
      color: white;
      padding: clamp(11.25pt, 3vw, 22.5pt) clamp(15pt, 5vw, 45pt);
      position: sticky;
      z-index: 100;
      top: 0;
      width: 100%;
      box-shadow: 0 3pt 9pt rgba(0, 0, 0, 0.15);
    }

    #header h1 {
      text-align: center;
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      font-weight: 300;
      margin-bottom: clamp(15px, 2vw, 25px);
      position: relative;
      display: inline-block;
      width: 100%;
      font-family: 'Courier New', monospace;
      text-transform: lowercase;
      letter-spacing: 0.3pt;
    }

    #header h1::before {
      content: '{ ';
      color: rgba(255, 255, 255, 0.6);
      font-weight: 400;
    }

    #header h1::after {
      content: ' }';
      color: rgba(255, 255, 255, 0.6);
      font-weight: 400;
    }

    #navLinks {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(15pt, 5vw, 37.5pt);
      flex-wrap: wrap;
      width: 100%;
    }

    #navLinks a {
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      font-size: clamp(0.9rem, 2vw, 1.1rem);
      letter-spacing: 1.125pt;
      padding: 6pt 15pt;
      position: relative;
      font-weight: 400;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #navLinks a::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 1.5pt;
      background-color: white;
      transform: translateX(-50%);
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    #navLinks a:hover {
      color: white;
      transform: translateY(-1.5pt);
    }

    #navLinks a:hover::before {
      width: 100%;
    }

    #navLinks a.active {
      color: white;
      font-weight: 600;
    }

    #navLinks a.active::before {
      width: 100%;
    }

    #navLinks:hover a.active:not(:hover)::before {
      width: 0;
      opacity: 0;
    }

    #navLinks a.active:hover {
      transform: translateY(-1.5pt) scale(1.05);
    }

    #navLinks a.active:hover::before {
      animation: activePulse 1.2s ease-in-out infinite;
    }

    @keyframes activePulse {
      0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
      }
      50% {
        opacity: 0.6;
        transform: translateX(-50%) scaleX(0.85);
      }
    }
/*header end */

.main {
  padding: 2em 5em 1em 5em;
  margin: 0 auto; /* centers the main content */
  background-color: white;
  max-width: 1024px;
}

hr {
  margin: 2em 0;
}

.innerLink {
  margin-top: 0.5em;
  display: inline-block;
}

#footer {
  text-align: center;
  padding: 15px;
}

/* Page specific */
/* Touching any CSS below this can break the gallery. Proceed with caution */
.gallery {
  padding-top: 1em;
  /* base number of columns, can make this 1 to ?? at bigger numbers it'll look funny 
     if you edit this, you may want to update the columns in the mobile sizing starting on line 105
  */
  columns: auto 2;
  text-align: center;
}

.gallery img {
  border: none; /* You can remove the border if you want */
  border-radius: 25px;
  width: 100%;
}

figure {
  display: inline-block;
  margin: 0;
  margin-bottom: 15px;
}

.spotlightImage {
  display: block;
  margin: 0 auto;
}

/* Below changes the number of columns in the gallery for smaller screens
   If you changed the column number on line 85, you might have to edit it here too
   (it's not exactly mobile and tablet sizing)
    */
@media only screen and (max-width: 800px) {
  .gallery {
    columns: auto 2;
  }
}

@media only screen and (max-width: 500px) {
  .gallery {
    columns: auto 1;
  }
}