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


    :root{
      --fontFamily:'simplonItalic';
      --fontButton:'Skyline';
      --fontMenu:'brr' ;
      --fontSimplon:'simplonMedium';
    }
    @font-face {
      font-family: 'brr';
      src: url(img/BRRREDU-Medium.otf);
    }
  
    @font-face {
      font-family: 'Skyline';
      src: url(../process/img/NewParisEDUSkyline-Regular.otf);

    }

    *{
            cursor: none;
    }

    
    body{
            background-color: black;
            box-sizing: border-box;
            margin: 0;  
            width: 100vw;
            height: 100vh; 
            overflow: hidden;
            
            /* background-image: url(https://image.freepik.com/fotos-kostenlos/raum-mit-konkretem-boden-und-rauch-mit-licht-von-den-scheinwerfern-hintergrund_9083-2993.jpg); */
          
            background-size:100%;
            background-position-x: center;
            background-position-y: center;

           
     }

     body.playing{
        background-image: url(https://static.y8.com/cloud/y8-thumbs/26108/video_thumbnail.jpg);
            background-size:100%;
            background-position-x: center;
     }


/* 
    body:after{
      content: '';
      display: block;
      position: absolute;
      width: 60vw;
      height: 70vh;
      top: 10vh;
      left:20vw;
      background: linear-gradient(-45deg, #c20ac9, #33348b, #140169, #000000);
      background-size: 400% 400%;
      animation: gradient 10s ease infinite;
      border-radius: 2%;
      z-index: -1;
      box-shadow: 0px 0px 100px 10px #31155e;
          } */

      

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


    nav {
      position: fixed;
      width: 10vw;
      height: 10vh;
      left: 0;
      right: 0;
      margin: 0;
      padding: 0;
      z-index: 2;
    }
/* ----------------------- ALLGEMEIN -----------------------> */

/* ----------------------- CURSOR -----------------------> */
        #cursor{
            position: absolute;
            width: 50px;
            height: 50px;
            /* background-color: rgb(255, 255, 255); */
            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: absolute;
            width: 30px;
            height: 30px;
            /* border: 1px solid white; */
            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 ----------------------- */



/* ---------------------- ROBOT ----------------------> */
:root{
  --robotColor: rgb(255, 255, 255);
}
        .robot {
            border: 0px solid #de9c9c;
            padding: 1rem;
            position: relative;
            width: 400px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            /* top: 120vh; */
            top: 28vh;

           

          animation: danceDown infinite 0.48s ease-in-out;

        }

         .head{
          position: absolute;
          width: 100px;
          height: 100px;
          top: 70px;
          justify-content: center;
          display: flex;
          
          /* background-image: url(../process/img/1_Random.svg); */           
          background-image: url(https://media0.giphy.com/media/zcZ1YVAWa42OgipIKb/giphy.gif?cid=ecf05e47oprnjmr94iys0eorhiajp9mixwbrd6ckahwjsqr0&rid=giphy.gif&ct=s);
          background-image: url(img/heart.png);
          background-size:100%;
          background-position-x: center;
          background-position-y: center;

          
        }

/* @keyframes changeBg{
   0%, 45%, 100%  {background-image: url("img/kopfHerz.png");
         }
    
   
   50%, 95% {background-image: url("img/kopfKopf.png");
        background-size: 100%;}
} */

        

         .body{
          border: 3px solid #000000;
          position: absolute;
           width: 130px;
          height: 130px;
          top: 170px;
          border-radius: 30%; 
          background: var(--robotColor);
          clip-path: polygon(100% 0, 82% 54%, 100% 100%, 0% 100%, 17% 50%, 0% 0%) ;

          /* animation: danceDown infinite 0.48s ease-in-out;
          transform-origin: top; */
        }

        .playing .body {
        animation: danceDown infinite 0.48s ease-in-out;
          transform-origin: top;
        }


          @keyframes danceDown {
          0%{
               transform: translate(0px);
          }
          
          70%{
              transform: translate(0px, 20px);
              
          }
          
          0%{
               transform: translate(0px);
          }
        }
       

         .arm{
           border: 3px solid #000000;
          position: absolute;
          width: 30px;
          height: 65px;
          border-radius: 50%; 
          background: var(--robotColor);

         
        }

        .arm--left{
          left: 120px;
          top: 190px;
          border-top-left-radius: 60%;

          /* animation: armDanceLeft infinite 3s ease-in-out;
          transform-origin: top right; */

        }

        .playing .arm--left{
        animation: armDanceLeft infinite 3s ease-in-out;
          transform-origin: top right;
        }

         @keyframes armDanceLeft {
          0%{
              transform: rotate(0deg);
          }
          25%{
              transform: rotate(90deg);
          }
          
          0%{
              transform: rotate(0deg);
          }
        }


        .arm--right{
          right: 120px;
          top: 190px;
          border-top-right-radius: 60%;

          /* animation: armDanceRight infinite 3s ease-in-out;
          transform-origin: top left; */

        }

        .playing .arm--right{
        animation: armDanceRight infinite 3s ease-in-out;
          transform-origin: top left;
        }

 @keyframes armDanceRight {
          0%{
              transform: rotate(0deg);
          }
          25%{
              transform: rotate(-90deg);
          }
          
          0%{
              transform: rotate(0deg);
          }
        }
       
        .hand{
          border: 3px solid #000000;
          position:absolute;
          width: 30px;
          height: 65px;
          bottom: -65px;    
          margin-bottom: -3px; 
          border-radius: 50%;  
          
          background: var(--robotColor);
        }

        .arm--left .hand{
          right: 0;
          margin-right: -3px; 
/* 
          animation: armDanceLeft1 infinite 2s ease-in-out;
          transform-origin: top; */
        }

        .playing .arm--left .hand{
        animation: armDanceLeft1 infinite 2s ease-in-out;
          transform-origin: top;
        }

         @keyframes armDanceLeft1 {
          0%{
              transform: rotate(0deg);
          }
          25%{
              transform: rotate(360deg);
          }
          75%{
              transform: rotate(-360deg);
          }
          
          100%{
              transform: rotate(0deg);
          }
        }
         
        .arm--right .hand{
          left: 0;
           margin-left: -3px;  

           /* animation: armDanceRight1 infinite 2s ease-in-out;
          transform-origin: top; */
        }

        .playing .arm--right .hand{
        animation: armDanceRight1 infinite 2s ease-in-out;
          transform-origin: top;
        }

              @keyframes armDanceRight1 {
          0%{
              transform: rotate(0deg);
          }
          25%{
              transform: rotate(-360deg);
          }
          75%{
              transform: rotate(360deg);
          }
          
          100%{
              transform: rotate(0deg);
          }
        }
         


        .foot{
          border: 3px solid #000000;
          position:absolute;
          width: 30px;
          height: 80px;
          bottom: -80px;  
          margin-bottom: -3px;  
          border-radius: 50%; 
          background: var(--robotColor);
        }

        .leg{
          border: 3px solid #000000;
          background: var(--robotColor);
          position: absolute;
          width: 30px;
          height: 80px;
          bottom: 40px;
          border-radius: 50%; 
          
        }

        .leg--left{
          left: 155px;

           /* animation: legDanceLeft infinite 2s ease-in-out;
          transform-origin: top; */
        }

         .playing .leg--left{
        animation: legDanceLeft infinite 2s ease-in-out;
          transform-origin: top;
        }

         @keyframes legDanceLeft {
          0%{
              transform: rotate(0deg);
          }
           25%{
              transform: rotate(40deg);
            
          }
          50%{
              transform: rotate(-40deg);
            
          }
          75%{
              transform: rotate(-40deg);
            
          }
          
          100%{
              transform: rotate(0deg);
          }
        }

        .leg--right{
          right: 155px;

          /* animation: legDanceRight infinite 2s ease-in-out;
          transform-origin: top; */
        }

        .playing .leg--right{
        animation: legDanceRight infinite 2s ease-in-out;
          transform-origin: top;
        }

          @keyframes legDanceRight {
          0%{
              transform: rotate(0deg);
          }
           25%{
              transform: rotate(-40deg);
            
          }
          50%{
              transform: rotate(40deg);
            
          }
          75%{
              transform: rotate(-40deg);
            
          }
          
          100%{
              transform: rotate(0deg);
          }
        }

        .leg--left .foot{
          right: 0;
           margin-right: -3px;  

           /* animation: legDanceLeft1 infinite 2s ease-in-out;
          transform-origin: top; */
        }
        
        .playing .leg--left .foot{
        animation: legDanceLeft1 infinite 2s ease-in-out;
          transform-origin: top;
        }
        
          @keyframes legDanceLeft1 {
          0%{
              transform: rotate(0deg);
          }
          35%{
              transform: rotate(-60deg);
          }
          75%{
              transform: rotate(60deg);
          }
          
          100%{
              transform: rotate(0deg);
          }
        }
         
        .leg--right .foot{
          left: 0;
          margin-left: -3px;  

           /* animation: legDanceLeft1 infinite 2s ease-in-out;
          transform-origin: top; */
        }

         .playing .leg--right .foot{
        animation: legDanceLeft1 infinite 2s ease-in-out;
          transform-origin: top;
        }




       
/* <---------------------- ROBOT ---------------------- */



/* ---------------- THE OVERLAY - MENU ---------------->  */
        .overlay {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */   
        height: 100%;
        width: 0;
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        background-color: rgb(0, 0, 0); /* Black fallback color */
        background-color: rgb(0, 0, 0); /* Black w/opacity */
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
        }

        /* Position the content inside the overlay */
        .overlay-content {
        background-color: black;
        position: relative;
        /* 25% from the top */
        width: 100%; /* 100% width */
        text-align: start; /* Centered text/links */
        margin-top: 8vh; /* 30px top margin to avoid conflict with the close button on smaller screens */
        }

        /* The navigation links inside the overlay */
        .overlay a {
        padding: 0px;
        text-decoration: none;
        font-size: 36px;
        color: #000000;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
        display: flex;
        align-items: center;
        padding-left: 1rem;
         width: 100%;
        }

        /* When you mouse over the navigation links, change their color */
        .overlay .menu:hover, .overlay .menu:focus {
        background-color: black;
        color: white;
         background-image: url(https://i.pinimg.com/originals/f5/f3/27/f5f327dc0b3619d95f20eba2d71aec78.gif);
            /* background-image: url(https://i.pinimg.com/originals/13/7b/26/137b2650381f68239e643ed58dfc8777.gif); */
            background-size: 110%;
        }

       /* Position the close button (top right corner) */
        .overlay .closebtn {
        position: absolute;
        right: 1rem;  top: 1rem;
        fill: rgb(255, 255, 255); 
        transform: rotate(45deg);
        transform-origin: center; 
        }

        .closebtn:hover{
           transform: rotate(225deg);
           transition: ease-in-out 0.25s;
        }

        .openbutton{
         fill: rgb(255, 255, 255); 
        position: absolute;
        transform-origin: center;
        left: 1rem;
        top: 1rem;
        }
       
         .openbutton, .closebtn{
            width: 30px;
            height: 30px;
   
         }
        .openbutton:hover {
            transform: rotate(180deg);
           transition: ease-in-out 0.25s;
           transform-origin: center;
        }

    /* OVERLAY TEXT */
        .menu{
            width: 38.5vw;
            height: 20vh;
            padding-left: 3rem;
            border: black solid 6px;
            border-left: none;
            margin: 0;
            text-decoration: none;
            color: black;   
            font-family: var(--fontMenu);
            font-size: 500px;
            background-color: white;
            
        }
        .home1{
            border-bottom: none;
        }
        .song1{
            border-bottom: none;
        }
        .robot1{
            border-bottom: none;
              color: rgb(0, 0, 0);
                
        }

  /* .robot1{
          -webkit-text-stroke-width: 1px;
          -webkit-text-stroke-color: rgb(0, 0, 0);
             background-image: url(https://i.pinimg.com/originals/f5/f3/27/f5f327dc0b3619d95f20eba2d71aec78.gif);
             background-size: 100%;
        } */

/* <----------------THE OVERLAY - MENU----------------*/


/* ----------------------- MOVE ON MUSIC -----------------------> */
      :root {
        /*************************** Page-wide variables ****************************/
        --scalesize: 2;
            --fontButton:'Skyline';
        /* diese Variable wird über JavaScript abhängig von der Lautstärke gesetzt*/
      }



      section {
        position: sticky;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 1rem;
        font-family: 'Montserrat', sans-serif;
        color: white;
      font-family: var(--fontButton);
      font-size: 1.5rem;
        margin: auto;
        width: 18rem;
        height: 3rem;
      }
      section:hover{
        transform: skewX(10deg);
      font-weight: bold;
        /* box-shadow: 10px 0px 100px 100px #ff00f2; */
      }
     /* @keyframes button {
        0%{
          transform: translate(0, 0px);
        }
        50%{
          transform: translate(0, -5px);
        }
      } */

      .head {
        transform: scale(var(--scalesize));

      }

      /* some fun with pseudo elements */

      .head:before {
        content: '';
        display: block;
        position: absolute;
        width: 20rem;
        height: 20rem;
        bottom: -8rem;
        border-radius: 300px;
        box-shadow: 0px 0px 100px 10px #ffffff;
      }

      .button {
        cursor: pointer;
      
      }

      button{
        position: absolute;
        top: 10rem;
        left: 10rem;
      }

         .playing .trigger::after {
      content: 'Stop! ';
       margin-left: 0.3rem;
    }
    
    .paused .trigger::after {
      content: 'Dance! ';
       margin-left: 0.3rem;

    }




  /* ----------------------- MOVE ON MUSIC -----------------------> */