@media (prefers-color-scheme: light) {
    :root {
        --text: hsl(231, 37%, 4%);
        --background: hsl(227, 53%, 97%);
        --primary: hsl(231, 68%, 54%);
        --secondary: hsl(231, 83%, 74%);
        --accent: hsl(231, 98%, 62%);
        --warn: hsla(60, 100%, 50%, 0.757);

        --special-link: hsla(0, 0%, 100%, 0.8);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: hsl(233, 40%, 96%);
        --background: hsla(231, 47%, 3%);
        --primary: hsl(231, 68%, 46%);
        --secondary: hsl(231, 83%, 26%);
        --accent: hsl(231, 98%, 38%);
        --warn: hsla(60, 100%, 58%, 0.705);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;

    /* extra UI properties */
    transition: all .3s ease-in-out;
    scroll-padding-top: 2rem;

    /* https://www.reddit.com/r/webdev/comments/bk9ey2/do_you_prefer_websites_that_use_smoothscrolling/ */
    /* some people don't agree on using smooth-scrolling */
    /* scroll-behavior: smooth; */

    /* outline: 1px solid green; */
}

a:link {
    color: var(--accent);
}

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

    width: min(600px, calc(100% + 70px));
    margin: 0 auto;
    font-family: 'Poppins';
    font-weight: 400;
}

section {
    margin-bottom: 5rem;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Comfortaa';
    font-weight: 700;
}

html {
    font-size: 100%;
}

/* 16px */

h1 {
    font-size: 4.210rem;
}

h2 {
    font-size: 3.158rem;
}

h3 {
    font-size: 2.369rem;
}

h4,
h5 {
    padding-bottom: 0;
    margin-bottom: 0;
}

h4 {
    font-size: 1.777rem;
}

h5 {
    font-size: 1.333rem;
}

small {
    font-size: 0.750rem;
}

/* link button styles */
#sources ul,
#sources ul li {
    list-style: none;
    padding-inline-start: 0;
}

section#sources ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

section#sources li a,
.special-btn {
    display: block;
    text-align: center;
    padding: .375rem .75rem;
    border-radius: .25rem;

    color: var(--text);
    background-color: var(--secondary);
    text-decoration: none;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
    align-items: center;

    & #disclaimerBtn {
        backdrop-filter: blur(0.385rem);
        border-radius: 50%;
        outline: 1px solid hsl(60, 100%, 50%);

        & a {
            padding: .3rem;
            display: grid;
            place-items: center;
        }
    }
}

section#sources li:first-child>a {
    background-color: var(--accent);
    color: var(--special-link);
}

section#sources li a:hover {
    transform: translate(0, -3px);
    box-shadow: 0 20px 80px -10px var(--accent);
}

ul.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    & li {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 600px) {
    body {
        width: min(380px, calc(100% + 70px));

        & h1 {
            font-size: 3.5rem;
        }
    }

    section#sources ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* EXTRA */
.under-maintenance {
    cursor: not-allowed;
    & a:hover {
        cursor: not-allowed;
    }
}

.under-maintenance * {
    opacity: 0.1;
    user-select: none;
}

.under-maintenance::before {
    content: "Links are undergoing updates, please wait patiently.";
    display: block;
    padding: 0.4rem;
    font: bold 1.25rem/1 monospace;
    border: 5px solid red;
    color: yellow;
    background-color: hsla(0, 0%, 0%, 0.85);
}

a[href='/'] {
    display: block;
    padding: .4rem .8rem;
}