* {
    box-sizing: border-box;
    max-width: 100%;
}

:root {
    --primary: 78, 148, 228;
    background-image: url(/background.svg);
    background-size: cover;
    background-position: center;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

[variant="outlined"] {
    border: 3px solid rgb(var(--primary));
    background-color: #1b1f26;
}

body {
    --circle-color: rgba(var(--primary), 0.8);
    --bg-color: rgb(var(--mdui-color-background));

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
    min-height: 100vh;
    background-repeat: no-repeat;
    margin: 0;

    background: radial-gradient(
            circle 75vw at -25vw -20vh,
            var(--circle-color),
            transparent
        ),
        radial-gradient(
            circle 80vw at 150vw 130vh,
            var(--circle-color),
            transparent
        );
}

mdui-navigation-bar {
    background: rgba(0, 0, 0, 60%);
    backdrop-filter: blur(5px);
}

main {
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 2em;

    padding: 1em;
}

mdui-divider {
    width: 100%;
}

mdui-icon {
    display: flex;
}

spacer {
    flex-grow: 1;
}

img,
mdui-icon {
    width: 100%;
    height: auto;
}

:not(:defined) {
    visibility: hidden;
}

a {
    color: rgb(var(--primary));
}
