:root {

    --bg:
        #eef3f8;

    --text:
        #10213f;

    --muted:
        #6f7d91;

    --primary:
        #163765;

    --accent:
        #7ab8ff;

    --glass:
        rgba(255, 255, 255, 0.62);

    --border:
        rgba(255, 255, 255, 0.45);

    --shadow:
        0 24px 70px rgba(16, 33, 63, 0.16);
}

body.dark {

    --bg:
        #07111f;

    --text:
        #eef6ff;

    --muted:
        #9fb0c8;

    --primary:
        #7ab8ff;

    --accent:
        #a7d8ff;

    --glass:
        rgba(12, 25, 45, 0.62);

    --border:
        rgba(255, 255, 255, 0.12);

    --shadow:
        0 24px 70px rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(122,184,255,.35),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(22,55,101,.24),
            transparent 30%
        ),

        var(--bg);

    color:
        var(--text);

    min-height:
        100vh;

    transition:
        background .3s ease,
        color .3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

.noise {

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .04;

    background-image:
        linear-gradient(
            45deg,
            #000 25%,
            transparent 25%
        );

    background-size:
        4px 4px;

    z-index: 1;
}