:root {
    --wsd-bg: #07101c;
    --wsd-bg-2: #0a1220;
    --wsd-panel: rgba(16, 25, 39, 0.88);
    --wsd-panel-strong: rgba(24, 36, 54, 0.94);
    --wsd-line: rgba(255, 255, 255, 0.10);
    --wsd-line-strong: rgba(255, 255, 255, 0.18);
    --wsd-text: #f7fbff;
    --wsd-muted: #aab8c8;
    --wsd-green: #3df2b0;
    --wsd-blue: #6fb7ff;
    --wsd-gold: #f4c95d;
    --wsd-red: #ff6b6b;
    --wsd-radius: 8px;
    --wsd-shell: min(1540px, calc(100% - 32px));
    --wsd-font-body: 'Lato', Arial, sans-serif;
    --wsd-font-display: 'Montserrat', 'Lato', Arial, sans-serif;
}

html {
    min-height: 100%;
}

body,
body.body {
    min-height: 100vh;
    color: var(--wsd-text);
    background:
        radial-gradient(circle at 16% 12%, rgba(61, 242, 176, 0.13), transparent 28%),
        radial-gradient(circle at 86% 10%, rgba(111, 183, 255, 0.14), transparent 30%),
        linear-gradient(180deg, var(--wsd-bg) 0%, var(--wsd-bg-2) 48%, var(--wsd-bg) 100%);
    background-attachment: fixed;
    font-family: var(--wsd-font-body);
}

body.body {
    margin: 0;
}

a {
    color: inherit;
}

::selection {
    background: rgba(61, 242, 176, 0.35);
    color: var(--wsd-text);
}

@media (max-width: 720px) {
    :root {
        --wsd-shell: min(100% - 20px, 1540px);
    }
}