styles.css

* {
    box-sizing: border-box;

    /* Nothing should be selectable. */
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;

    /* Nothing should be draggable. */
    user-drag: none;
    -webkit-user-drag: none;
}

noscript {
    color: white;
}

p,
h1,
pre {
    margin: 0;
    padding: 0;
}

a {
    color: black;
    cursor: none;
}

html {
    height: 100%;
}

body {
    /* Using 32px margin around body to avoid funny business with cursor near the edges of window */
    margin: 32px;
    height: calc(100% - 64px);
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 0;
    background: black;
}

@font-face {
    font-family: 'Feral';
    src: url('assets/Feral-Regular.woff2') format('woff2'),
        url('assets/Feral-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carnivalee Freakshow';
    src: url('assets/CarnivaleeFreakshow.woff2') format('woff2'),
        url('assets/CarnivaleeFreakshow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kingthings Trypewriter 2';
    src: url('assets/KingthingsTrypewriter2.woff2') format('woff2'),
        url('assets/KingthingsTrypewriter2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1 {
    font-size: 4vw;
}

#loadingOverlay {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    opacity: 1.0;
    transition: opacity 1.0s ease-in;
}

#suicidePreventionOverlay {
    display: none;
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0.8;
    color: white;
    font-family: 'Kingthings Trypewriter 2';
}

#suicideTextContainer {
    position: absolute;
    width: 48%;
    height: 35vw;
    left: 46%;
    top: 53%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#suicideTextContainer h1 {
    font-size: 3vw;
}

#suicideTextContainer p {
    margin-top: 1vw;
    font-size: 1.5vw;
}

#suicideTextContainer p a {
    color: #fbedc8;
    cursor: pointer;
}

#lightFlash {
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    /* background-image: url('assets/face-no-eyes.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position-x: center; */
    display: none;
}

#settingsGearHoverboard {
    position: absolute;
    top: 0vw;
    right: 0vw;
    width: 6vw;
    height: 6vw;
    z-index: 998;
}

#settingsGear {
    position: absolute;
    top: 2vw;
    right: 2vw;
    width: 2vw;
    height: 2vw;
    fill: #d35400;
    opacity: 0.7;
    cursor: pointer;
    z-index: 999;
}

#settingsGear:hover {
    opacity: 1.0;
}

.popupContainer {
    display: none;
    z-index: 994;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #fbedc8;
    color: black;
    font-size: 2vw;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 1.5vw;
    cursor: none;
    transition: opacity 3s ease-in;
    opacity: 1.0;
    font-family: 'Carnivalee Freakshow';
    background-color: #fbedc8;
    background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%23d9c99f' fill-opacity='0.24' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.popupContainer>ul {
    margin-top: 1.5vw;
    margin-bottom: 0;
}

.popupContainer>p,
#tooltipContent>p {
    margin-top: 1.5vw;
}

.popupHoverboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 995;
}

.popupButtonsContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
    margin-top: 1.5vw;
    z-index: 997;
    transition: margin-top 0.4s ease-in-out;
}

.popupButton {
    border: 1px solid black;
    border-radius: 10px;
    padding: 0.5vw;
    width: 100%;
    flex-grow: 1;
    z-index: 996;
}

.primaryButton {
    background-color: #958219;
    color: white;
    transition: 0.3s linear;
}

.primaryButton:hover {
    background-color: #968a47;
    box-shadow: 0 0 15px #5c533b;
    text-shadow: 0 0 5px #5c533b;
}

#consentNo {
    background-color: #ebebeb;
    margin-left: 1.5vw;
    transition: 0.3s linear;
}

#consentNo:hover {
    color: gray;
}

#tooltipContinueButton {
    height: 4vw;
    line-height: 2.6vw;
}

#tooltipShutUpButton {
    height: 4vw;
    line-height: 2.6vw;
    background-color: #ebebeb;
    margin-left: 1.5vw;
    transition: 0.3s linear;
}

#tooltipShutUpButton:hover {
    color: gray;
}

#saveSettings {
    height: 4vw;
    line-height: 2.6vw;
}

#textInputAPIKey {
    background-color: white;
    position: absolute;
    border-radius: 5px;
    margin-top: 1.7vw;
    width: 31.3vw;
    left: 7vw;
    height: 2vw;
    line-height: 2vw;
    transition: margin-top 0.4s ease-in-out;
    z-index: 996;
}

.externalLinkRow {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 1.5vw;
    z-index: 997;
    text-align: left;
}

.externalLinkRow svg {
    height: 2.6vw;
    vertical-align: middle;
    fill: #958219;
}

