body {
    font-family: Verdana, "Geneva", Tahoma, sans-serif;
    background-color: #22242a;
    font-size: 16px;
    color: #fff8e7;   /* changes the color of ALL text, including h1,h2, li, etc. */
    /* em is based on the font's current size, like a multiplier */
}

p {
    margin: 15px
}

h1,
h2,
h3 {
    text-shadow: 2px 2px 1px black;  
    margin: 8px 0 3px 3px
    /*background-color: #2f263a;*/
    /*margin: 0;*/
    /*padding: 10px;*/
    /*border-style: solid;*/
    /*border-width: 1.5px;*/
    /*border-radius: 6px;*/
    /*border-color:#b293ca;*/
}

img {
    display: block; /*while body is a block element and allows padding/margin/etc, images are not. this makes iamges block elems*/
    margin: 8px auto;
    padding: 8px;
    max-width: 100%;
}

/* links */

a {
    color: #a88bcc;
}

a:visited {
    color: #6a5682;
    text-decoration: none;
}

a:hover, a:focus {
    color: lavender;
    text-decoration: none;
}

/* classes */

.main {
    width: 850px;
    margin: 1em auto; /*auto divides the available horizontal space between the left/right*/
    padding: 0 20px 20px 20px; /*top, right, bottom, and left */
    box-sizing: border-box;
}

.tagline {
    margin: 0px 0 0 0px; /* idk if negative top margins are good */
    text-shadow: 1px 1px 1px black; 
    color: #d4cec1;
}

.contentBox {
    background-color: #2f263a;
    margin: 10px;
    padding: 5px 10px 5px 10px;
    width: fit-content;
    border-radius: 6px;
    /*border-style: solid;*/
    /*border-width: 1.5px;*/
    /*border-color:#b293ca;*/
}

.sidebarL {
    background-color: #2f263a;
    margin: 10px 10px 0px 10px; /*!TODO! this margin is VERY awkward i don't think it'll work FIX IT*/
    padding: 0 5px 85% 5px;
    float: left;
}