body {
    background-color: rgb(0, 54, 54);
}

.starburst {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80vmin;
    aspect-ratio: 1;

    background-color: rgb(121, 17, 17);
    mix-blend-mode:screen;
    clip-path: polygon(100.00% 50.00%,78.19% 60.26%,88.30% 82.14%,65.00% 75.98%,58.68% 99.24%,44.79% 79.54%,25.00% 93.30%,27.02% 69.28%,3.02% 67.10%,20.00% 50.00%,3.02% 32.90%,27.02% 30.72%,25.00% 6.70%,44.79% 20.46%,58.68% 0.76%,65.00% 24.02%,88.30% 17.86%,78.19% 39.74%);
}

.starburst1 {
    animation: rotate-z 20s linear 0s infinite normal;
}

.starburst2 {
    animation: rotate-z 20s linear 0s infinite reverse;
}

.rotate {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    animation: rotate-x 12s cubic-bezier(.4, 0, .6, 1) 2s infinite normal;
}

.subject {
    position: fixed;
    transform: translate(-50%, -50%);
    width: 60vmin;

    animation: updown 5s ease-in-out 0s infinite alternate;
}

.snow {
    position: fixed;
    top: -10px;

    width: 20vmin;
    height: 20vmin;

    z-index: -1;

    pointer-events: none;

    background-image: url(./assets/sprite.png);
    background-repeat: no-repeat;
}

@keyframes updown {
    0%   { margin-top: -7vmin; }
    50%  { margin-top: 7vmin; }
    100% { margin-top: -7vmin; }     
}

@keyframes rotate-x {
    0%   { transform: scale(1, 1); }
    50%  { transform: scale(-1, 1); }
    100% { transform: scale(1, 1); }
}

@keyframes rotate-z {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    50%  { transform: translate(-50%, -50%) rotate(180deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}