body{
    margin: 0;
    padding: 0;
  }

  .container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(4, 4, 193);
    z-index: -1;

    cursor: url('orange.png'), auto;
  }


img{
    width: 350px;
    position: absolute;
    display: flex; 
    justify-content: center; 
    align-items: center;
    margin-top: 540px;
    margin-left: 900px;

    cursor: pointer;
    cursor: url('reco.png') 0 75, pointer;


    transition: transform 0.2s ease-out; 
  }
      
      img:hover {
        transform: translateX(10px); 
      }

    
    

.img-1{
    width: 300px;
    position: absolute;
    margin-left: 580px;
    margin-top: 400px;
    animation-duration: 4s;
    animation-name:move;
    animation-iteration-count: infinite;
    animation-timing-function:cubic-bezier(0.77, 0, 0.175, 0.7);
    
    cursor: pointer;
    cursor: url('indie_1.png') 0 75, pointer;
  
  }


  .custom-cursor{
    cursor: url('Pfeil.png') 0 75, pointer;
  }
  .custom-cursor {
    cursor: url('uni_1.png') 0 75, pointer;
  }

  .custom-cursor{
    cursor: url('memo_1.png') 0 75, pointer;
  }

  .custom-cursor{
    cursor: url('deco_1.png') 0 75, pointer;
  }

  .custom-cursor{
    cursor: url('indie_1.png')0 75, pointer;
  }

  .custom-cursor{
    cursor: url('repe_1.png')0 75, pointer;
  }

  .custom-cursor{
    cursor: url('spec_1.png')0 75, pointer;
  }

  .custom-cursor{
    cursor: url('reco.png')0 75, pointer;
  }

  .custom-cursor{
    cursor: url('fun.png')0 75, pointer;
  }

  .custom-cursor{
    cursor: url('persoex.png')0 75, pointer;
  }

  

.img-2{
    width: 400px;
    position: absolute;
    margin-left: 100px;
    margin-top: 50px;
    cursor: pointer;
    cursor: url('uni_1.png') 0 75, pointer;

      
      transition: transform 0.2s ease-out; 
}
    
    .img-2:hover {
      transform: translateX(10px); 
    }
  


.img-3{
    width: 320px;
    margin-left: 600px;
    position: absolute;
    margin-top: 20px;

    animation-duration: 5s;
    animation-name:move;
    animation-iteration-count: infinite;
    animation-timing-function:cubic-bezier(0.5, 0, 0.10, 0.6);

  cursor: pointer;
    cursor: url('persoex.png') 0 75, pointer;
  
}

@keyframes move {
    0% {
      transform: translate(0%, 0px) rotate(50deg);
    }
    
    50% {
      transform: translate(100%, 0px) rotate(100deg);
    }
    
    100% {
      transform: translate(0%, 0px) rotate(100deg);
    }
}
    

.img-4{
    width: 250px;
    position: absolute;
    margin-left: 350px;
    margin-top: 350px;

    cursor: pointer;
    cursor: url('memo_1.png') 0 75, pointer;


    transition: transform 0.2s ease-out; /* fügt eine flüssige Animation hinzu */
  }
      
      .img-4:hover {
        transform: translateX(10px); /* bewegt das Bild 20px nach rechts, wenn der Mauszeiger darüber schwebt */
      }
  

    

.img-5{
    position: absolute;
    width: 300px;
    margin-left: 860px;
    margin-top: 280px;

  
  
  cursor: pointer;
    cursor: url('repe_1.png') 0 75, pointer;


}
 


.img-6{
    position: absolute;
    width: 350px;
    margin-top: 550px;
    margin-left: 40px;

    animation-name: move;
    animation-iteration-count: infinite;

    cursor: pointer;
    cursor: url('spec_1.png') 0 85, pointer;  

}


.img-7{
    position: absolute;
    width: 250px;
    margin-top: 300px;
    margin-left: 50px;
    animation-duration: 3s;
    animation-name: move;
    animation-timing-function:ease-in-out;
    animation-iteration-count: infinite;

    cursor: pointer;
    cursor: url('fun.png') 0 75, pointer;
   
}

@keyframes move {
    0% {
      transform: translate(0%, 0px) rotate(50deg);
    }
    
    50% {
      transform: translate(100%, 0px) rotate(100deg);
    }
    
    100% {
      transform: translate(0%, 0px) rotate(100deg);
    }
}



.img-8{
    position: absolute;
    width: 240px;
    margin-left: 1040px;
    margin-top: 80px;
    animation-duration: 3s;
    animation-name: move;
    animation-iteration-count: infinite;
    cursor: pointer;
    cursor: url('deco_1.png') 0 75, pointer;

  
}

@keyframes move {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  
  50% {
    transform: translate(10%, 0px) rotate(20deg);
  }
  
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

.img-9{
  position: absolute;
  width: 350px;
  margin-bottom: 1000px;
  margin-top: 10px;
  margin-left: 10px;

  cursor: url('Pfeil.png') 0 75, pointer;
}