* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      html, body {
        overflow-x: hidden;
      }

      body {
        background: #e9e9e9;
        font-family: "Inter Tight", sans-serif;
        color: #1a1a1a;
      }

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

      a:hover {
        transition: .5s;
        color: #817fa6;
      }

      a svg {
        display: block;
      }

      .container {
        max-width: 1600px;
        margin: 0 auto;
        /* padding: 2rem 1rem; */
      }

      .container-fluid {
        width: 100%;
        padding: 0;
      }

      .row {
        display: flex;
        flex-wrap: wrap; /* allow wrap when needed */
        justify-content: center;
        align-items: stretch;
        margin-bottom: 0;
        gap: 0;
      }

      .column {
        /* each column takes 50% of the parent, but never more than 800px */
        flex: 1 1 50%;
        max-width: 800px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .more {
        /* max-width:100%; */
        justify-content: start;

          .text-box, h3 {
            padding-top: 1.5rem;
            padding-bottom: 0.5rem;
        }

        h1 {
          padding-bottom: 0.5rem;
        }
      }

      .start {
        justify-content: start;
      }

      .plus {
        background-color: #817fa6;
      }

      .hero .text-box,
      .foot .text-box {
        background: #817fa6;
        color: #e9e9e9;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 3.5rem;
        text-align: center;
        line-height: 1.125;
      }

      .foot .text-box {
        background-color: #949d7e;
      }

      h1.upper {
        font-size: clamp(2rem, 5vw, 4.75rem);
        font-weight: 600;
        width: 100%;
        text-align: left;
        margin-bottom: 0rem;
      }

      h1 {
        font-size: clamp(2rem, 4vw, 4rem);
        font-weight: 600;
        margin-bottom: 1rem;
      }

      h2 {
        margin-top: 1rem;
      }

      .text-box {
        padding: 0rem 3rem;
      }

      .text-box p {
        margin-top: 0.75rem;
        font-size: clamp(1rem, 1vw, 1.25rem);
        line-height: 1.5;
      }

      ul {
        list-style-type: none;
        padding-top: 0.5rem;
      }

      #more ul {
        padding-left: 1rem;
        list-style-type: disc;
      }

      .ul-tight li {
        line-height: 1.125;
      }

      li {
        line-height: 1.5;
      }

      .image-box {
        width: 100%;
        /* max-width: 800px; */
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
      }

      .image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .btn {
        cursor: pointer;
        display: inline-block;
        background: #1a1a1a;
        color: #e9e9e9;
        text-decoration: none;
        padding: 10px 30px;
        margin: 1rem 0;
        width: 8rem;
        border-radius: 2rem;
        text-align: center;
        }

      .btn:hover {
        transition: .5s;
        background: #817fa6;
        color: #e9e9e9;
        }

      /* Alternate layout for even rows */
      .row.alt {
        flex-direction: row-reverse;
      }

      /* Navigation */

      .main-nav {
        max-width: 1600px;
        margin: 0 auto;
        padding: 1rem 1rem;
        position: relative;
        z-index: 10;
      }

      .nav-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
      }

      .nav-row.top {
        position: relative;
      }

      .nav-left,
      .nav-center,
      .nav-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .nav-left {
        flex: 1 1 25%;
        /* gap: 0.5rem; */
        font-size: clamp(1.4rem, 1.5vw, 1.75rem);
        font-weight: 500;
        align-items: end;
      }

      .nav-center {
        flex: 1 1 50%;
        align-items: center;
      }

      .nav-center a {
        display: flex;
        width: 92%;
        justify-content: center;
      }

      .nav-center a svg {
        width: 86%;
        height: auto;
      }

      .nav-right, .nav-right-music {
        flex: 1 1 25%;
        align-items: start;
      }

      .nav-music {
        display: flex;
        flex: 1 1 50%;
        align-items: start;
      }

      .icon-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
      }

      .icon-grid-music {
        display: grid;
        grid-template-columns: repeat(2, 35px);
        grid-gap: 1rem;
        margin-top: 2rem;
      }

      .icon-grid a svg, .icon-grid-music a svg {
        width: 30px;
        height: 30px;
        fill: #1a1a1a;
      }

      .nav-row.bottom {
        justify-content: center;
        margin-top: 1rem;
      }

      .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        list-style: none;
      }

      .nav-links a {
        text-decoration: none;
        font-weight: 500;
        font-size: 1.25rem;
        color: #1a1a1a;
        transition: color 0.2s ease;
      }

      .nav-links a:hover {
        color: #817fa6;
      }

      /* Hamburger styling */
      .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        position: absolute;
        /* right: 2rem;
        top: 1.5rem; */
        right: 0.5rem;
        top: 0.5rem;
      }

      .hamburger div {
        width: 24px;
        height: 3px;
        background-color: #000;
      }

      /* Responsive behavior */

      @media (max-width: 1030px) {
        .row,
        .row.alt {
          flex-direction: column;
          align-items: flex-start;
        }

        .column {
          max-width: 100%;
        }

        .text-box {
          padding: 1.5rem 1.5rem;
        }

        #about .text-box {
          padding: 0 1.5rem 1.5rem 1.5rem;
        }

        .image-box {
          width: 100%;
          aspect-ratio: 1 / 1;
        }

        .text-box p {
          font-size: 1rem;
          line-height: 1.25;
        }

        /* Responsive Nav */
        .nav-left,
        .nav-right,
        .nav-row.bottom {
          display: none;
        }

        .hamburger {
          display: flex;
        }

        .main-nav.expanded .nav-left,
        .main-nav.expanded .nav-right,
        .main-nav.expanded .nav-row.bottom {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

         .main-nav.expanded .nav-center {
          flex: 1 1 75%;
         }

        .nav-row.bottom {
          margin-top: 1rem;
        }

        .nav-links {
          flex-direction: column;
          gap: 1rem;
        }

        .icon-grid {
          display: none;
          /* grid-template-columns: repeat(2, 40px); */
        }

        .nav-left {
          visibility: hidden;
        }

        .scroller {
          width: 100%;
        }
      }

      /* SCROLLER START */

      .scroller__inner {
        padding-block: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .scroller[data-animated="true"] {
        overflow: hidden;
      }

      .scroller[data-animated="true"] .scroller__inner {
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
      }

      .scroller[data-direction="right"] {
        --_animation-direction: reverse;
      }

      .scroller[data-direction="left"] {
        --_animation-direction: forwards;
      }

      .scroller[data-speed="fast"] {
        --_animation-duration: 20s;
      }

      .scroller[data-speed="slow"] {
        --_animation-duration: 40s;
      }

      @keyframes scroll {
        to {
          transform: translate(calc(-50% - 0.5rem));
        }
      }

      /* general styles */

      .scroller {
        font-size: 2.5rem;
        font-weight: 600;
        color: #fff;
      }

      .scroller[data-animated="true"] .scroller__inner:hover {
        animation-play-state: paused;
      }

      .tag-list {
        margin: 0;
        padding-inline: 0;
        padding-block: 0.5rem;
        list-style: none;
        background: #000;
        margin-block: 1rem;
      }

      .tag-list li {
        background: #000;
      }

      /* SCROLLER END */