@property --angle {
            syntax: "<angle>";
            inherits: false;
            initial-value: 0deg;
        }   

        :root {
            --content-size: 90vw;
            --c1: hotpink;
            --c2: deepskyblue;
            --c3: purple;
            --c4: darkorange;
        }

        @font-face {
            font-family: 'bebas-rg';
            src: url(font/BebasNeueRegular.otf);
        }

        @font-face {
            font-family: 'bebas-bk';
            src: url(font/BebasNeueBook.otf);
        }

        @font-face {
            font-family: 'bebas-bl';
            src: url(font/BebasNeueBold.otf);
        }
        
        @font-face {
            font-family: 'twcenmt';
            src: url(font/TwCenMT.ttf);
        }

         @font-face {
            font-family: 'twcenmt-bold';
            src: url(font/TwCenMTStdBold.otf);
        }

        @font-face {
            font-family: source;
            src: url(font/SourceSerif.ttf);
        }

        @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }
        25% {
            background-position: 25% 50%;
        }
        50% {
            background-position: 50% 50%;
        }
        75% {
            background-position: 75% 50%;
        }
        100% {
            background-position: 100% 50%;
        }
        }

        @keyframes rotate {
        to {
            --angle: 360deg;
        }
    }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
        }

        html {
            animation: gradientMove 15s infinite alternate ease-in-out;
            background: linear-gradient(
            to right,
            #ECE4F5 0%,    
            #F5CBC9 14%,    
            #F2F0DD 28%,  
            #F2E4F5 42%,

            #F2E4F5 56%,
            #F2F0DD 70%,    
            #F5CBC9 86%,
            #ECE4F5 100%    
        );

        /*  #b4fff9 0%,    
            #dcfdfc 14%,    
            #f0eef2 28%,  
            #fbd1db 42%,
            #fbd1db 56%,
            #dcfdfc 70%,    
            #f0eef2 86%,
            #b4fff9 100%    */

            background-size: 200% 200%;
            font-size: calc(10rem / 16);
        }

        html.fade-out {
            overflow: hidden;
            height: 100vh;
        }

        body {
            color: 	hsl(0, 0%, 7%);
            font-family: source, 'Times New Roman', Times, serif;
            margin: 0;
            padding: 0;
            white-space: normal;
            text-wrap: normal;
            word-break: normal;
            overflow-wrap: break-word;
            hyphens: auto;
            width: 100%;
        }

        body.fade-out {
            opacity: 0;
            transition: opacity 0.333s ease-in-out;
            overflow: hidden;
            height: 100vh;           
            pointer-events: none;
            width: 100%;
        }

        body.fade-out header {
            opacity: 0;
            transition: opacity 0.333s ease-in-out;
        }

        blockquote {
            font-style: italic;
            opacity: 0.9;;
        }


        .all {
            container-name: all; 
            container-type: inline-size;
            display: flex;
            flex-direction: column-reverse;
            min-height: 100dvh;
            margin: 0;
            position: relative;
            width: 100%;
        }

        header {
            container-name: header;
            container-type: inline-size;
            font-family: twcenmt, bebas-rg, Arial, Helvetica, sans-serif;
            font-size: clamp(14px, 1.5vw, 30px);
            font-weight: normal;
            height: 90dvh;
            margin: 0;
            mix-blend-mode: color-burn;
            overflow-y: auto;
            padding: 0 3vw 0 0;
            position: absolute;
            left: 73vw;
            top: 2dvh;
            text-align: right;
            text-transform: uppercase;
            width: 23vw;
        }

        header h1 {
            color: hsl(0, 0%, 10%);
            font-family: twcenmt, bebas-rg, Arial, Helvetica, sans-serif;
            font-size: clamp(20px, 3vw, 90px);
            font-weight: normal;
            line-height: 1;
            margin: 0;
            padding: 0;
            text-wrap: nowrap;
        }

        header h1 span {
            font-size: clamp(18px, 1.5vw, 45px);
            display: block;
            line-height: 1;       
            margin-bottom: -3vw;
        }

        @container header (max-width: 155px) {
            header h1 span {
                margin-bottom: -1.25em;
            }
        }

        header h1 a, header h1 a:active, header h1 a:visited {
            color: hsl(0, 0%, 7%);
            text-decoration: none;
            transition: all 0.333s ease-in-out;
        }

        header section h1 a:active,  header section h1 a:hover {
            color: hsl(0, 0%, 0%);
            transition: all 0.333s ease-in-out;
        }

        header h2 {
            color: hsl(0, 0%, 0%);
            font-size: clamp(14px, 1vw, 20px);
            letter-spacing: 0.3px;
            margin: 0;
            opacity: 1;
            padding: 0 0 1.5vw 0;
        }

        main h2 {
            color: hsl(0, 0%, 10%);
            font-family: twcenmt, bebas-rg, Arial, Helvetica, sans-serif;
            font-size: clamp(25px, 3vw, 70px);
            font-weight: normal;
            margin: 0;
            mix-blend-mode: color-burn;
            padding: 0;
            text-transform: uppercase;
        }

        main h3 {
            color: hsl(0, 0%, 0%);
            font-family: twcenmt, bebas-rg, Arial, Helvetica, sans-serif;
            font-size: clamp(25px, 3vw, 70px);
            font-weight: normal;
            margin: 2vw 0 0 0;
            padding: 0;
            text-transform: uppercase;
        }
        
        main h3 + p {
            margin-top: 0;
        }

        header h3 {
            color: hsl(0, 0%, 0%);
            font-size: clamp(20px, 2.5vw, 56px);
            margin: 0;
            padding: 0;
        }

        header h3 a, header h3 a:active, header h3 a:visited {
            color: hsl(0, 0%, 2%);
            text-decoration: none;
            transition: all 0.333s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        header h3 a:hover {
            margin-right: 2vw;
            opacity: 1 !important;
        }

        header h3:has(a:hover) a {
            opacity: 0.25;
        }

    
        main {
            box-sizing: border-box;
            flex-grow: 1;
            font-size: clamp(18px, 1.75vw, 40px);
            line-height: 1.5; 
            margin: 6vw 4vw 4vw 2vw;
            min-height: 100vh;
            padding: 0;
            position: relative;
            width: auto;
            width: 75vw;
        }

        main p {
            margin: clamp(2vw, calc(2vw + (1100px - 100vw) * 0.03), 5vw) 0;
        }

        main a {
            background-color:  hsla(0, 0%, 100%, 0.25);
            border-bottom: 1px solid hsl(316, 100%, 11%);
            color: hsl(316, 100%, 11%);
            text-decoration: none;
            transition: all 0.333s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        main a:hover {
            background-color:  hsla(0, 0%, 100%, 1);
            border-bottom: 1px solid hsl(316, 100%, 11%);
            color: hsl(316, 100%, 11%);
            text-decoration: none;
        }

        main .intro {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1vw;
        }

        @media (max-width: 750px) {
            main .intro {
                grid-template-columns: 1fr;
                gap: 1vw;
            }
        }

        .fade-out, .content.fade-out {
            aspect-ratio: 1/1;
            width: var(--content-size);
            opacity: 0;
            left: 6vw;
            top: 6vw;
            transition: all 0.333s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        .images.fade-out {
            width: 0;
            height: 0;
            opacity: 0;
            transition: all 0.333s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            
        }

        .fade-in, .content.fade-in {
            aspect-ratio: 1/1;
            width: clamp(300px, 48vw, 2000px);
            opacity: 1;
            left: 2vw;
            top: 30vw;
            transition: all 0.333s ease-in;
        }

        h4 {
            font-size: clamp(20px, 2vw, 30px);
            font-weight: normal;
            line-height: 1;
            margin: 0;
            opacity: 0.75;
            padding: 0;
            text-align: left;
            text-transform: uppercase;
            text-wrap: nowrap;
        }

        ul {
            display: block;
            margin: 0;
            padding: 0;
        }

        ul li {
            display: block;
            margin: 1vw 0;
            padding: 0;
        }
            
        nav a,
        nav a:visited {
            color: hsl(0, 0%, 15%);
            text-decoration: none;
            transition: all 0.333s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        nav a:hover {
            font-size: clamp(24px, 3vw, 66px);
            margin-right: 1vw;
            opacity: 1 !important;
        }

        nav:has(a:hover) a {
            opacity: 0.25;
        }

        .next_prev {
            text-align: center;
        }

        .all_text a {
            color: #333;
            text-transform: uppercase;
            transition: all 0.333s ease-in-out;
        }

        .all_text a:hover {
            color: #000;
        }

        .next_prev a {
            color: #333;
            font-size: 0.9em;
            text-transform: uppercase;
            transition: all 0.333s ease-in-out;
        }

        .next_prev a:hover {
            color: #000;
        }

        .images {
            position: relative;
            left: 2vw;
            top: 2vw;
            width: calc(var(--content-size) * 0.6);
        } 

        .images img.vespa {
            margin: -1% 0 0 20%;
            position: absolute;
            width: 57%;
        }

        .em-address {
            hyphens: none; 
            word-break: keep-all;
        }

        .em-address:before {
            content: attr(data-website) "\0040" attr(data-user);
            direction: rtl;
            unicode-bidi: bidi-override; 
        }

        #contact .text {
            text-align: center;
        }

        #imageContainer {
            position: relative;
        }

        #imageContainer img {
            margin: 24% 0 0 0;
            position: absolute;
            opacity: 0;
            transition: opacity 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            width: 26%;
        }

        #imageContainer img.active {
            opacity: 0.9;
        }

       #spanContainer {
            position: relative;
        }

        #spanContainer span {
            display: block;
            margin: 0;
            position: absolute;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            width: 100%;
        }

        #spanContainer span.active {
            opacity: 0.9;
        }

        #spanContainer span img:nth-child(1) {
            margin: 46% 0 0 0;
            width: 17%;
            position: absolute;
        }

        #spanContainer span img:nth-child(2) {
            margin: 45% 0 0 15%;
            width: 26%;
            position: absolute;
        }

        #spanContainer span img:nth-child(3) {
            margin: 39% 0 0 63%;
            width: 20%;
            position: absolute;
        }

        #spanContainer span img:nth-child(4) {
            margin: 50% 0 0 45%;
            width: 27%;
            position: absolute;
        }

        :focus {
            outline: none;
        }

        :focus-visible {
            outline: 0.125rem solid #000; 
            outline-offset: 0.25rem;
        }

           
        .fade-in, .content.fade-in {
            top: 2vw;
            width: var(--content-size);
        }

        .text {
            width: calc(var(--content-size) - 9vw); 
        }

        .small {
            font-size: clamp(12px, 1vw, 28px);
        }

        .orb {
            border-top: 1px solid hsla(190, 100%, 50%, 0.25);
            display: grid;
            grid-template-areas: "stack";
            height: 1vh;
            inline-size: min(100%, 100%);
            opacity: 0.75;

            &::before,
            &::after {
                content: "";
                display: block;
                grid-area: stack;
                width: 100%;
                height: 100%;
                transform: translateZ(0);
            }

  &::before {
    background: conic-gradient(
        from calc(var(--angle) * 10) at 25% 70%,
        var(--c3),
        transparent 20% 80%,
        var(--c3)
      ),
      conic-gradient(
        from calc(var(--angle) * 8) at 45% 75%,
        var(--c2),
        transparent 30% 60%,
        var(--c2)
      ),
      conic-gradient(
        from calc(var(--angle) * -7) at 80% 20%,
        var(--c1),
        transparent 40% 60%,
        var(--c1)
      ),
      conic-gradient(
        from calc(var(--angle) * 5) at 15% 5%,
        var(--c2),
        transparent 10% 90%,
        var(--c2)
      ),
      conic-gradient(
        from calc(var(--angle) * 3) at 20% 80%,
        var(--c1),
        transparent 10% 90%,
        var(--c1)
      ),
      conic-gradient(
        from calc(var(--angle) * -7) at 85% 10%,
        var(--c3),
        transparent 20% 80%,
        var(--c3)
      ),
      conic-gradient(
        from calc(var(--angle) * 1) at 55% 30%,
        var(--c4),
        transparent 20% 80%,
        var(--c4)
      );
        box-shadow: inset var(--bg) 0 0 5vmin 1vmin;
        filter: contrast(5);
        animation: rotate 50s linear infinite;
  }

  &::after {
        --dot: 1.5px;
        background-image: radial-gradient(
        circle at center,
        var(--bg) var(--dot),
        transparent var(--dot)
        );
        background-size: calc(var(--dot) * 2) calc(var(--dot) * 2);
        mask-image: radial-gradient(black 25%, transparent 75%);
        backdrop-filter: contrast(10);
        mix-blend-mode: overlay;
        }
    }

.sr-only {
  font-size: 0.01px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform: translate(-10000px, -10000px) !important;
  width: 0.01px !important;
  height: 0.01px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  visibility: hidden !important; 
  opacity: 0 !important;         
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-200%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  z-index: 1000;
}

.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  outline: 2px solid #fff;
  clip: auto;
  white-space: normal;
  border-radius: 0.25rem;
}

        @media (prefers-reduced-motion: reduce) {
                *,
                *::before,
                *::after {
                    animation-duration: 0.001ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.001ms !important;
                }

                html {
                    animation: none !important;
                    background: none !important;
                }

                #imageContainer img,
                #spanContainer span {
                    animation: none !important;
                    transition: none !important;
                }
            }