main.css


/*
:root {
    --cBg: hsl(0,0%, 95%);
    --cHead: hsl(0,50%,50%);
    --cMain: hsl(0,0%,98%);
    --cFoot: hsl(0,0%,40%);
}

html {
    padding:0;
    margin:0;
}
body {
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    background: var(--cBg);
}

header {
    background: var(--cHead);
}
main {
    flex: 1;
    background: var(--cMain);
}
footer {
    background: var(--cFoot);

}
*/


html,
body {
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    background: var(--color_off_white_bright);
}

html {}

body {
    display: flex;
    flex-direction: column;
    position:relative;
}

html {
    
    
    --color_primary_text: #FFEDCC;
    /*                 --color_contrast: #FFCF00;
    --color_contrast: #FaDF30; */
    --color_contrast: #FCDA30;
    --color_contrast_bright: #FCDA30;
    --color_contrast_dark: #EAC020;
    
    --color_menu_background: #FFFDFA;
    --color_footer: #585460;
    --color_off_white: #EEEEEE;
    --color_off_white_bright: #F6F6F6;
    --color_project_tile: #EAE7EE;
    --color_primary_tint: #50009211;
    --height_header: 3rem;
    
    --padding_main: 0.7rem;
    --padding_main_small: 0.3rem;
    
    
    --color_primary: #500092;
    --color_primary_light: #000;
    --color_primary_dark: #200070;
    --color_secondary: #000;
    --color_secondary_light: #000;
    --color_secondary_dark: #000;
}

html {
    
    --color_primary: darkred;
    --color_primary_light: #ef3d47;
    --color_primary_dark: darkred;

    --color_contrast: white;
    --color_contrast_bright: darkred;
    --color_contrast_dark:#200070;

    --color_secondary: #111;
    --color_secondary_light: #222;
    --color_secondary_dark: #111;
    

    --color_primary_text: black;
    --color_text_one: yellow;
    
    
    --color_menu_background: #222;

    --color_off_white: #F8F8F8;
    --color_off_white_bright: #FEFEFE;
    --color_primary_tint: #50009211;

    --color_background_content: #FEFEFE;
    --color_background_footer:  lightgrey;

    --color_link_primary: rgb(94, 12, 12);
    --color_link_primary_active: rgb(21, 62, 151);
    --color_link_primary_visited: var(--color_contrast_bright);

    --color_link_secondary: blue;
    --color_link_secondary_active:pink;
    --color_link_secondary_visited:green;


    
    --height_header_item: 1.5rem;

    --padding_main: 0.0rem;
    --padding_main_small: 0.0rem;
    --padding_content:1.5rem 1.0rem 1.5rem 1.0rem;
    --padding_content: 0;
    --padding_content_side: 1.5rem;
    --padding_content_first_child: 1.5rem 1.0rem 1.5rem 1.0rem;
    --padding_content_first_child_vertical: 1.5rem;
    --padding_content_first_child_horizontal: 1.0rem;
    --padding_content_item: 0.5rem 1.5rem 0.5rem 1.5rem;

    
    --_legend_size: 2rem;


}




html {

    --color_primary_text: #FFEDCC;
    /*                 --color_contrast: #FFCF00;
    --color_contrast: #FaDF30; */
    --color_contrast: #FCDA30;
    --color_contrast_bright: #FCDA30;
    --color_contrast_dark: #EAC020;
    
    --color_menu_background: #FFFDFA;
    --color_footer: #585460;
    --color_off_white: #EEEEEE;
    --color_off_white_bright: #F6F6F6;
    --color_project_tile: #EAE7EE;
    --color_primary_tint: #50009211;
    --height_header: 3rem;
    
    --padding_main: 0.7rem;
    --padding_main_small: 0.3rem;
    
    
    --color_primary: #500092;
    --color_primary_light: #000;
    --color_primary_dark: #200070;
    --color_secondary: #000;
    --color_secondary_light: #000;
    --color_secondary_dark: #000;
}



html {
    
    
    --color_primary_text: #FFEDCC;
    /*                 --color_contrast: #FFCF00;
    --color_contrast: #FaDF30; */
    --color_contrast: #FCDA30;
    --color_contrast_bright: #FCDA30;
    --color_contrast_dark: #EAC020;
    
    --color_menu_background: #FFFDFA;
    --color_footer: #585460;
    --color_off_white: #EEEEEE;
    --color_off_white_bright: #F6F6F6;
    --color_project_tile: #EAE7EE;
    --color_primary_tint: #50009211;
    --height_header: 3rem;
    
    --padding_main: 0.7rem;
    --padding_main_small: 0.3rem;
    
    
    --color_primary: #500092;
    --color_primary_light: #000;
    --color_primary_dark: #200070;
    --color_secondary: #000;
    --color_secondary_light: #000;
    --color_secondary_dark: #000;
}





