:root{
    --text: #e0edef;
    --background: #091314;
    --primary: #96d2da;
    --secondary: #226e77;
    --accent: #3fc3d4;

    --font-family: 'Clash Grotesk', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    scroll-behavior: smooth;
    scrollbar-color: #a697e2 #040308;
    scrollbar-width: thin;

    font: 400 16px var(--font-family);
}

html, body {
    position:relative;
    overflow-x:hidden;

    z-index: -20000;
}

span {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

::-webkit-scrollbar-thumb {
    background: transparent !important;
    color: transparent !important;
}

body {
    background-color: var(--background);
    color: var(--text);

    z-index: -20000;
}

a, a:visited {
    color: var(--text);
    text-decoration: none;
}

::selection {
    background-color: var(--primary);
    color: var(--secondary);
}

.spoiler {
    filter: blur(5px);
    transition: all 0.5s;

    user-select: none;

    cursor: help;
}

.spoiler:hover {
    filter: blur(0);

    user-select: all;

    transition: all 0.5s;
}

.spoiler::after {
    content: attr(data-spoiler);
    color: transparent;
    background-color: currentColor;
    transition: all 0.5s;
}

.bold-text {
    font-weight: 700;
}

.italic-text {
    font-style: italic;
}

.underline-text {
    text-decoration: underline;
}

.comment {
    color: var(--text);
    opacity: 0.6;

    font-style: italic;
}

.comment::before {
    content: '/* ';
}

.comment::after {
    content: ' */';
}

deepl-input-controller, deepl-inline-trigger{
    opacity: 0;
}