:root {
    color-scheme: light dark;

    /* colors */
    --primary-bg: canvas;
    --primary-color: light-dark(#2c2c2c, #dedede);
    --muted-color: light-dark(#555555, #aaaaaa);

    --negative-color: light-dark(#dedede, #2c2c2c);
    --negative-muted-color: light-dark(#aaaaaa, #555555);

    --shadow-color: light-dark(#fafafa, #1c1d25);

    /* break points */
    --screen-sm: 576px;
    --screen-md: 768px;
    --screen-lg: 992px;

    /*  content width*/
    --content-width: 90vw;
    --content-width-sm: 500px;
    --content-width-md: 650px;
}

html {
    scroll-behavior: smooth;
}

/* BODY LAYOUT */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    background-color: var(--primary-bg);
    color: var(--primary-color);
    transition: background-color .2s ease-in;


    box-shadow: 0 0 200px light-dark(#fafafa, #1c1d25) inset;
    transition: box-shadow .1s ease-in;
}

::backdrop {
    background: light-dark(rgba(0, 0, 0, 0.323), rgba(0, 0, 0, 0.645));
}

a {
    color: #2d9bf0;
}

.text-center {
    text-align: center;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--muted-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

section>h2 {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 2rem;
}

main {
    width: var(--content-width);
    margin: 0 auto;
}

@media (min-width: 576px) {
    main {
        max-width: var(--content-width-sm);
    }
}

@media (min-width: 768px) {
    main {
        max-width: var(--content-width-md);
    }
}

section {
    margin: 5rem 0;
}

section.page-head {
    text-align: center;
}

section.page-head>h1 {
    font-size: 2rem;
}

/* about page */
.about-sect p {
    margin-bottom: 1.5rem;
}