:root {
      /* Light color palette */
      --color-primary: #ffffff;
      --color-secondary: #000000;
      --color-accent: #ab0022;
      --color-background: #000000;
      --color-text: #000000;
      --color-white: #ffffff;
      --color-black: #000000;

      /* Font */
      --title-font: 'Righteous', Arial, sans-serif;
      --main-font: 'Righteous', Arial, sans-serif;

      /* #ac1717 */

    } 
    
    @media (prefers-color-scheme: dark) {
      :root {
      /* Dark color palette */
      --color-primary: #09090a;
      --color-secondary: #ffffff;
      --color-accent: #ab0022;
      --color-background: #1a1a1a;
      --color-text: #ffffff;
      --color-white: #ffffff;
      --color-black: #000000;

     /* Font */
      --title-font: 'Righteous', Arial, sans-serif;
      --main-font: 'Righteous', Arial, sans-serif;


      }
    }


    /* Regular weight */
    @font-face {
      font-family: "Horroh";
      src: url("/fonts/Horroh.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
    }



    body {
      font-family: var(--main-font); /* Use the font for the whole page */
      margin: 0px;
      background-color: var(--color-primary);
      color: var(--color-text);
      
    }
    h1 {
      font-family: var(--title-font);
      font-weight: 700;
    }
    .banner {
      position: relative;
      top: 0;
      background-color: var(--color-primary); /* Banner color */
      color: var(--color-text);               /* Text color */
      height: 100vh;                          /* Full height of the viewport */
      width: 100vw;                            /* Full width of the viewport */
      display: flex;                          /* Use flexbox to center text */
      align-items: center;                    /* Vertically center text */
      justify-content: center;                /* Horizontally center text */
      font-size: clamp(48px, 8vw, 320px);
      font-family: var(--title-font);
      
    }
    

    .transition {
      position: relative;
      top: 0;
      background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary)); /* Banner color */
      color: var(--color-text);               /* Text color */
      height: 30vh;                          /* Full height of the viewport */
      display: flex;                         
      align-items: center;                    
      justify-content: center;                
    }
    
    #menu-btn {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 100;
      font-size: 2rem;
      padding: 0.5rem 1rem;
      background-color: rgba(0, 0, 0, 0); /* black with 70% opacity */
      color: var(--color-secondary);
      border: none;
      cursor: pointer;
      border-radius: 8px;
      transition: color 1s ease;
    }

    #menu-btn.active {
      color: var(--color-primary);
    }

    .topbar {
      position: fixed;
      top: 0;
      transform: translate(-250%, 0);
      width: 100vw;                       /* keep full width or your original width */
      height: clamp(40px, 5vh, 80px);                        /* original height */
      padding: 1vh 1vh;                 /* original padding */
      text-align: center;
      font-weight: bold;
      color: var(--color-white);
      background: var(--color-secondary);
      opacity: 0;
      transition: transform 1s ease, opacity 1s ease;
      z-index: 1;                          /* keep on top */
      font-family: var(--main-font);       /* keep your font */
      font-size: clamp(6px, 20px, 20px);   /* or your preferred size */
      left: 50%;            /* middle of viewport */
      
      margin: 0 auto 0;

      display: flex;
      justify-content: space-around;  /* buttons centered */
      align-items: center;      /* vertical alignment */

    }
  

    .topbar.active {
      transform: translate(-50%, 0);
      opacity: 1;
    }

    .topbar-btn {
      background-color: var(--color-primary);
      color: var(--color-text);
      border: none;
      border-radius: 1vh;
      height: 80%;
      width: 20%;
      max-width: 400px; /* optional cap */
      min-width: 40px;  /* optional minimum */
      margin: 0 8px;            /* space between buttons */
      font-family: var(--main-font);
      font-size: clamp(14px, 2vw, 24px);
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .topbar-btn:hover {
      background-color: var(--color-accent);
      color: var(--color-primary);
      transform: scale(1.1);
    }


    .container {
      background-color: var(--color-secondary);
      color: var(--color-primary);
      width: clamp(80vw, 80vw, 100vw);     /* Maximum width for big screens */
      margin: 0 auto;       /* Centers horizontally */
      border-radius: 30px;
      font-size: 2rem;
      height: 10vh;

      display: flex;
      justify-content: space-around;  /* buttons centered */
      align-items: center;      /* vertical alignment */
    }

    .spacer {
      height: 20vh; /* Extra space so we can scroll */
    }

    .logo svg{
      width: (48px, 8vw, 256px);
      height: auto;
    }
    
    .masonry {
      margin: 3vh 5vw;
      column-count: 3;          /* Number of columns */
      column-gap: 16px;         /* Gap between columns */
      
      padding: 2vw;
    }

    .masonry img {
      width: 100%;
      display: block;
      margin-bottom: 16px;
      break-inside: avoid;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .masonry img.hidden {
      opacity: 0;
      transform: scale(0.9);
      display: none; /* optional, ensures they don’t occupy space */
    }

    /* Responsive adjustments */
    @media (max-width: 900px) {
      .masonry {
        column-count: 2;
      }
    }

    @media (max-width: 600px) {
      .masonry {
        column-count: 1;
        margin: 3vh 3vw;
      }
    }

    
    .filter-bar {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 16px;
      width: clamp(80vw, 80vw, 100vw);
      height: clamp(40px, 4vh, 80px);
      padding: 1vh 1vh;
      background: var(--color-secondary);               
      border-radius: 30px;      /* rounds the corners */
      margin: 1.5vh auto 0;
      display: flex;
      align-items: center;      /* vertical alignment */

      box-shadow: 0px 10px 0px var(--color-accent);
    }

    .filter-btn {
      background-color: var(--color-primary);
      color: var(--color-text);
      border: none;
      height: 80%;
      width: 20%;
      max-width: 400px; /* optional cap */
      min-width: 40px;  /* optional minimum */
      margin: clamp(0px, 0.5vh, 6px);            /* space between buttons */
      font-family: var(--main-font);
      font-size: clamp(14px, 2vw, 24px);
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .filter-btn:hover {
      background-color: var(--color-accent);
      color: var(--color-primary);
      transform: scale(1.1);
    }

    .filter-btn:first-child {
      border-radius: 30px 0 0 30px; /* round left side */
    }

    .filter-btn:last-child {
      border-radius: 0 30px 30px 0; /* round right side */
    }

    .filter-btn .btn-icon {
      display: none; /* hide icon by default */
    }

    .filter-btn .btn-text {
      display: inline; /* show text by default */
    }
  

    @media (max-width: 900px)
    {
      .banner{
      flex-direction: column;
      font-size: clamp(70px, 10vw, 320px);
      }
      .logo svg{
        width: 50vw;
      }
      .container{
        font-size: 1.5rem;
        width: 95vw;
      }

      .topbar {
      max-width: 40vw;                       
      height: 100vh;                        
      left: 0;
      flex-direction: column;
      transform: translate(-200%, 0);
      justify-content: flex-start;

    }
    .topbar.active {
      transform: translate(0%, 0);
      
    }
    .topbar-btn {
      height: 5%;
      width: 80%;
      max-width: 400px; /* optional cap */
      min-width: 40px;  /* optional minimum */
      margin: 0 3vh;            /* space between buttons */
      margin-top: 3vh;

    }
    .topbar-btn:first-child {
      margin-top: 10vh;

    }
    }


    @media (max-width: 620px)
    {
      .banner{
      flex-direction: column;
      font-size: clamp(70px, 10vw, 320px);
      }
      .logo svg{
        width: 70vw;
      }
      .container{
        font-size: 1.5rem;
        width: 95vw;
      }
      .filter-btn .btn-text {
        display: none; /* hide text on small screens */
      }
      .filter-btn .btn-icon {
        display: inline; /* show icon on small screens */
      }
      .topbar {
        width: 100vw;
        border-radius: 0;
      }
      .filter-bar {
        width: 100vw;
        border-radius: 0;
      }

    }


    .scroll-wrapper {
      font-family: var(--main-font); /* Use the font for the whole page */
      margin: 0px;
      background-color: var(--color-background);
      color: var(--color-text);
      font-size: 1vh;

      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow-x: auto;  /* allow horizontal scroll */
      overflow-y: hidden; /* disable vertical scroll */
      scroll-behavior: smooth; /* optional smooth scrolling */
    }
    
    .row {
      display: flex;
      flex-wrap: nowrap; /* important! don’t wrap */
      width: auto;
      box-sizing: border-box;
    }


    .card {
      width: 45vh;
      height: 45vh;
      background: var(--color-accent);
      border: 1vh solid var(--color-accent);
      border-radius: 1vh;
      box-shadow: 0px 0.5vh 1.5vh var(--color-black);
      color: var(--color-white);
      font-size: 4em;
      display: flex;
      justify-content: left;
      align-items: top;
      margin-left: -35vh;
      margin-top: 35vh;
      transition: transform 0.3s ease;
      transform: rotate(-45deg);
      z-index: 1;
      flex-shrink: 0;
    }

    .cardcatagory {
      position: relative;
      width: 45vh;
      height: 45vh;
      background: var(--color-primary);
      border: 1vh solid var(--color-primary);
      
      box-shadow: 0px 0.5vh 1.5vh var(--color-black);
      
      display: flex;
      justify-content: left;
      align-items: top;
      margin-left: -35vh;
      margin-top: 35vh;
      transition: transform 0.3s ease;
      transform: rotate(-45deg);
      z-index: 1;
      flex-shrink: 0;

      font-size: 5em;
      color: var(--color-secondary);
    }
    .cardcatagory:first-child {
      border-radius: 0px;
      margin-left: 60vw;
      
    }
    .cardcatagory:last-child {
      border-radius: 0px;
      
      
    }

    .top-text {
      position: absolute;
      top: 0;             
      left: 50%;
      transform: translateX(-50%);
      font-weight: 900;
      pointer-events: none; /* text won’t block clicks */
      
    }

    /* Side text */
    .side-text {
      position: absolute;
      top: 15%;
      left: 15%;
      transform: translateY(-50%) rotate(90deg);
      transform-origin: left top;
      font-weight: 900;
      pointer-events: none;
      
    }

    .center-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 70%;
    }

    .center-image img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* keeps aspect ratio and fills the container */
      
    }

    .card:first-child {
      margin-left: 0; /* prevent first card from shifting */
    }

    

    /* On hover, straighten and pop up */
    .card:hover {
      transform: translateX(-150px) translateY(-150px) rotate(-45deg);
      
    }

    .recordcontainer {
      position: fixed;
      background-color: var(--color-primary);
      width: 100vw;
      margin: 0 auto;       /* Centers horizontally */
      bottom: 0;
      font-size: 2rem;
      height: 10vh;

      display: flex;
      justify-content: space-around;  /* buttons centered */
      align-items: center;      /* vertical alignment */
      z-index: 11;
    }

    .blankstart {
      position: absolute;
      transform-origin: top left;
      transform: rotate(135deg) translateX(-33.3198051534vh) translateY(-31.8198051534vh);
      overflow: hidden;
      
      background-color: var(--color-primary);
      height: 50vw;
      width: 63.6396103068vh;

    }

    .blankend {
      position: relative;
      margin-left: -23.5vh;
      margin-top: 25.28vh;
      overflow: hidden;
      
     
     
      
      background-color: var(--color-primary);
      height: 63.6396103068vh;
      width: 63.6396103068vh;

      z-index: 10;

    }

    #exit-btn {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 100;
      font-size: 2rem;
      padding: 0.5rem 1rem;
      background-color: rgba(0, 0, 0, 0); /* black with 70% opacity */
      color: var(--color-primary);
      border: none;
      cursor: pointer;
      border-radius: 8px;
      transition: color 1s ease;
    }