/*
Reset some basic elements
*/

body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0;
}

/* 
Website Colors
*/

:root{
    --miedo-site-background-color:#496ca8;
    --miedo-site-navbar-border:#004d64;
    --miedo-site-navbar-color:#a0cafd;
    --miedo-site-navbar-text:#004357;
    --miedo-content-container-border:#184974;
    --miedo-content-container-color:#a0cafd;
    --miedo-accent-container-border:#573a70;
    --miedo-accent-container-color:#DDB9f8;
    --miedo-spoiler-container-border:#8f3c55;
    --miedo-spoiler-container-color:#8f5164;
    --miedo-heading-text:#1d2c72;
    --miedo-content-text:#001e46;
    --miedo-accent-text:#541c81;
}

/* Text Style and Behavior */

a:link {
    text-decoration: none;
    font-weight:bolder;
    color: var(--miedo-accent-text);
}
a:visited {
    text-decoration: none;
    color: var(--);
}

a:hover {   
    text-decoration: underline;
    color: var(--miedo-accent-container-border)
}

a:active {
    text-decoration: underline;
    color: var(--miedo-content-text);
}

p {
    font-family: "Open Sans", Verdana, sans-serif;
    font-size: 1rem; 
    padding:.75rem;
    line-height: 1.75rem;
}
li {
    font-family: "Open Sans", Verdana, sans-serif;
    font-size: 1rem; 
    line-height: 1.75rem;
    margin:1rem;
}

h1,h2,h3 {
    font-family: Merriweather, Garamond, serif;
}

h1 {
    font-size: 2rem;
    padding-bottom:1rem;
    font-weight: bolder;
    color: var(--miedo-heading-text)
}

h2 {
    font-size: 1.5rem;
    padding-bottom:.5rem;
    font-weight:bold;
    color: var(--miedo-accent-text)
}
h3 {
    font-size: 1.25rem;
    font-weight:bold;
    color: var(--miedo-accent-text)
}

strong {
    color: var(--miedo-heading-text);
}

.centerContainer div {
    margin-left:auto !important;
    margin-right: auto !important;
}

/* Define Skeleton and Containers */

body {
    background-color: var(--miedo-site-background-color);
}

.siteWrapper {
    margin: 1.5rem;
    /* background-color:black; */
}


.welcomeHeaderContainer {
    color: var(--miedo-site-navbar-text);
    display:flex;
}

.welcomeHeaderBanner {
    background-color:var(--miedo-site-navbar-color);
    padding:1rem;
    margin: 2rem;
    width:80%;
    max-width: 1600px;
    border: .25rem solid var(--miedo-site-navbar-border); 
}

.welcomeHeaderImage {
    float:left;
    padding-right:1rem;
}

.siteNavbar {
/*     background-color: var(--miedo-site-navbar-color); */
/*     border: .25rem solid var(--miedo-site-navbar-border); */
    color:var(--miedo-site-navbar-text);    
    font-size: 1.5rem;
    font-weight:bold;
    font-family: Merriweather;
    padding:1rem;

}

.siteFooter { 
    margin:2rem;
    padding:1rem;
    width: 80%;
    max-width: 1600px;
    background-color: var(--miedo-site-navbar-color);
    border: .25rem solid var(--miedo-site-navbar-border);
}

/* Site Body Wrappers */

.siteBodyWrapper {
    display:flex;
}

.siteBodyMain {
    width: 70%;
    padding: 1.5rem;
    background-color: var(--miedo-content-container-color);
    color: var(--miedo-content-text);
    border: .25rem solid var(--miedo-content-container-border);
    height:fit-content;
    max-width: 800px;
}

.siteBodySidebar{
    width:30%;
    padding: 2rem;
    margin: .25rem;
    background-color: var(--miedo-content-container-color);
    color: var(--miedo-content-text);
    border: .25rem solid var(--miedo-content-container-border);
    max-width: 400px;
}

.siteBodyGutter {
    width: 20%;
    padding: 1rem;
    margin: .25rem;
    background-color: var(--miedo-accent-container-color);
    color: var(--miedo-accent-text);
    border: .25rem solid var(--miedo-accent-container-border);
    max-width: 250px;
}