@font-face { font-family: JMH Typewriter; src: url('fonts/JMH\ Typewriter.otf'); }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white; 
  }
  body{
    
    background-image: url("img/websitebg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0; 
    animation: fadeIn 10s ease forwards; 
  }
  
  .container{
    position: relative;
    width: 400px;
    height: 400px;
    margin: auto;
    opacity: 0; 
    animation: fadeIn 10s ease forwards; 
  }
  
  h1 {
    font-family: JMH Typewriter;
    font-size: 200px;
    color: white;
    text-align: center;
    position: absolute; 
    top:50%;
    /* transform-origin: 0 -200px;  */
  }

  .container h1:nth-of-type(1) { /*pink*/
    animation: rotateCircle2 15s linear infinite ; 
    /* transform: translate(-200px) rotate(0deg); */
  }
  
  .container h1:nth-of-type(2) {
    animation: rotateCircle1 15s linear infinite ;
    /*transform: translate(-200px) rotate(120deg);*/
  }
  
  .container h1:nth-of-type(3) { /*green*/
    animation: rotateCircle3 15s linear infinite ; 
    /* transform: translate(-300px) rotate(240deg); */
  }

  .container h1:nth-of-type(1):hover::before {
    content: "ook"; /* Change text content on hover */
}


.container h1:nth-of-type(2):hover::before {
    content: "isten"; /* Change text content on hover */
}


.container h1:nth-of-type(3):hover::before {
    content: "ove"; /* Change text content on hover */
}


.container h1::before {
    content: ""; /* Initial text content */
    display: block;
    position: absolute;
    top: 0px;
    left: 140px;
    right: 0px;
    text-align: center;
    font-size: 200px;
    color: inherit;
    transition: opacity 0.3s ease-in-out; /* Add transition effect */
    opacity: 0; /* Initially hide the text */
}

.container h1:hover::before {
    opacity: 1; 
}

/* .container h1::before {
    transition: opacity 0.3s ease-in-out;
} */
  
@keyframes rotateCircle1 {
    0% {
        transform: rotate(0deg) translate(200px) rotate(0deg);
      }
      100% {
        transform: rotate(360deg) translate(200px) rotate(-360deg);
      }
    }
@keyframes rotateCircle2 {
    0% {
        transform: rotate(120deg) translate(200px) rotate(-120deg);
    }
    100% {
        transform: rotate(480deg) translate(200px) rotate(-480deg);
    }
    }
@keyframes rotateCircle3 {
    0% {
        transform: rotate(240deg) translate(200px) rotate(-240deg);
    }
    100% {
        transform: rotate(600deg) translate(200px) rotate(-600deg);
    }
    }
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dimBG {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.25;
    }
}

    
    
    
    .container:hover h1 {
        animation-play-state: running; /* Resume the animation for all h1 elements when container is hovered */
    }
    
    .container h1:hover {
        animation-play-state: paused; /* Pause the animation for the hovered h1 element */
    }
    .container:hover {
        animation-play-state: running; /* Resume the animation for container when it is hovered */
    }
    

  h1 a {
    color: inherit; /* Inherit color from parent (white) */
    text-decoration: none; /* Remove underline */
  }
  
  h1 a:hover {
    color: inherit; /* Inherit color from parent (white) on hover */
    text-decoration: underline; /* Underline on hover */
  }