html, body, main, button {
    margin: 0px;
    padding: 0px;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-image: url("resources/swelvybg-top.svg");
    background-repeat: no-repeat;
    background-position-y: -75px;
    background-size: 100%;
}

.swelvybg-bottom {
    width: 100%;
}

main {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    align-items: center;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}

.overlay {
    position: relative;

    & > * {
        position: absolute;
    }
}

button {
    cursor: pointer;
    background: transparent;
    border: none;
}

@keyframes screenshot-animation {
    /* why does this use em */
    /* scale adjusted from geode */

    from {
        transform: translate(3em, -2em) scale(1) rotate(-15deg);
    }

    to {
        transform: translate(3em, -2em) scale(0.9) rotate(-10deg);
    }
}

@keyframes mod-icon-animation {
    /* why does this also use em */

    from {
        transform: translate(-0.5em) rotate(0deg) scale(0.8);
    }

    to {
        transform: translate(-0.25em) translateY(0.25em) rotate(5deg) scale(0.7);
    }
}

@keyframes spinny {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(3turn);
    }
}

.globed-animate {
    animation: 6s ease-in-out both alternate infinite -2s screenshot-animation;
    translate: -30px -20px;
}

.modinfopopup-animate {
    animation: 6s ease-in-out both alternate infinite screenshot-animation;
    translate: 120px 90px;
    opacity: .7;
    rotate: 20deg;
    scale: .7;
}

.betteredit-icon-animate {
    animation: 3s ease-in-out both alternate infinite mod-icon-animation;
}

.megahack-icon-animate {
    /* animation: 3s ease-in-out both alternate infinite -1s mod-icon-animation-2; */
}

.globed-icon-animate {
    animation: 3s ease-in-out both alternate infinite -2s mod-icon-animation;
}

.spin:hover {
    animation: 2s cubic-bezier(0.73, 0, 0.25, 1) both alternate infinite spinny;
}

.overlay-top-left {
    position: fixed;
    left: 20px;
}

.overlay-top-right {
    position: fixed;
    right: 20px;
}

.overlay-top-left, .overlay-top-right {
    top: 20px;

    display: flex;
    flex-direction: row;
    gap: 30px;
}

@keyframes flashbang {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.soggy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none;

    opacity: 0;
    animation: flashbang 1s linear;
}