:root {
    /* This site will have a very basic color scheme that works in line with OS preferences, ie., light, dark, or high contrast. */
    --color-primary: #ffffff;
    --color-secondary: #000000;
    --color-tertiary: #272727;
    --color-quaternary: #ffea00ba;
    /* Text highlight color */

    /* Fonts */
    --ff-regular: 'robotolight', sans-serif;
    --ff-light: 'robotothin', sans-serif;
    --ff-medium: 'robotomedium', sans-serif;
    --ff-bold: 'robotobold', sans-serif;

    /* Font sizes */
    --fs-xxsmall: .6em;
    --fs-xsmall: .8em;
    --fs-small: .9em;
    --fs-regular: 1.0em;
    --fs-medium: 1.2em;
    --fs-large: 1.4em;
    --fs-xlarge: 2.4em;
    --fs-xxlarge: 3.4em;
}

html {
    color-scheme: light dark high-contrast;
}

body {
    font-family: var(--ff-regular);
    font-size: 1.0em;
    line-height: 1.6em;
    font-weight: normal;
    /* What is normal? */
    background-color: var(--color-primary);
    color: var(--color-secondary);
    margin: 0;
}

/* Grid */
.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* grid-template-rows: repeat(2, minmax(fit-content, 1fr)); */
    margin: 2rem;
    grid-template-rows: minmax(fit-content, .9fr) minmax(fit-content, .1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". content content content ."
        "footer footer footer footer footer";
}

.footer {
    grid-area: footer;
    font-family: var(--ff-medium);
    font-size: var(--fs-small);
    max-height: fit-content;
    /* border: 1px solid orange; */
}

.content {
    display: grid;
    margin: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(fit-content, .75fr) minmax(fit-content, .1fr) minmax(fit-content, .1) minmax(fit-content, .05fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "captureAll captureAll ads"
        "captureAll captureAll ads"
        "captureAll captureAll ads"
        "buttons buttons ads";
    grid-area: content;
    /* border: 1px solid green; */
}

.captureAll {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(fit-content, .1fr) minmax(fit-content, .8fr) minmax(fit-content, .1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "title title title"
        "article article article"
        "author author author";
    grid-area: captureAll;
}


.title {
    grid-area: title;
    font-family: var(--ff-bold);
    font-size: var(--fs-xlarge);
    max-width: 65ch;
    max-height: min-content;
    /* border: 1px solid red; */
}

.author {
    grid-area: author;
    font-family: var(--ff-medium);
    font-size: var(--fs-large);
    max-width: 65ch;
    max-height: min-content;
    /* border: 1px solid blue; */
}

.article {
    grid-area: article;
    font-family: var(--ff-regular);
    font-size: var(--fs-regular);
    max-width: 65ch;
    max-height: min-content;
    /* border: 1px solid yellow; */
}

.italics {
    font-style: italic;
}

.bold {
    font-family: var(--ff-bold);
}

.smallcaps {
    font-variant: small-caps;
}

.smallerfontsize {
    font-size: var(--fs-small);
}

.largerfontsize {
    font-size: var(--fs-large);
}

ul:before{
    content:attr(aria-label);
    font-size: var(--fs-large);
    font-weight: var(--ff-bold);
    margin-left:-15px;
}

.buttons {
    grid-area: buttons;
}


.title,
.author,
.article {
    padding: 1.5rem;
}

/* .article p::first-letter {
    font-family: var(--ff-bold);
    font-size: var(--fs-xlarge);
    line-height: 1.0em;
    float: left;
    margin: 0 0.15em 0 0;
} */

.ads {
    grid-area: ads;
    max-width: 35ch;
    /* border: 1px solid purple; */
}

/* Form, input, and button styles */
.form_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.8fr 0.2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". form_content form_content form_content ."
        "footer footer footer footer footer";
    margin: 2rem;
    /* border: 1px solid darkslategrey; */
}

.footer_footer {
    grid-area: footer;
    /* border: 1px solid brown; */
}

.form_content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.4fr 0.2fr 3.2fr 0.2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "form_header form_header form_header"
        "form_author form_title form_title"
        "form_article form_article form_article"
        "form_release_date form_expire_date form_privacy";
    grid-area: form_content;
    /* border: 1px solid darkgreen; */
}

.form_header {
    grid-area: form_header;
    /* border: 1px solid black; */
}

.form_author {
    grid-area: form_author;
    /* border: 1px solid green; */
}

.form_title {
    grid-area: form_title;
    /* border: 1px solid blue; */
}

.form_article {
    grid-area: form_article;
    /* border: 1px solid red; */
}

.form_release_date {
    grid-area: form_release_date;
    /* border: 1px solid yellow; */
}

.form_expire_date {
    grid-area: form_expire_date;
    /* border: 1px solid purple; */
}

.form_privacy {
    grid-area: form_privacy;
    /* border: 1px solid orange; */
}