/* 🌀 */
:root {
    --color-main: #fff;
    --color-links: #85924d;
    --color-hover: #586b68;
    --color-selection: #828d86;
    --background-color: #95a4a9;

    --font-family: monospace, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
    --font-base-size: 18px;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    -webkit-text-size-adjust: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

:focus:not(:focus-visible),
audio:focus,
video:focus {
    outline: none;
}

body {
    background-color: var(--background-color);
    font-family: var(--font-family);
    font-size: var(--font-base-size);
    color: var(--color-main);
    width: 100vw;
    overflow-x: none;

    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    cursor: pointer;
}

::selection {
    background-color: var(--color-selection);
}

/* ::-webkit-scrollbar {
    display: none;
} */

.honeydew {
    width: 100vw;
    overflow-x: hidden;
}

.shadow {
    filter: url("https://s3.amazonaws.com/centerfold-website/assets/shadow.svg");
    -webkit-filter: drop-shadow(0px 0px 20px rgba(60, 60, 60, 0.56));
    filter: drop-shadow(0px 0px 20px rgba(60, 60, 60, 0.56));
}

@keyframes only-you {
    0% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(24px, 26px);
    }
    45% {
        transform: translate(14px, 27px);
    }
    85% {
        transform: translate(12px, 18px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.all-my-blue {
    animation-name: only-you;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: running;
}

.still {
    animation-play-state: paused;
    opacity: 0;
}