footer {
    margin:0;
    padding:0;
    width:100%;
    background: var(--color_off_white);
}
footer .contentArea {
  min-height:0px;
}
#footer {
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--color_background_footer);
    padding: 0 0 8px 0;
    margin:0;
    flex-direction:column;
    border-top: 1px solid black;
  }
  
  #footer h4 {
    color:var(--color_primary_text);
  }
  
  #footer_container {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:100%;
    height:100%;
    max-width:1024px;
  }
  
  #footer_container > div {
    flex:1;
    margin:0 16px 0 16px;
  }
  
  #footer ul {
    list-style-type:none;
    padding-left:8px;
    margin-top:0;
    padding-top:0;
  }

  #footer ul a:visited, #footer ul a {
    color:var(--color_link_primary_visited);
    text-decoration: none;
    padding: 0.2em;
  }
  #footer ul li {
    margin-left:-0.5rem;
  }
  #footer ul li::before {
    content: "-";
    margin-right:0.5rem;
  }

  #footer a, #footer a:visited {
    color:var(--color_link_primary);
    display:inline-block;
}







header {
    margin: 0;
    padding:0;
    width: 100%;
    background: var(--color_primary);
    border-bottom: 1px solid black;
    box-shadow: inset 0px -6px 12px -4px var(--color_contrast);
}

#header {
    
    justify-content:left;
}
#header .desktopWrap {
    display:flex;
    flex-flow: row wrap;
    vertical-align:middle;
    justify-content:left;
    padding:0.5em 0.5em 0.5em 0.5em;
}

#header #siteTitle {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    text-overflow: ellipsis;
    padding:0 0.5em 0 0;
    color: var(--color_text_one);
}


#header #siteTitle:active, #header #siteTitle:hover, #header #siteTitle:focus {
    color:var(--color_primary_dark);
}


#header a {
    display:table-cell;
    display:inline;
    vertical-align: middle;
    align-self:flex-center;
    text-align:center;
    color:white;

}
#header a.menuItem{

    /* padding: 14px 16px; */
    padding:0.5em;
    text-decoration: none;
    font-size: 17px;
    border-right: 1px solid rgba(0,0,0,0.7);
    border-bottom: 1px solid rgba(0,0,0,0.7);
    border-top: 1px solid rgba(0,0,0,0.2);
    border-left: 1px solid rgba(0,0,0,0.2);
    border-color:rgba(150,150,150,0.8);
    background:black;
}

#header {
    border-width:0 1px 0 0;
    border-top:1px solid black;

}

#header a:active, #header a:hover, #header a:focus {
    background: lightgrey;
    /* color: var(--color_primary_light); */
    color: var(--color_primary);
}

header a {
    text-decoration: none;
    color: var(--color_secondary_light);
    font-size: 1.2rem;
    cursor: pointer;
    text-overflow: ellipsis;
    display: block;
    padding: 0.4rem 2rem 0.4rem 1.0rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: var(--color_primary_light);
}

header a:visited:not(:hover):not(:active) {
    color:initial;
}











main {
    padding: var(--padding_main);
    flex: 1 1 auto;
    background: var(--color_off_white);
    border-left:1px solid var(--color_primary_dark);
    border-right:1px solid rgba(0,0,0,0.1);
}



.desktopWrap {
    
    max-width:1024px;
    margin-left:auto;
    margin-right:auto;
}

.contentArea {
    min-height:100%;
    background:var(--color_background_content);

    padding:var(--padding_content);
    max-width:60rem;
    margin-left:auto;
    margin-right:auto;
    border-left: 1px solid rgba(150,150,150,0.5);
    border-right: 1px solid rgba(150,150,150,0.5);

}

/* .contentArea .desktopWrap > * {
    padding:0 var(--padding_content_side);
}
.contentArea .desktopWrap > *:first-child {
    margin:0;
    padding:var(--padding_content_first_child);
} */

.contrastedContent {
    background:rgba(232, 238, 255, 0.7);
    /* padding:var(--padding_content_vertical), var(--padding_content_side) !important; */
    padding:var(--padding_content_item) !important;
}

section:not(.noPad) {
    padding:1rem;
}

.headerImage {
    width:100%;
    height:400px;
    background-size:cover;
    background-position: center center;
}








.desktopWrap #mzIntro:first-child {

    background: rgba(calc(200 * 80 / 146), 0, calc(200 * 146/146), 0.1);
    margin:0;
}

#contentArea .desktopWrap #mzIntro {
    padding:0;
    margin:0;
}

#contentArea .desktopWrap #mzIntro > * {
    padding:0.5em;
}
#contentArea .desktopWrap #mzIntro:first-child img{
    background: rgba(0,0,0, 0.8);
    padding:0;
}


.noContentPad {
    margin: calc(-1 * var(--padding_content_first_child_vertical)) 0 0 calc(-1 * var(--padding_content_first_child_horizontal));
    width: calc(100% + var(--padding_content_first_child_horizontal) * 2);
    margin:0;
    padding:0;
}


#contentArea .desktopWrap div.redirectMessage {
    background:rgba(150,0,0,0.3);
    padding:0.5em;
}