body {
    overflow-x: hidden;
    font-size: calc(1em + 1vw);
}

body:after, body:before {
    content: "";
    background-image: url(/img/speckles.gif);
    background-size: 100vw;
    animation: DUST 42s ease-in-out infinite;
    position: fixed;
    top: -50%;
    left: -50%;
    height: 200vh;
    width: 200vw;
    opacity: .8;
    z-index: 10;
    background-color: transparent;
    pointer-events: none;
    mix-blend-mode: darken;
}

body:before {
    animation: DUST2 24s ease-in-out infinite reverse;
    animation-delay: -14s;
}

@keyframes WATCH {
    0% { transform: translateY(0%) }
    100% { transform: translateY(-100vh) }
}

@keyframes DUST {
    0% {
        transform: translate(-20%, 0);
        opacity: 0
    }
    5% {
        transform: translate(-20%, -5vw);
        opacity: 1
    }
    50% {
        transform: translate(20%, -50vw);
        opacity: 1
    }
    95% {
        transform: translate(20%, -95vw);
        opacity: 1
    }
    100% {
        transform: translate(-20%, -100vw);
        opacity: 0
    }
}

@keyframes DUST2 {
    0% {
        transform: translate(-20%, 0) rotateY(180deg);
        opacity: 0
    }
    5% {
        transform: translate(-20%, -5vw) rotateY(180deg);
        opacity: 1
    }
    50% {
        transform: translate(20%, -50vw) rotateY(180deg);
        opacity: 1
    }
    95% {
        transform: translate(20%, -95vw) rotateY(180deg);
        opacity: 1
    }
    100% {
        transform: translate(-20%, -100vw) rotateY(180deg);
        opacity: 0
    }
}

section.home {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

section.home:before {
    content: "";
    background-image: url('/img/static.gif');
    animation: WATCH 120s linear infinite;
    position: absolute;
    left: -50%;
    top: -100%;
    height: 300%;
    width: 300%;
    opacity: 1;
    z-index: -10;
    cursor: unset;
}

#splash {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90vh;
    height: 90vh;
    border-radius: 100%;
    background: var(--dark-color);
    color: var(--bright-color);
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

#splash h1 {
    font-family: "barcodetext";
    font-size: calc(1em + 1vw);
}

#splash .icons {
    position: absolute;
    display: flex;
    gap: 0.5em;
    transform: translateY(calc(1em + 5vh));
}

#splash .bg {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/img/mcontours.gif);
    opacity: 0;
    z-index: -1;
    transition: transform 10s ease-in-out;
    background-position: center;
    animation: SPHERE 3s ease-in-out infinite alternate;
}

@keyframes SPHERE {
    0% { opacity: 0; }
    100% { opacity: 0.7;}
}

@media only screen and (max-width: 600px) {
    #splash h1 {
        font-size: calc(1em + 1vw);
        font-size: 12vw;
    }

    #splash .icons {
        font-size: 7vw;
    }

    .icons #obslink {
        display: none;
    }
}

#crittalink {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

#crittalink img {
    pointer-events: none;
}



/* test */
body .mindsci-status {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 24px;
    padding: 0.5em 0.2em 0.1em;
    cursor: help;
    font-family: "barcode";
    background: var(--neutral-color);
    color: black;
    border: 1px solid;
    border-color: transparent;
    animation-play-state: paused;
    z-index: 5;
}

.mindsci-status::after {
    content: attr(status);
}

.mindsci-status::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(https://corru.observer/img/fav.gif);
    background-size: cover;
    --baseTransform: translateX(-125%) translateY(-50%);
    border: 1px solid;
    border-radius: 100%;
    border-color: inherit;
    transform: var(--baseTransform);
    pointer-events: none;
    animation: SPIN-Y 5s linear infinite;
}

