:root {
    --globe-top: 85%;
    --globe-size: 90vw;
    --globe-max-size: 500px;
    --globe-scale: 1;
    --ufo-top: 15%;
    --ufo-left: 10%;
    --ufo-size: 150px;
    --upvote-size: 25px;
    --shoot1-x: 40vw;
    --shoot1-y: 70vh;
    --shoot2-x: 38vw;
    --shoot2-y: 72vh;
    --shoot3-x: 42vw;
    --shoot3-y: 68vh;
}

body {
    margin: 0;
}

#globe {
    display: none;
    position: absolute;
    top: var(--globe-top);
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--globe-scale));
    width: var(--globe-size);
    height: var(--globe-size);
    max-width: var(--globe-max-size);
    max-height: var(--globe-max-size);
    z-index: 99;
    filter: grayscale(0.9);
}

.animation-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ufo {
    position: absolute;
    width: var(--ufo-size);
    top: var(--ufo-top);
    left: var(--ufo-left);
    transform: translate(-50%, -50%);
    z-index: 9990;
    animation: ufo-hover 5s ease-in-out infinite;
}

.upvote {
    position: absolute;
    width: var(--upvote-size);
    z-index: 5;
    opacity: 0;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    top: calc(var(--ufo-top) + 40px);
    left: calc(var(--ufo-left) - 15px);
}

.post-label {
    position: absolute;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10000;
}

.post-label .reddit-svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.upvote.v1 {
    animation-name: shoot1;
}

.upvote.v2 {
    animation-name: shoot2;
}

.upvote.v3 {
    animation-name: shoot3;
}

@keyframes shoot1 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--shoot1-x), var(--shoot1-y)) scale(0.5);
    }
}

@keyframes shoot2 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--shoot2-x), var(--shoot2-y)) scale(0.5);
    }
}

@keyframes shoot3 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--shoot3-x), var(--shoot3-y)) scale(0.5);
    }
}

@keyframes ufo-hover {
    0% {
        transform: translate(-50%, -50%) rotate(-2deg);
    }
    50% {
        transform: translate(-50%, -53%) rotate(2deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-2deg);
    }
}

@media (min-width: 768px) {
     :root {
        --globe-top: 75%;
        --globe-size: 600px;
        --globe-max-size: 600px;
        --ufo-top: 15%;
        --ufo-left: 10%;
        --ufo-size: 220px;
        --shoot1-x: 40vw;
        --shoot1-y: 60vh;
        --shoot2-x: 38vw;
        --shoot2-y: 62vh;
        --shoot3-x: 42vw;
        --shoot3-y: 58vh;
    }
}

@media (min-width: 1200px) {
     :root {
        --globe-top: 735px;
        --globe-size: 700px;
        --globe-max-size: 700px;
        --ufo-top: 15%;
        --ufo-left: 10%;
        --shoot1-x: 40vw;
        --shoot1-y: 53vh;
        --shoot2-x: 38vw;
        --shoot2-y: 55vh;
        --shoot3-x: 42vw;
        --shoot3-y: 51vh;
    }
    #globe,
    .animation-container {
        display: block;
    }
}

@media (max-height: 650px) {
     :root {
        --globe-scale: 0.8;
        --globe-top: 95%;
        --shoot1-y: 80vh;
        --shoot2-y: 82vh;
        --shoot3-y: 78vh;
    }
}

@media (min-height: 900px) and (max-width: 1199px) {
     :root {
        --globe-top: 60%;
        --shoot1-y: 45vh;
        --shoot2-y: 47vh;
        --shoot3-y: 43vh;
    }
}