.externalLinkRow span {
    vertical-align: middle;
}

.externalLinkRow:hover {
    opacity: 0.5;
}

#banshee {
    position: absolute;
    width: 3vw;
    top: 69%;
    left: 10%;
    opacity: 0;
    z-index: 10000;
    pointer-events: none;
    filter: blur(0.3px);
    animation-duration: 0.7s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

#glassCrack {
    display: none;
    pointer-events: none;
    position: absolute;
    width: 80%;
    left: -64px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
}

@keyframes banshee-flying {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(15.0);
    }
    100% {
        transform: scale(300) translateX(0.4vw) translateY(-0.1vw)
    }
}

#achievement-hoverboard {
    position: absolute;
    bottom: 0vw;
    right: 0vw;
    width: 13vw;
    height: 6vw;
    z-index: 7;
}

#achievement-row {
    position: absolute;
    bottom: 2vw;
    right: 2vw;
    fill: #d35400;
    z-index: 8;
}

#achievement-row svg {
    margin-left: 1vw;
    vertical-align: middle;
    width: 2vw;
    opacity: 0;
    fill: #d35400;
}

#achievement-row svg.not-achieved {
    opacity: 0.4;
    fill: grey;
}

#achievement-row svg.achieved {
    opacity: 0.7;
    cursor: pointer;
}

#achievement-row svg.achieved:hover {
    opacity: 1;
}

#suicide-prevention-popup {
    position: absolute;
    bottom: -17vw;
    left: 20px;
    width: 40vw;
    height: 15vw;
    border-radius: 5px;
    background-color: #2c2722;
    border: 2px solid #d354009d;
    z-index: 998;
}

#suicide-prevention-popup .button {
    padding: 5px;
    width: fit-content;
    min-width: 18vw;
    color: #fbedc8;
    border: 2px solid #fbedc8;
    border-radius: 5px;
    cursor: pointer;
}

.achievement-notification {
    position: absolute;
    bottom: -12vw;
    right: -3px;
    width: 25vw;
    height: 10vw;
    border-radius: 5px;
    background-color: #2c2722;
    border: 2px solid #d354009d;
    pointer-events: none;
    z-index: 9;
}

.achievement-notification svg {
    position: absolute;
    top: -1.2vw;
    left: -1.2vw;
    width: 4vw;
    fill: #d35400;
}

.achievementText {
    font-family: 'Kingthings Trypewriter 2';
    margin-left: 4vw;
    margin-right: 1vw;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.achievementText h1 {
    color: white;
    font-size: 1.8vw;
    font-style: italic;
}

.achievementText p {
    color: white;
    margin-top: 1vw;
    font-size: 1vw;
}

#popupSettings {
    z-index: 996;
}

.switch {
    position: relative;
    display: block;
    width: 4.6vw;
    height: 2.6vw;
    z-index: 996;
    margin-top: 1.5vw;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.slider:not(.checked):hover {
    background-color: #bbb;
}

.slider.checked:hover {
    background-color: #968a47;
}

.slider-text {
    position: absolute;
    display: inline-block;
    left: 5.6vw;
    height: 2.4vw;
    width: 30vw;
    line-height: 2.4vw;
    pointer-events: none;
}

.slider:before {
    position: absolute;
    content: "";
    height: 2.0vw;
    width: 2.0vw;
    left: 0.3vw;
    bottom: 0.3vw;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.checked {
    background-color: #958219;
}

.checked:before {
    -webkit-transform: translateX(2.0vw);
    -ms-transform: translateX(2.0vw);
    transform: translateX(2.0vw);
}

#bg {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: none;
    z-index: 1;
}

@keyframes board-glow {
    0% {
        box-shadow: 0 0 50px #d35400;
    }

    100% {
        box-shadow: 0 0 50px 20px #d35400;
    }
}

@keyframes scale-up-down {
    0% {
        transform: scale(1.0)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1.0)
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotateZ(0deg)
    }

    100% {
        transform: rotateZ(180deg)
    }
}

.one-time-bump {
    animation-name: scale-up-down;
    animation-iteration-count: 1;
    animation-duration: 0.5s;
}

.one-time-gear-roll {
    animation-name: rotate-circle;
    animation-timing-function: cubic-bezier(.12, 1, .96, .97);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}

#boardContainer {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}

.shake-board {
    animation-name: board-shake;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}

