/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
    /* Colors */
    --backgroundColor: #2A161A;
    --textColor: #e5d2d2;
    --boldColor: #b11f3f;
    --italicColor: #ce6b7a;
    --hrColor: #4a1822;
    --borderColor: #4a1822;
    --boxColor: #200d11;
    --h1Color: #fde55b;
    --h2Color: #2d9195;
    --h3Color: #6ac59c;
    --linkColor: #eb7e3e;
    --linkHover: #ee4c05;
    --linkActive: #f7ac7c;
    --linkVisited: #b78263; 
    --navLinkColor: #0e85b1;
    --navLinkHover: #4EBDC0;
    --navLinkActive: #0057A2;
    --navLinkVisited: #0e85b1; 
    
    /* Text Options */
    --lineHeight: 1.5em;
    --textSize: 0.8em;
    --headerTextSize: 1.5em;
    --navTextSize: 1.3em;
    --footerTextSize: 0.8em;
    
    /* Body Layout */
    --leftColumnWidth: 40%;
    --rightColumnWidth: 60%;
    --verticalOrder: column-reverse; /* specifies if the vertical order goes left-right (column) or right-left (column-reverse) */
   
    /* Navigation Layout */
    --navSpacing: 1rem; /* space between links */
    --navJustify: flex-end; /* look up flexbox justify-content for more options */
    
    /* Main Content Layout */
    --textMarginTop: -6rem;
    --textMarginBottom: 1rem;
    --contentMinWidth: 400px; /* Main Content Minimum Width */
    
    /* Splash Image */
    --splashImageWidth: 200px; /* max width of the splash image */
    --splashMobileWidth: 100px; /* width of splash image when resized for small screens */
}

/* Edit margins of main elements here */
header {
    margin: 1rem 4rem;
    font-size: var(--headerTextSize);
    letter-spacing: 5px;
}
nav {
    margin: 1rem;
}
main {
    margin: 1rem 2rem 1rem 4rem;
}
footer {
    margin: 1rem;
    text-align: center;
    font-size: var(--footerTextSize);
}
h2, h3 {
    margin: auto 1.2rem;
}
p {
    text-indent:1.5em;
}
/* splash image position */
#splash-image {
    bottom: 25px;
    left: 25px;
}


/* The rest of the styling is here */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    margin: 0;
    background-color: var(--backgroundColor);
    color: var(--textColor);
    line-height: var(--lineHeight);
    font-size: var(--textSize);
    font-family: sans-serif;
}
nav {
    display: flex;
    gap: var(--navSpacing);
    justify-content: var(--navJustify);
    flex-wrap: wrap;
    font-size: var(--navTextSize);
}
nav a:link {
    color: var(--navLinkColor);
    text-decoration: none;
}
nav a:visited {
    color: var(--navLinkVisited);
}
nav a:hover {
    color: var(--navLinkHover);
}
nav a:active {
    color: var(--navLinkActive);
}
h1 {
    color: var(--h1Color);
}
h2 {
    color: var(--h2Color);
}
h3 {
    color: var(--h3Color);
}
a:link {
    color: var(--linkColor);
    text-decoration: underline;
    text-decoration-style: dotted;
}
a:visited {
    color: var(--linkVisited);
}
a:hover {
    color: var(--linkHover);
}
a:active {
    color: var(--linkActive);
}

b, strong {
    color: var(--boldColor); 
}
i, em {
    color: var(--italicColor);
}
hr {
    border: none;
    border-top: 2px solid var(--hrColor);
}
.columninator {
    display: flex;
}
.columninator .left {
    order: 1;
    width: var(--leftColumnWidth);
}
.columninator .right {
    order: 2;
    width: var(--rightColumnWidth);
}
#bg-banner-image {
    width: 100%;
}
#splash-container {
    width: 100%;
}
.left > #splash-container{
    max-width: var(--leftColumnWidth);
}
.right > #splash-container {
    max-width: var(--rightColumnWidth);
}
#splash-image {
    position: fixed;
    z-index: -2;
    max-width: inherit;
    width: 100%;
}
#splash-image img {
    width: 100%;
    max-width: var(--splashImageWidth);
}
#site-content {
    min-width: var(--contentMinWidth);
}
.site-text {
    margin-top: var(--textMarginTop);
    margin-bottom: var(--textMarginBottom);
    text-align: justify;
}
.box {
    margin: 1em auto;
    max-width: fit-content;
    background-color: var(--boxColor);
    border: 1px solid var(--borderColor);
}
.box p {
    margin: 1em;
    text-indent: 0;
}


/* Responsive Styling */
/* edit the @media max-width to change how narrow the browser window 
   has to be before it switches to a single column layout */
@media only screen and (max-width: 600px) {
    .columninator {
        flex-direction: var(--verticalOrder);
    }
    .columninator .left, .columninator .right {
        width: 100%;
    }
    
    header, nav, main {
        margin: 1rem;
    }
    
    #site-content {
        min-width: 100%;
    }
    
    .left > #splash-container, .right > #splash-container {
        max-width: 100%;
    }
    
    #splash-image {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }
    #splash-image img {
        width: var(--splashMobileWidth);
    }
}