@font-face {
    font-family: "Comic Relief";
    src: url("/static/themes/default/ComicRelief-Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: "DotGothic16";
    src: url("/static/games/fortuneteller/DotGothic16-Regular.ttf");
    font-display: swap;
}


body {
    margin: 0;
    padding: 0;
    background-color: #d2e6e3;
    font-family: "Comic Relief", "Comic Sans MS", cursive;
}

#wrapper {
    width: 80%;
    margin: auto;
    min-height: 100vh;
    background-color: #f4f5ff;
    box-shadow: 0 0 100px #385d6a;
}

@media screen and (max-width: 800px) {
    #wrapper {
        width: 100%;
    }
}

#header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

#search-bar {
    margin: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

@media screen and (max-width: 800px) {
    #search-bar > label {
        display: none;
    }
}

#header {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: linear-gradient(to right, white, #eae4ff);
    border-bottom: 1px solid #492d58;
}

@media screen and (max-width: 800px) {
    #header {
        align-items: center;
    }
}

#header > a {
    margin: 5px;
}

#logo {
    margin: 20px;
    height: 64px;
}

@media screen and (max-width: 800px) {
    #logo {
        margin: 10px;
        height: 48px;
    }
}

.expand {
    flex-grow: 1;
}

#header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#header-right > a, #header-right > a:visited {
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#header-beans {
    font-size: 0.8em;
    color: #ad77f1;
    margin: 8px;
}

#header-ipods {
    font-size: 0.8em;
    color: #b3a6c9;
    margin: 8px;
}

#header-quarters {
    font-size: 0.8em;
    color: #5a697b;
    margin: 8px;
}

#header-welcome {
    margin: 2px;
}

#header-avatar {
    margin-right: 16px;
    margin-top: 5px;
    height: 72px;
}

#header-actions {
    display: flex;
    flex-direction: row;
}

#navbar {
    background-color: #f2faff;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #492d58;
}

@media screen and (max-width: 800px) {
    #navbar {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

#navbar > * {
    padding: 5px;
    border-right: 1px solid #492d58;
}

@media screen and (max-width: 800px) {
    #navbar > * {
        border: none;
    }
}

#navbar > *:last-child {
    border-right: none;
}

@media screen and (max-width: 800px) {
    #navbar > *:last-child {
        border: none;
    }
}

#navbar > a, #navbar > a:visited {
    color: #3c156a;
}

#navbar > a:hover {
    color: #8b5cff;
}

.frq-nonzero {
    animation: alert 1s infinite linear;
}

.mail-nonzero {
    animation: alert 1s infinite linear;
}


#user-count > span {
    animation: alert 1s infinite linear;
}

@keyframes alert {
    100%, 0% {
        color: #ff0000;
    }
    50% {
        color: #0000ff;
    }
}

.sillionaire {
    animation: sillionaire 1s infinite linear;
    font-weight: bold;
    position: relative;
}

.sillionaire:hover::after {
    content: "sillionaire";
    position: absolute;
    text-align: center;
    z-index: 200;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.8em;
}

.splatinum {
    animation: splatinum 1s infinite linear;
    font-weight: bold;
    position: relative;
}

.sevil {
    animation: sevil 1s infinite linear;
    font-weight: bold;
    position: relative;
}

.splatinum:hover::after {
    content: "platinum sillionaire";
    position: absolute;
    text-align: center;
    z-index: 200;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.8em;
}

@keyframes sillionaire {
    100%, 0% {
        color: #ffcc00;
    }
    50% {
        color: #9c6c1b;
    }
}

@keyframes splatinum {
    100%, 0% {
        color: #00fff2;
    }
    50% {
        color: #1b829c;
    }
}

@keyframes sevil {
    100%, 0% {
        color: #ff0000;
    }
    50% {
        color: #9c1b1b;
    }
}

#levelup {
    position: fixed;
    bottom: 1%;
    right: 50%;
    transform: translateX(50%);
    z-index: 300;
    background-color: #f2faff;
    border: 14px solid transparent;
    border-image: url("/static/themes/default/border.png") 112 repeat;
    padding: 5px;
    margin: 5px;
    width: 300px;
    text-align: center;
    font-size: 0.9em;
    font-family: "DotGothic16", "MS Gothic", monospace;
}

.fireworks, .fireworks::before, .fireworks::after {
    content: "";
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5vmin;
    aspect-ratio: 1;
    background: radial-gradient(circle, #ff0 0.2vmin, #0000 0) 50% 00%,
    radial-gradient(circle, #001aff 0.3vmin, #0000 0) 00% 50%,
    radial-gradient(circle, #ff00bb 0.5vmin, #0000 0) 50% 99%,
    radial-gradient(circle, #6aff00 0.2vmin, #0000 0) 99% 50%,
    radial-gradient(circle, #ff0 0.3vmin, #0000 0) 80% 90%,
    radial-gradient(circle, #ff6600 0.5vmin, #0000 0) 95% 90%,
    radial-gradient(circle, #ff0000 0.5vmin, #0000 0) 10% 60%,
    radial-gradient(circle, #00bbff 0.2vmin, #0000 0) 31% 80%,
    radial-gradient(circle, #7300ff 0.3vmin, #0000 0) 80% 10%,
    radial-gradient(circle, #ee00ff 0.2vmin, #0000 0) 90% 23%,
    radial-gradient(circle, #0dff00 0.3vmin, #0000 0) 45% 20%,
    radial-gradient(circle, #00eaff 0.5vmin, #0000 0) 13% 24%;;

    background-size: 0.5vmin 0.5vmin;
    background-repeat: no-repeat;

    animation: fireworks 1s steps(24) infinite;
}

.fireworks::before {
    transform: translate(-50%, -50%) rotate(25deg) !important;
}

.fireworks::after {
    transform: translate(-50%, -50%) rotate(-47deg) !important;
}

@keyframes fireworks {
    0% {
        transform: translate(-50%, 60vh);
        width: 0.5vmin;
        opacity: 1;
    }
    50% {
        width: 0.5vmin;
        opacity: 1;
    }
    100% {
        width: 45vmin;
        opacity: 0;
    }
}

#fireworks-container > *:nth-child(2n) {
    animation-delay: 0.3s;
}

#fireworks-container > *:nth-child(3n) {
    animation-delay: 0.4s;
}

.editor-container {
    width: 320px;
    min-height: 3rem;

    margin: 0.25rem 0;
    padding: 0.5rem;
    border: 1px solid gray;
    background-color: white;

    overflow: hidden;
    word-break: break-word;
    white-space: pre-wrap;
}

.editor-empty::before {
    content: "type something silly :3";
    position: absolute;
    color: darkgrey;
    font-style: italic;
}

.editor-counter {
    font-size: 0.8em;
    color: darkgrey;
}

.editor-counter-too-long {
    color: red;
}

.editor-image {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.sillycode-guide {
    font-size: 0.8em;
    color: darkgrey;
}

.sillycode-meta {
    font-weight: normal;
    font-style: normal;
    white-space: preserve nowrap;
    color: darkgrey;
}

.sillycode-emote {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 8px;
    vertical-align: middle;
    white-space: nowrap;
    color: transparent !important;
    text-shadow: none !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.advertisement {
    border: 1px solid #492d58;
    display: flex;
    align-items: center;
    justify-content: center;
}