@keyframes board-shake {
    0% {
        transform: translate(-50%, -50%);
    }
    20% {
        transform: translate(-45%, -45%) rotate3d(1, 1, 1, 10deg) scale(1.03);
    }
    40% {
        transform: translate(-55%, -45%) rotate3d(1, 1, 1, -10deg) scale(1.1);
    }
    60% {
        transform: translate(-45%, -45%) rotate3d(1, 1, 1, 10deg) scale(1.07);
    }
    80% {
        transform: translate(-55%, -45%) rotate3d(1, 1, 1, -10deg) scale(1.03);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

#board {
    position: relative;
    width: 100%;
    border-radius: 10%;
    z-index: 11;
    animation-name: board-glow;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

#boardEasterEggHelper {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 10%;
    z-index: 12;
    opacity: 0;
    transition: 4s ease-in;
}

#hoverBoard {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 13;
    cursor: none;
}

#planchette,
#planchetteHelper {
    position: absolute;
    top: 44%;
    left: 40.5%;
    width: 18%;
    transform: rotate(130deg);
    cursor: none;
}

#planchette {
    z-index: 15;
    transition: filter 1.5s ease-in;
    /* TODO ease-in-out? */
}

.planchette-no-glow {
    filter: drop-shadow(5px 5px 5px #222);
}

.planchette-active-glow {
    filter: drop-shadow(5px 5px 5px rgb(255, 198, 198));
    /** filter: drop-shadow(5px 5px 5px '#fce'); */
}

#planchetteHelper {
    z-index: 16;
    opacity: 0;
    /* Can't use visibility:hidden because need mouse movements to trigger events */
}

#magnifying-glass {
    background-image: url('assets/ouija_bg.jpg');
    background-repeat: no-repeat;
    position: absolute;
    border-radius: 50%;
    cursor: none;
    visibility: hidden;
    z-index: 14;
}

#magnifying-glass-surface {
    background-color: #563e23;
    opacity: 0.4;
    width: 100%;
    height: 100%;
}

#tooltipContainer {
    position: absolute;
    right: 0;
    bottom: 2vw;
    width: 10vw;
    height: 15vw;
    z-index: 12;
    cursor: none;
    pointer-events: none;
    filter: url(#smokeFilter);
}

#tooltipSymbol {
    line-height: 15vw;
    font-family: 'Kingthings Trypewriter 2', 'Courier New', 'Courier', monospace;
    font-size: 14vw;
    color: black;
    text-align: center;
    vertical-align: middle;
    filter: blur(11px);
    transform: scale(0.0);
    transition: filter 2s ease-out, transform 2s ease-in-out, opacity 2s ease-in-out;
    /* color: transparent;
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    -webkit-background-clip: text; */
}

#spiritMessageContainer {
    position: absolute;
    top: -13%;
    pointer-events: none;

    /* Centering */
    left: -50%;
    width: 100vw;
    text-align: center;
    letter-spacing: 3vw;
    text-indent: 3vw;

    /* Styling */
    font-size: 2vw;
    color: #fff;
    text-shadow: 0 0 5px #d35400;
    text-transform: uppercase;
    font-family: 'Feral';

}

#spiritMessageContainer::before,
#spiritMessageContainer::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#spiritMessageContainer::before {
    color: #f3ba39;
    animation: glitch-effect 6s infinite;
}

#spiritMessageContainer::after {
    color: #f3ba39;
    animation: glitch-effect 4s infinite;
}

@keyframes glitch-effect {
    0% {
        left: -4px;
        top: -4px;
    }

    25% {
        left: 4px;
        top: 0px;
    }

    50% {
        left: -2px;
        top: 4px;
    }

    75% {
        left: 2px;
        top: -2px;
    }

    100% {
        left: 0px;
        top: -4px;
    }
}

#userMessageContainer {
    position: absolute;
    left: -50%;
    bottom: -13%;
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 3vh;
    pointer-events: none;
}

#userMessagePre {
    position: absolute;
    height: 3vh;
    line-height: 3vh;
    font-size: 2vw;
    letter-spacing: 0.8vw;
    text-transform: uppercase;
    font-family: 'Kingthings Trypewriter 2', 'Courier New', 'Courier', monospace;
    color: #fff;
    transition: color 1.0s ease-out;
}

.blinking-caret {
    border-right: .15em solid #ff9900;
    animation: blink-caret .75s step-end infinite;
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #ff9900;
    }
}

.orangey-text {
    color: #563e23 !important;
}

#cursor {
    position: absolute;
    top: 30%;
    left: 30%;
    height: 33px;
    /* height must be evenly divisible from 128px */
    visibility: hidden;
    pointer-events: none;
    z-index: 1000;
}

.disable-transitions {
    transition: none !important;
}