@font-face {
      font-family: 'font';
      src:
        url('/assets/fonts/font.woff') format('woff'),
        url('/assets/fonts/font.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    html, body {
      margin:0; padding:0; height:100%; overflow-x:hidden;
      scroll-behavior:smooth; font-family:sans-serif;
      background:#fff; color:#333;
    }
    .no-transition, .no-transition * { transition:none!important; }
    #gradientOverlay, #gradientOverlayBottom, #gradientOverlayLeft, #gradientOverlayRight {
      position:fixed; pointer-events:none; z-index:5;
      transition:height .1s, width .1s;
      height:0; width:0;
    }
    #gradientOverlay { top:0; left:0; width:100%; background:linear-gradient(to bottom, rgba(195,201,43,0.9), transparent); }
    #gradientOverlayBottom { bottom:0; left:0; width:100%; background:linear-gradient(to top, rgba(206,213,49,0.9), transparent);}
    #gradientOverlayLeft { top:0; left:0; height:100%; background:linear-gradient(to right, rgba(195,201,43), transparent);}
    #gradientOverlayRight { top:0; right:0; height:100%; background:linear-gradient(to left, rgba(206,213,49), transparent);}
    .logo-container {
      position:fixed; top:50%; left:50%;
      transform:translate(-50%, -50%);
      width:100vw; text-align:center;
      transition:width 0.5s, top 0.5s, transform 0.5s;
      z-index:10; perspective:1000px; transform-style:preserve-3d;
      cursor:pointer; user-select:none;
    }
    .logo-container:hover { cursor:help; }
    .logo-container img {
      width:100%; height:auto; display:block;
      transition:transform .1s, filter .2s, box-shadow .2s;
      will-change:transform; filter:drop-shadow(0 0 0 rgba(209,99,249,0.5));
      pointer-events:none;
    }
    .logo-container.minimized {
      width: 190px !important;
      top: 5px !important;
      transform: translateX(-50%) !important;
    }
    .snap-wrapper { display:none; overflow-y:auto; height:calc(var(--vh, 1vh) * 100); scroll-snap-type:y mandatory; }
    .section {
      position:relative; height:calc(var(--vh, 1vh) * 100); width:100vw;
      display:flex; flex-direction:column; justify-content:center; align-items:center;
      background:#fff; border-top:1px solid #ccc;
      scroll-snap-align:start;
    }
    .section-text {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      font-family:'font'; font-size:12rem; font-weight:900; padding: 0;
      color:#cebb26; text-align:center; line-height:.7; max-width:600px;
      padding:0 20px; user-select:none; text-decoration:none; -webkit-text-stroke: 0.5px #ffffff; transition: color 0.2s, font-size 0.2s;
    }
    .section-text:hover { cursor:alias; color:#9b8d1f; font-size:13rem; }
    .about-text, .contact-info { font-family:'font',sans-serif; text-align:center; cursor: default; }
    .about-text { font-size:3rem; color:#cebb26; line-height:.8; max-width:80%; margin:0 auto; }
    .about-text::selection { color:#9b8d1f; }
    .about-text::-moz-selection { color: #9b8d1f; }
    .hover-trigger { cursor:none; text-decoration:underline; transition: color 0.2s;}
    .hover-trigger:hover { color:#9b8d1f; }
    #hoverImage {
      position:fixed;
      /* ---- SET THE DESIRED POSITION HERE: ---- */
      top:50%;   /* CHANGE THIS FOR VERTICAL POSITION */
      left:50%;  /* CHANGE THIS FOR HORIZONTAL POSITION */
      transform:translate(-50%, -50%);
      width:500px; border-radius:3px; max-width:80vw; max-height:80vh;
      display:none; z-index:9999; transition:transform 0.1s;
      transform-style:preserve-3d; mix-blend-mode:darken;
    }
    .contact-info {
      display:flex; gap:2rem; flex-wrap:wrap; justify-content:center;
      font-size:1.5rem; color:#cebb26; max-width:600px; margin:50px auto 0; line-height:1;
    }
    .contact-info a { color:#000; text-decoration:none; }
    .contact-info a:hover, .contact-info a:focus { text-decoration:underline; }
    .contact-info::selection { color:#9b8d1f; }
    .contact-info::-moz-selection { color: #9b8d1f; }
    #scrollArrow {
      position:fixed; bottom:5px; width:100vw; left:0;
      font-family:'font'; font-size:2.5rem; color:#cebb26;
      z-index:20; cursor:pointer; transition:opacity .3s; text-align:center;
      white-space:nowrap; 
    }
    #scrollArrow:hover { cursor:s-resize; }
    #scrollArrow::selection { color:#9b8d1f; }
    #scrollArrow::-moz-selection { color: #9b8d1f; }
    .embla { width:100%; max-width:100vw; --slide-spacing: 1rem; --slide-size:50%; }
    .embla__viewport { overflow:hidden; width:100%; }
    .embla__container { height:calc(var(--vh, 1vh) * 100); display:flex; margin-left:calc(var(--slide-spacing)*-1);}
    .embla__slide {
      flex: 0 0 var(--slide-size);
      padding-left: var(--slide-spacing);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: flex-basis 0.5s ease; /* <-- Add this line */
    }

    .embla__slide img { height: calc(var(--vh, 1vh) * 100); border-radius: 3px; width: auto; object-fit: contain; display: block; transition: height 0.5s ease; /* <<< Add this line */}
    .embla__slide video {
      height: calc(var(--vh, 1vh) * 100);
      width: auto;
      object-fit: contain;
      display: block;
      transition: height 0.5s ease; /* <<< Add this line */
      border-radius: 3px;
    }
    .embla__container.enlarge-slide .embla__slide img { height: calc(var(--vh, 1vh) * 70); transition: height 0.5s ease; }
    .embla__container.enlarge-slide .embla__slide video { height: calc(var(--vh, 1vh) * 70); transition: height 0.5s ease; }
    .credit-footer {
      position: absolute;
      right: 15px;
      bottom: 15px;
      font-size: 0.9rem;
      color: #000000;
      font-family: "font";
      pointer-events: none;
      z-index: 2000;
      letter-spacing: 0.01em;
      background: none;
      user-select: none;
      text-align: right;
    }
    .credit-footer .credit-link {
      color:#cebb26;
      font-family: inherit;
      font-weight: bold;
      opacity: 0.9;
      pointer-events: auto; /* clickable */
      transition: opacity 0.2s;
    }
    .credit-footer .credit-link:hover,
    .credit-footer .credit-link:focus {
      opacity: 1;
      color:#9b8d1f;
      text-decoration: underline solid;
    }

    
    @media (max-width:1100px) {
      .credit-footer { line-height: 1.2; max-width: 90vw; word-break: break-word; white-space: normal; }
      .credit-footer .credit-break {  display: block; }
    }
    
    @media (max-width:768px) {
      .embla__slide img,
      .embla__slide video { height:100vh; }
      .about-text { font-size:2rem; max-width:90%; }
      .section-text { font-size:8rem; -webkit-text-stroke:0.5px #fff;}
      .section-text:hover { font-size: 9rem; }
      #scrollArrow { width:100vw; left:0; text-align:center; white-space:nowrap; }
      .embla__container.enlarge-slide .embla__slide img { height: calc(var(--vh, 1vh) * 40); transition: height 0.5s ease; }
      .embla__container.enlarge-slide .embla__slide video { height: calc(var(--vh, 1vh) * 40); transition: height 0.5s ease; }
    }
    
    @media (max-width: 425px) {
      .about-text { font-size:1.5rem; color: #000000; }
      #scrollArrow { font-size: 2rem; }
      .section-text { font-size: 6rem; -webkit-text-stroke: 0px #fff; text-shadow: 4px 0 0 currentColor, 0 4px 0 currentColor, 4px 0 0 currentColor, 0 4px 0 currentColor; }
      .credit-footer { font-size: 0.5rem; line-height: 1.5; }
      .logo-container.minimized { width: 140px !important; top: 5px !important; transform: translateX(-50%) !important; }
    }