#logo {
        position: fixed;
        background: transparent;
        padding: 0;
        top: var(--space);
        left: var(--space);
        fill: var(--foreground);
        opacity: 1;
        filter: none;
        border-radius: 0;
        border: 0;
        z-index: 999 !important;
    }


    
    

        #logo svg {
            display: inline-block;
            fill: var(--foreground);
            height: var(--f_m);
            
        }
    
        #logo #arrow {
            transition: var(--ani-m) var(--easing)
        }
    
        #logo {--delay: 0.03s;}
    
        #logo #seb {
            overflow: hidden;
            margin-right: calc(var(--getouttheway) * 5.4);
            transition: var(--ani-s) var(--easing);
            transition-delay: var(--ani-s);
            
        }
    
        #logo #reed {
            overflow: hidden;
            margin-right: calc(var(--getouttheway) * 2);
            transition: var(--ani-s) var(--easing);
            transition-delay: var(--ani-s);
            
        }

        #logo #seb path:nth-child(n+2),
        #logo #reed path:nth-child(n+2) {
            opacity: 0;
            transition: opacity var(--ani-m) var(--easing);
        }
    
        
    
    /*  HOVER STATE   */
    
    #logo:hover {
        filter: none;
        border: 0;
    }


        #logo:hover svg {
            transition: var(--ani-m) var(--easing);
        }
    
    
        #logo:hover #arrow {
            transform: rotate(-45deg);
            
        }
    
        #logo:hover #seb{
            margin-right: 0;
            transition: var(--ani-s) var(--easing)
    
        }

        #logo #reed {
            overflow: hidden;
            margin-right: 0;
            transition: var(--ani-s) var(--easing);
            
            
        }
    
        #logo:hover #seb path:nth-child(n+0),
        #logo:hover #reed path:nth-child(n+0)
        {
            opacity: 1;
            transition-delay: calc(var(--ani-s) * 0.2);
        }


    #arrow {
        transform-origin: 50% 50%;
        animation: arrow 10s ease-in-out infinite;
        }
        @keyframes arrow {
    
        0% {
            transform: rotate(0deg);
        }
        
        12% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(90deg);
        }
    
        37% {
            transform: rotate(90deg);
        }
    
        50% {
            transform: rotate(180deg);
        }
    
        62%{
            transform: rotate(180deg);
        }
        
        75% {
            transform: rotate(270deg);
        }
        
        87% {
            transform: rotate(270deg);
        }
        
        100% {
            transform: rotate(360deg);
        }
        }