/* -----------------------  ALLGEMEIN -----------------------> */

        *{
            box-sizing: border-box;
            margin: 0;
             padding: 0;
        }
        @font-face {
            font-family:'brr' ;
            src: url(img/BRRREDU-Medium.otf);
        }
        @font-face {
            font-family: 'Skyline';
            src: url(NewParisEDUSkyline-Regular.otf);
        }


        body{
            margin:0;
            width: 100vw;
            height: 200vh;
            overflow-x: hidden;
            display: block;
            mix-blend-mode: difference;
            
        }

        html{
        scroll-behavior: smooth;
        }

/* -----------------------  ALLGEMEIN -----------------------> */


/* -----------------------  LANDING PAGE -----------------------> */
    .landingPage{
          width: 100vw;
        z-index: 0;
         
      }

      p{
          position: relative;
          color: rgb(0, 0, 0);
           font-family: 'Skyline';
           font-size: 1.1rem;
           bottom: 3rem;
           margin: auto;
           width: 10rem;
      }

        canvas{
            width: 100vw;
            height: 100vh;
            font-family: 'brr';
            background-color: white;
           
        }
/* -----------------------  LANDING PAGE -----------------------> */

/* -----------------------  MENU - CONTENT -----------------------> */

        a {
        display: block;
        text-decoration: none;
        }

        nav{
           
            position: relative;
            width: 100vw;
            height: 100vh;
            margin: 0; padding: 0;
            mix-blend-mode: normal;
        }
            .loop-holder {
            width: 99.2vw;
            height: 25vh;
            display: flex;
            align-items: center;
            white-space: nowrap;
            border: black solid 5px;
            margin: 0;
            padding: 0;
            padding-bottom: 2rem;
                background-color: white;
            color: rgb(255, 255, 255);
            -webkit-text-stroke-width: 3px;
            -webkit-text-stroke-color: rgb(0, 0, 0);
            }

            .loop-holder__text {
                animation: textLoop 15s linear reverse infinite;
                font-size: 8vw;
                font-family: 'brr';
                padding-right: .35em;
            }

            /* .loop-holder:hover  .loop-holder__text{
                animation: freeze;
                color: white;
                border: 0px;

                color: rgb(0, 0, 0);
            -webkit-text-stroke-width: 3px;
            -webkit-text-stroke-color: rgb(0, 0, 0);
            } */

             .loop-holder:hover  .loop-holder__text{
                animation: textLoop 15s linear infinite;
    
                color: rgb(0, 0, 0);
            -webkit-text-stroke-width: 3px;
            -webkit-text-stroke-color: rgb(255, 255, 255);
            }

            .loop-holder:hover{
                background-color: black;
            }


        @keyframes textLoop {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0)
            }
        }

/* -----------------------  MENU - CONTENT -----------------------> */

/* ----------------------- CURSOR -----------------------> */
        #cursor{
            position: fixed;
            width: 50px;
            height: 50px;
            border: 1px solid white;
            box-sizing: border-box;
            transition: 0.2s;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            cursor: none;
            z-index: 3;

            mix-blend-mode: difference;  
        }

        #outerCursor{
           position: fixed;
            width: 30px;
            height: 30px;
           
            background-color: white;
            box-sizing: border-box;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            cursor: none;
            z-index: 3;

            mix-blend-mode: difference;  
        }

        .element.style{
            opacity: 0;
            transform: matrix(0, 0, 0, 0, 1062, 896);
        }

        
        #cursor-follower{
            position: fixed;
            width: 60px;
            height: 60px;
            pointer-events: none;

        }

        #cursor-follower{
            mix-blend-mode: difference;
        }
/* <----------------------- CURSOR ----------------------- */