@font-face {
    font-family: 'Mamma Mia';
    src: url('/mamma-mia/che-stronzo.otf') format('opentype');
}

.shrek {
    width: 1938px;
    height: 300px;
}

.jesuss {
    filter: invert(100);
    height: 2000px;
    width: 500px;
}

@keyframes rainbow {
    0% {
        background-color: red;
    }

    16.666% {
        background-color: orange;
    }

    33.333% {
        background-color: yellow;
    }

    50% {
        background-color: green;
    }

    66.666% {
        background-color: blue;
    }

    83.333% {
        background-color: indigo;
    }

    100% {
        background-color: violet;
    }
}

body {
    animation: rainbow 0.2s infinite;
    /* Adjust duration as needed */
}

@keyframes fly {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(50%, -50%);
    }

    50% {
        transform: translate(100%, 0);
    }

    75% {
        transform: translate(50%, 50%);
    }

    100% {
        transform: translate(0, 0);
    }
}

.flyingdaddy {
    position: fixed;
    width: 500px;
    /* Adjust the width and height of the image as needed */
    height: 1000px;
    top: 10%;
    /* Start from the middle of the window */
    left: 10%;
    transform: translate(-110%, -50%);
    animation: fly 10s infinite linear;
    /* Adjust duration and animation timing as needed */
    z-index: 0;
}

@keyframes cursed {
    0% {
        letter-spacing: 0;
        transform: rotate(0deg);
        opacity: 1;
    }

    25% {
        letter-spacing: 8px;
        transform: rotate(-5deg);
        opacity: 0.7;
    }

    50% {
        letter-spacing: -6px;
        transform: rotate(5deg);
        opacity: 0.5;
    }

    75% {
        letter-spacing: 10px;
        transform: rotate(-3deg);
        opacity: 0.3;
    }

    100% {
        letter-spacing: -12px;
        transform: rotate(3deg);
        opacity: 0.1;
    }
}

.cursed-text {
    position: absolute;
    animation: cursed 3s infinite linear alternate;
    color: white;
    font-weight: bolder;
    font-size: 8rem;
    z-index: 2;
}

.cursed-text::after {
    content: "indian jesuzz has rizzen";
}

@keyframes jumpscare {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

.thing {
    display: inline-block;
    /* or any other appropriate display value */
    position: relative;
}

.dayumn {
    height: 888px;
    width: 1000px;
    /* Adjust the width and height as needed */
    height: auto;
    animation: jumpscare 0.5s infinite;
    /* Adjust duration and animation timing as needed */
}

.popup {
    position: absolute;
    background-color: #f1f1f1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    pointer-events: none; /* Ensures the pop-up doesn't interfere with mouse events */
    font-size: 20px;
  }

  #color-box {
    width: 200px;
    height: 200px;
    background-color: #ff0000; /* Start with a red background */
    animation: rainbow 2s infinite;

  }
  
  button {
    margin-top: 10px;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid transparent; /* Start with a transparent border */
    border-radius: 5px;
    cursor: pointer;
    animation: zoomInOut 0.5s infinite alternate; /* Zoom animation */
    box-shadow: 0px 0px 100px 34px rgba(232, 16, 210, 1);
    background-color: #e810d2;
  }
  
  @keyframes zoomInOut {
    0% {
      transform: scale(1);
      border-color: red;
    }
    100% {
      transform: scale(2.5);
      border-color: #ff0000;
    }
  }