/*********************************************\
| The common stylesheet - used for all pages. |
\*********************************************/
@layer common {

    /***************\
    | Global Styles |
    \***************/
    :root {

        /* Presets */
        --red: rgb(255, 0, 0);
        --orange: rgb(255, 127, 0);
        --yellow: rgb(255, 255, 0);
        --green: rgb(0, 255, 0);
        --teal: rgb(0, 255, 127);
        --cyan: rgb(0, 255, 255);
        --blue: rgb(0, 0, 255);
        --purple: rgb(127, 0, 255);
        --magenta: rgb(255, 0, 255);

        /* Muted Presets */
        --red-muted: rgb(255, 127, 127);
        --orange-muted: rgb(255, 195, 127);
        --yellow-muted: rgb(255, 255, 127);
        --green-muted: rgb(127, 255, 127);
        --cyan-muted: rgb(127, 255, 255);
        --blue-muted: rgb(127, 127, 255);
        --purple-muted: rgb(195, 127, 255);
        --magenta-muted: rgb(255, 127, 255);

        /* Neutral Presets */
        --light-gray: rgb(127, 127, 127);
        --gray: rgb(95, 95, 95);
        --dark-gray: rgb(63, 63, 63);

        /* Text */
        --font-family: Georgia, 'Times New Roman', Times, serif;
        --heading-font-family: Tahoma, sans-serif;
        --text-color: black;

        /* Visual Consistency */
        --background-cascade-origin: rgba(127, 127, 127, 0.25);
        --background-cascade-layer: rgba(255, 255, 255, 0.15);
        --container-padding: 0.75rem;
        --emphatic-padding: calc(var(--container-padding) * 1.5);
        --border-radius: 0.5rem;

        /* Root Element */
        background-color: var(--blue-muted);
        background-image: repeating-linear-gradient(to top left, var(--green-muted), var(--cyan-muted), var(--purple-muted));
        background-attachment: fixed;

        font-family: var(--font-family);
        color: var(--text-color);
        height: max-content;
        min-height: 100%;
    }

    * {

        /* Enforce logical box-sizing. */
        box-sizing: border-box;
    }

    /*********************\
    | Tag-Specific Styles |
    \*********************/
    body {

        /* Pad content for clarity. */
        padding: var(--container-padding);
        margin: 0;

        height: 100%;
    }

    h1,
    a,
    p,
    blockquote {

        /* Remove auto-margin. */
        margin: 0;
    }

    a {

        &:active {
            color: blueviolet;
        }

        &:hover {
            text-decoration: wavy underline;
        }
    }

    h1 {
        text-align: center;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        /* Custom density margin. */
        margin: 0 0 var(--container-padding) 0;

        /* Apply heading font & weight. */
        font-family: var(--heading-font-family);
        font-weight: normal;

        /* Ensure space between headings. */
        &+& {
            margin-bottom: 0;
        }

        &.heading {
            text-decoration: underline;
        }

        *+& {

            /* Add margin if directly following another element. */
            margin-top: var(--container-padding);
        }
    }

    blockquote {
        margin: 0;

        &::before {
            content: "► ";
            margin-left: 0.5rem;
        }
    }

    a,
    p {
        /* Display as inline-block. */
        display: inline-block;
    }

    p,
    blockquote,
    code {
        /* Ensure text is of an easy-to-read density. */
        line-height: 140%;
    }

    button,
    .button {
        background-color: rgba(255, 255, 255, 0.5);
        border: 1pt solid black;
        border-radius: 0.5rem;
        margin-right: auto;
        margin-left: auto;
        display: inline-block;
        padding: 0.5em;
        font-weight: bold;
        font-size: 1em;
        text-align: center;

        color: var(--text-color);
        font-family: var(--heading-font-family);

        &:hover {
            background-color: rgba(255, 255, 255, 1);
        }

        &:disabled,
        &.disabled {
            background-color: rgba(255, 255, 255, 0.25);
            border: 1pt solid transparent;
        }

        &.wide {

            /* Cascading Background*/
            padding: var(--container-padding);
            border-radius: calc(var(--border-radius));
            width: 100%;
            display: block;

            *+& {

                /* Add margin if directly following another element. */
                margin-top: var(--container-padding);
            }
        }
    }

    /***********************\
    | Class-Specific Styles |
    \***********************/

    .container {

        /* Cascading Background*/
        background-color: var(--background-cascade-layer);

        /* Enforce spacing. */
        padding: var(--container-padding);

        /* Thick, rounded borders. */
        border-radius: calc(var(--border-radius));

        /* Remove margin from the last child element. */
        &:last-child:not(div) {
            margin: 0;
        }

        *+& {

            /* Add margin if directly following another element. */
            margin-top: var(--container-padding);
        }

        /* Note Containers. */
        &.note {

            /* Make the note 'pop'. */
            background-color: rgba(255, 255, 255, 0.25);
            border: 1pt solid white;
            text-align: justify;
        }

        &.buttons {
            display: flex;
            justify-content: space-between;

            button,
            .button {
                flex-grow: 1;
            }
        }

    }

    .heading {
        display: block;

        margin-right: auto;
        margin-left: auto;

        img {
            height: 7.5rem;
            margin-bottom: var(--container-padding);
        }
    }

    .center {
        text-align: center;
    }

    .external-site::after {
    background-image: url('/resource/image/external-site.svg');
    background-size: contain;
    display: inline-block;
    aspect-ratio: 1; 
    margin-left: 0.25em;
    height: 0.75em;
    content:"";
    }

    /*************************\
    | Element-Specific Styles |
    \*************************/

    .container#main {
        /* This allows the main container to 'pop' while in-front of any background color. */
        background-color: var(--background-cascade-origin);

        min-height: 100%;

        .container {

            &:nth-child(n-1) {
                max-width: 60rem;
                margin-right: auto;
                margin-left: auto;
            }

            &#navigation {
                max-width: max-content;

                margin-top: 0;
                margin-right: auto;
                margin-left: auto;

                padding: var(--emphatic-padding);
                font-family: sans-serif;

                a:not(:last-child)::after {
                    margin-right: var(--container-padding);
                    margin-left: var(--container-padding);
                    color: var(--text-color);
                    content: "|";
                }
            }

            &#footer {
                font-family: sans-serif;
                text-align: center;
                position: relative;
                bottom: 0;

                #rights,
                #year {
                    display: inline-block;
                }
            }
        }
    }

}