:root
{
    /* Theme - Color Palette */
    --charcoal: #33302e;
    --soot: #292625;
    --ash: #1d1a16;
    --gravel: #9e948f;
    --silt: #8a817c;

    --egg: #f8f8f8;
    --cream: #e6d7cf;
    --butter: #ecded5;

    --pumpkin: #ff8040;
    --clay: #cc763d;

    /* Theme - Colors */
    --bg-color: var(--ash);

    --title-text-color:var(--cream);

    --heading-text-color:var(--gravel);
    
    --body-text-color:var(--egg);
    --body-text-highlight-color:var(--pumpkin);

    --footer-bg-color:var(--soot);
    --footer-text-color:var(--gravel);
    --footer-link-color:var(--silt);
    --footer-link-hover-color:var(--pumpkin);

    --link-color:var(--clay);
    --link-hover-color:var(--pumpkin);
    --link-active-color:var(--clay);
    --link-visited-color:var(--silt);

    /* Theme - Typefaces */
    --typeface-dm-sans: "DMSans", sans-serif;
    --typeface-ibm-plex-mono: "IBMPlexMono", sans-serif;
    --typeface-eb-garamond: "EBGaramond", serif;
    --typeface-crimson-text: "CrimsonText", serif;

    /* Theme - Fonts */
    --title-font-family: var(--typeface-crimson-text);
    --title-font-size: 0.8in;
    --title-font-weight: 500;
    --title-font-lineheight: 1.5;

    --header-font-family: var(--typeface-eb-garamond);
    --header-font-weight: 800;
    --header-font-lineheight: 1.5;

    --body-font-family: var(--typeface-dm-sans);
    --body-font-size: 22px;
    --body-font-weight: 400;
    --body-font-lineheight: 1.6;

    --code-font-family: var(--typeface-ibm-plex-mono);
    --code-font-size: 22px;
    --code-font-weight: 400;
    --code-font-lineheight: 1.5;

    --footer-font-family: var(--typeface-dm-sans);
    --footer-font-size: 16px;
    --footer-font-weight: 400px;
    --footer-font-lineheight: 1.5;
}

*
{
    margin:0;
    padding:0;
}

/* Links */
a
{
    color:var(--link-color);
    transition: color 0.25s;
}
a:hover, a:visited:hover
{
    color:var(--link-hover-color);
    transition: color 0.35s;
}

/* Headings */
h1,h2,h3,h4
{
    color:var(--heading-text-color);
    
    font-family: var(--header-font-family);
    font-weight: var(--header-font-weight);
    line-height: var(--header-font-lineheight);
}

/* Paragraphs */
p
{
    text-align:justify;

    font-size:var(--body-font-size);
    line-height: var(--body-font-lineheight);
}

p a
{
    color:var(--footer-link-color);
}

/* Sections */
.section
{
    margin-bottom:32px;
}

.section:last-of-type
{
    margin-bottom:96px;
}

.section h2
{
    margin-bottom:16px;
}

/* Centered Layout */
.centered
{
    text-align:center;
}

/* Three-Column Layout */
.col-3
{
    display:flex;
    justify-content: space-between;
    gap:16px;
}

.col-3 .column
{
    display:block;
    flex-basis: 3;
    width:100%;
}

.col-3 .column ul
{
    list-style-type: none;
}

/* Two-Column Layout */
.col-2
{
    display:flex;
    justify-content: space-between;
    gap: 16px;

    width:100%;
}

.col-2 .column
{
    display:block;
    flex:2;
    width:100%;
}

.col-2 .column ul
{
    list-style-type: none;
}

.col-2 .col-40
{
    flex:40;
}

.col-2 .col-60
{
    flex:60;
}

/* Useful Stuff */
.right-align
{
    text-align: right;
}

/* Website */
html, body
{
    min-height:100%;
}

body
{
    display:flex;
    flex-direction:column;
    
    min-height:100vh;

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

    font-family:var(--body-font-family);
    font-size:var(--body-font-size);
    font-weight:var(--body-font-weight);
    line-height:var(--body-font-lineheight);
}

/* Main */
#main
{
    display:flex;
    flex-direction:column;
    flex:1;

    width:70vw;

    margin-left:auto;
    margin-right:auto;
    margin-top:7vw;
}

.header
{
    margin-bottom:32px;
}

.header .title
{
    color:var(--title-text-color);
    font-family:var(--title-font-family);
    font-size:var(--title-font-size);
    font-weight:var(--title-font-weight);
    line-height:var(--title-font-lineheight);
}

.header .subtitle
{
    color:var(--title-text-color);
}

#about
{
    text-align: center;
}

#about p
{
    max-width:40vw;

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

/* Footer */
#footer
{
    background-color:var(--footer-bg-color);
    
    box-sizing:border-box;
    border-top:1px solid var(--charcoal);
}

#footer .content
{
    display:flex;

    width:70vw;

    margin-left:auto;
    margin-right:auto;
    margin-top:32px;
    margin-bottom:32px;

    color:var(--footer-text-color);

    font-family:var(--footer-font-family);
    font-size:var(--footer-font-size);
    font-weight:var(--footer-font-weight);
    line-height:var(--footer-font-lineheight);
}

#footer ul li
{
    line-height:1.5;
}

#footer a
{
    color:var(--footer-link-color);
    transition: color 0.35s;

    text-decoration:none;
}
#footer a:hover
{
    color:var(--footer-link-hover-color);
    transition: color 0.35s;
}