body {
        background-image: url("dither_it_image.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
        text-align: center;
        cursor: url(cursor.png), auto;}

@font-face {
    font-family: "Dum";
    src: url("dum1.ttf") format("truetype");
    font-style: normal;
    font-weight: thin;}
    
        
.container-1 {
  margin-top: -50px;
  color: black;
  font-family: Dum;
  font-size: 50px;
  -webkit-text-stroke: 0.05px yellow;
}
  
.image1{
  position: absolute;
  left: 480px;
  opacity: 0;}
  
.image2{
  position: absolute;
  right: 480px;
  opacity: 0;}

  
.image3{
  position: absolute;
  top: 350px;
  left: 675px;}
  
.image4 {
  position: absolute;
  width: 100px;
  top: 650px;
  left: 900px;}
  
.toggle-checkbox1 {
    display: none;
}

.trigger-image1 {
    display: block;
    cursor: pointer;
}

.image6 {
  position: absolute;
  width: 50px;
  top: 450px;
  left: 840px;
  opacity: 1;
  opacity: 0;}
  
.image7 {
  position: absolute;
  width: 50px;
  top: 450px;
  left: 640px;
  opacity: 1;
  transform: scaleX(-1);
  opacity: 0;}
  
.image8 {
  position: absolute;
  width: 50px;
  top: 570px;
  left: 840px;
  opacity: 1;
  transform: scaleY(-1);
  opacity: 0;}
  
.image9 {
  position: absolute;
  width: 50px;
  top: 570px;
  left: 640px;
  opacity: 1;
  transform: scaleX(-1) scaleY(-1);
  opacity: 0;}
  
.image10 {
  position: absolute;
  width: 50px;
  top: 450px;
  left: 670px;
  z-index: 2;
  opacity: 0;
}

.image11 {
  position: absolute;
  width: 50px;
  top: 450px;
  left: 800px;
  z-index: 2;
  opacity: 0;
}
#toggleText:checked ~ .image1 {
    opacity: 1; 
}

#toggleText:checked ~ .image2 {
    opacity: 1; 
}

#toggleText:checked ~ .image6 {
    opacity: 1; 
}

#toggleText:checked ~ .image7 {
    opacity: 1; 
}

#toggleText:checked ~ .image8 {
    opacity: 1; 
}

#toggleText:checked ~ .image9 {
    opacity: 1; 
}

#toggleText:checked ~ .image10 {
    opacity: 1; 
}

#toggleText:checked ~ .image11 {
    opacity: 1; 
}



#draggable {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
  
  