.mindsci-status[code="2"] {
    border-color: var(--bright-color) !important;
    background: url(https://corru.observer/img/textures/static.gif) !important;
    color: var(--dark-color) !important;
}

.mindsci-status[code="2"]::before {
    animation: unset;
}

.mindsci-status[code="1"] {
    border-color: var(--friend-color) !important;
    background: var(--friend-color) !important;
    color: var(--dark-color) !important;
}

.mindsci-status[code="1"]::before {
    animation: SPIN-Y 30s ease-in-out infinite;
}

.mindsci-status[code="-1"] {
    border-color: var(--obesk-color) !important;
    background: var(--obesk-color) !important;
    color: var(--bright-color) !important;
}

.mindsci-status[code="-1"]::before {
    animation: SHAKE 10ms linear infinite;
}

.mindsci-status[code="-2"] {
    border-color: var(--obesk-color) !important;
    background: url(https://corru.observer/img/textures/mspinnel.gif) !important;
    color: var(--bright-color) !important;
}

.mindsci-status[code="-2"]::before {
    animation: OMEGASHAKE 10ms linear infinite;
}

@keyframes SPIN-Y {
    0% { transform: var(--baseTransform) rotateY(0deg) }
    100% { transform: var(--baseTransform) rotateY(360deg) }
}

@keyframes SHAKE {
    0% { transform: var(--baseTransform) translate(0px, 1px) rotate(0deg); }
    10% { transform: var(--baseTransform) translate(-1px, -1px) rotate(1deg); }
    20% { transform: var(--baseTransform) translate(-2px, 1px) rotate(-1deg); }
    30% { transform: var(--baseTransform) translate(2px, 2px) rotate(0deg); }
    40% { transform: var(--baseTransform) translate(2px, -1px) rotate(-1deg); }
    50% { transform: var(--baseTransform) translate(-1px, 1px) rotate(1deg); }
    60% { transform: var(--baseTransform) translate(-2px, 4px) rotate(0deg); }
    70% { transform: var(--baseTransform) translate(1px, 1px) rotate(1deg); }
    80% { transform: var(--baseTransform) translate(-1px, -1px) rotate(-1deg); }
    90% { transform: var(--baseTransform) translate(1px, 2px) rotate(0deg); }
    100% { transform: var(--baseTransform) translate(1px, -2px) rotate(1deg); }
}

@keyframes OMEGASHAKE {
    0% { transform: var(--baseTransform) translate(10vw, 10vh) rotate(0deg); }
    10% { transform: var(--baseTransform) translate(25vw, 1vh) rotate(3deg); }
    20% { transform: var(--baseTransform) translate(5vw, 5vh) rotate(-3deg); }
    30% { transform: var(--baseTransform) translate(-25vw, 25vh) rotate(0deg); }
    40% { transform: var(--baseTransform) translate(-10vw, -5vh) rotate(-3deg); }
    50% { transform: var(--baseTransform) translate(-10vh, 10vh) rotate(3deg); }
    60% { transform: var(--baseTransform) translate(-20vh, 40vh) rotate(0deg); }
    70% { transform: var(--baseTransform) translate(10vh, 10vh) rotate(3deg); }
    80% { transform: var(--baseTransform) translate(-10vh, -10vh) rotate(-3deg); }
    90% { transform: var(--baseTransform) translate(10vh, 15vh) rotate(0deg); }
    100% { transform: var(--baseTransform) translate(10vh, -20vh) rotate(3deg); }
}

@media only screen and (max-width: 800px) {
    body .mindsci-status {
        font-size: 12px;
    }
}

section.home [definition]:not([href]) {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: alias;
}

/* newszone crossover */
h2.newsheader {
    margin-bottom: 5vh;
    font-family: barcodetext;
    text-transform: uppercase;
    font-size: var(--h1-size);
}

.newszone > section {
    padding: 5vh 0;
}

.newszone > section > .buttons {
    margin-top: 10vh;
}

.buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    align-items: center;
}

.buttons .button {
    margin: unset;
}