@import url("https://fonts.googleapis.com/css?family=Silkscreen");
@import url("https://fonts.googleapis.com/css?family=Inconsolata");
@import url("https://fonts.googleapis.com/css?family=Cinzel");
@import url("https://fonts.googleapis.com/css?family=Exo+2");

:root {
    --cosmic-purple: rgb(80, 5, 110);
    --toxic-green: rgb(25, 110, 8);
    --deep-void: rgb(3, 1, 6);
    --glow-color: rgba(80, 5, 110, 0.6);
    --selection-color: rgb(25, 110, 8);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes void-drift {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(0px, 8px); }
}

@keyframes pulse-glow {
    0% { opacity: 0.4; box-shadow: 0 0 10px var(--cosmic-purple); }
    100% { opacity: 1; box-shadow: 0 0 25px var(--toxic-green); }
}

* {
    scrollbar-color: var(--cosmic-purple) var(--deep-void);
}

html {
    background: black;
    background-color: var(--deep-void);
    min-height: 100dvh;
    font-display: swap;
    scroll-behavior: smooth;
}

body {
    background-color: var(--deep-void);
    color: #e0d0f0;
    text-align: center;
    font-family: "Consolas", monospace;
    margin: 0;
    min-height: 100dvh;
}

.vignette {
    position: fixed;
    height: 100dvh;
    width: 100%;
    box-shadow: inset 0px 0px 100px rgba(80, 5, 110, 0.4);
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 9999;
}

::selection {
    color: var(--deep-void);
    background-color: var(--selection-color);
    text-shadow: 0px 0px 5px var(--toxic-green);
}

a, a:link, a:visited {
    color: var(--toxic-green);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--cosmic-purple);
    text-shadow: 0px 0px 8px var(--cosmic-purple);
}

.center-box {
    display: flex;
}

.reduced-motion .rm-pause {
    animation: none !important;
    transition: none !important;
}

.reduced-motion .rm-hide {
    display: none !important;
}

/* NAVBAR */
.nb-tabs {
    display: flex;
    justify-content: center;
    background: rgba(80, 5, 110, 0.1);
    border-bottom: 1px solid var(--cosmic-purple);
}
.nb-tab {
    padding: 10px 20px;
    font-family: "Silkscreen", monospace;
    font-size: 0.9em;
}

/* TOOLBAR */
.toolbar {
    position: fixed;
    width: 100%;
    height: 35px;
    z-index: 1100;
    box-sizing: border-box;
}

.t-link {
    position: fixed;
    top: 0;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--cosmic-purple);
    background: linear-gradient(180deg, #000000 0%, rgba(80, 5, 110, 0.2) 100%);
    z-index: 1141;
}

.t-link:hover {
    background: var(--toxic-green);
    color: black;
}

/* Hide Neocities automatically injected banner and badges */
#neocities-badge,
.neocities-badge,
#neocities-ad,
.neocities-ad,
#neocities-ad-wrapper,
div[style*="neocities.org"],
iframe[src*="neocities.org"],
img[src*="neocities.png"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}