:root {
    --mainColor: #395e5e;
    --mainColorLight: #395e5e2a;
    --greyColor: rgb(245, 245, 245);
    --darkGreyColor: rgb(172, 172, 172);
    --greyFilter: invert(81%) sepia(0%) saturate(0%) hue-rotate(189deg) brightness(85%) contrast(91%);
    --filter: invert(35%) sepia(27%) saturate(484%) hue-rotate(131deg) brightness(89%) contrast(94%);
    --filterActive: invert(35%) sepia(27%) saturate(484%) hue-rotate(131deg) brightness(66%) contrast(94%);
    --redFilter: invert(13%) sepia(79%) saturate(3395%) hue-rotate(2deg) brightness(95%) contrast(105%);
    --borderWidth: min(2.5vw, 2vh);
    --mainPadding: min(10vw, 5vh);
    --fontSize: min(4vw, 2.5vh);
    --errorRed: rgba(187, 35, 35, 0.600);
    --errorBackground: rgba(187, 35, 35, 0.150);
}
h1, h2, h3, h4, h5, a, button, p, span, ul, li, figure {
    all: unset;
}
::selection {
    background-color: var(--mainColor);
    color: white;
}
body {
    font-size: var(--fontSize);
    background-color: white;
    margin: 0; padding: 0;
}
body::before {
    background-image: url("assets/marble.jpg");
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
    background-color: var(--mainColor);
    opacity: 0.15;
    background-size: 100% 100%;
    pointer-events: none;
}
h1, p, span {
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    text-align: center;
    margin: 0.5rem 0.5rem;
}

/* CSS animations: where possible/practical, replaced by js animations */
@keyframes blinkingContinue {
    to {visibility: hidden;}
}
@font-face {
    font-family: GreatVibes;
    src: url(assets/GreatVibes-Regular.woff);
}

/* 'X' button in upper right corner of some modals */
.exit-button {
    user-select: none;
    position: absolute;
    font-size: 1em;
    top: 0.5em; right: 1em;
    width: 1.4em; height: 1.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-family: monospace;
}
.exit-button:hover, .exit-button:active {
    font-weight: bold;
    background-color: lightgrey;
    cursor: pointer;
}