.scrollable-container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.blurred-bw {
    filter: grayscale(90%) blur(1px);
}

.zigzag-layout {
    display: grid;
}

.star-image0 {
    filter: grayscale(100%) opacity(0.5);
}

.star-image1 {}

.scaled-image {
    animation: pulsate 2s ease-in-out infinite;
}

@keyframes pulsate {

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

    50% {
        transform: scale(1.1);
    }
}

.score-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    animation: scoreAnimation 2s forwards;
    z-index: 9999;
}

@keyframes scoreAnimation {
    0% {
        opacity: 0.5;
    }

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

    95% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(45vw, -45vh) scale(3);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(45vw, -45vh) scale(3);
    }
}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes rotate {
    0% {
        stroke-dashoffset: 440;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.progress-ring__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 440;
    transition: stroke-dashoffset 0.1s linear;
  }
  
  .rainbow {
    stroke: url(#gradient);
  }