/* Applies to the entire body of the HTML document (except where overridden by more specific
selectors). */

@font-face { /* Allows us to load custom font */
    font-family: 'DOS';
    font-style: normal;
    font-weight: normal;
    src: url("./Fixedsys500c.eot");
    src: local("☺"), url("./Fixedsys500c.woff") format("woff"), url("./Fixedsys500c.ttf") format("truetype"), url("./Fixedsys500c.svg") format("svg"); 
}

@font-face { /* Allows us to load custom font */
    font-family: 'DOS-text';
    font-style: normal;
    font-weight: normal;
	font-weight: 400;
/*  src: url("./Px437_ApricotXenC.ttf") format("truetype");*/
/*  src: url("./ProFontWindowsNerdFontMono-Regular.ttf") format("truetype");*/
    src: url("./ProFontWindows.woff2") format("woff2");
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body{
        font-size: 20px;
    }
    div.parent-column{
        max-width: 90%;
    }
    div.main-column{
        max-width: 90%;
    }
    div.navbar {
        flex-direction: column;
    }
    /*our screen is too small, fully remove*/
    div.minor-column{
        display: none;
    }
    div.major-column{
        padding-left: 0em;
    }
    div.title-column{
        flex:1.5
    }
    figure{
        margin: .5em .5em .5em .5em;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body{
        font-size: 16px;
    }
    div.parent-column{
        max-width: 90%;
    }
    div.main-column{
        max-width: 90%;
    }
    div.navbar {
        flex-direction: row;
    }
    /*our screen is too small, fully remove*/
    div.minor-column{
        display: none;
    }
    div.major-column{
        padding-left: 0em;
    }
    div.title-column{
        flex:1.5
    }
    figure{
        margin: .75em .75em .75em .75em;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    body{
        font-size: 18px;
    }
    div.parent-column{
        max-width: 80%;
    }
    div.main-column{
        max-width: 80%;
    }
    div.navbar {
        flex-direction: row;
    }
    div.minor-column{
        display: block;
    }
    div.major-column{
        padding-left: 2em;
    }
    div.title-column{
        flex:3
    }
    figure{
        margin: 1em 1em 1em 1em;
    }
}



/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body{
        font-size: 16px;
    }
    div.parent-column{
        max-width: 80%;
    }
    div.main-column{
        max-width: 80%;
    }
    div.navbar {
        flex-direction: row;
    }
    div.minor-column{
        display: block;
    }
    div.major-column{
        padding-left: 2em;
    }
    div.title-column{
        flex:3
    }
    figure{
        margin: 1em 1em 1em 1em;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body{
        font-size: 16px;
    }
    div.parent-column{
        max-width: 50%;
    }
    div.main-column{
        max-width: 50%;
    }
    div.navbar {
        flex-direction: row;
    }
    div.minor-column{
        display: block;
    }
    div.major-column{
        padding-left: 2em;
    }
    div.title-column{
        flex:3
    }
    figure{
        margin: 1em 1em 1em 1em;
    }
}

@media print {
    div.minor-column{
        display:none;
    }
    body{
        color: #000000;
    }
    p.warning{
        display:none;
    }
    p.footer{
        display:none;
    }
    a{
        color:#000000;
        background:none;
    }
    a:hover,
    a:focus {
        color: #000000;
        background: none; 
    }
    blockquote{
        color: #000000;
    }
}

/* I do not want to ever generate a website wider than your page*/
:root {
    max-width:100%;
    overflow-x:hidden;
}

body {
    margin: 0px; 
    background-color: rgb(240,240,240);
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    background: #000084;
    min-height:100vh;
    color: #bbbbbb;
}

div.center_container { /* a div class */
    display: flex; /* as wide as the window */
    justify-content: center; /* put text in the center */
    white-space: pre-line; /* treat newlines as real */
}

div.navbar {
    display: flex;
    width: 100%;
    /*    padding-top: 2px; */
    line-height: 1.2em;
    /*  height: 1em; */
    padding-left: .2em;
    background: #bbbbbb;
}

aside.sidebar-nav-list{
    color: #bbbbbb;
}

ul.nav-button{
    display: block;
    padding: .4em .2em;
    margin: 10px 5px;
    margin-left: -5px;
    border: 2px solid #000000;
    -webkit-box-shadow: 0 0 0 5px, -11px 13px 0 4px black;
    -moz-box-shadow: 0 0 0 5px, -11px 13px 0 4px black;
    box-shadow: 0 0 0 5px, -11px 13px 0 4px black; 
    margin-bottom: 20px;
    margin-left: 0;
    list-style: none;
    background: #bbbbbb;
}

ul.nav-button > li > a:hover{
    background: none;
}

img.sidebar-button{
  filter: grayscale(100%);
}

img.sidebar-button:hover{
  filter: grayscale(0%);
}

ul.nav-list {
    display: block;
    padding: .4em .2em;
    margin: 10px 5px;
    margin-left: -5px;
    border: 2px solid #000000;
    -webkit-box-shadow: 0 0 0 5px, -11px 13px 0 4px black;
    -moz-box-shadow: 0 0 0 5px, -11px 13px 0 4px black;
    box-shadow: 0 0 0 5px, -11px 13px 0 4px black; 
    margin-bottom: 20px;
    margin-left: 0;
    list-style: none;
    background: #bbbbbb;
}

.nav-list > ul > li {
    display: block;
    background: #bbbbbb;
}

.nav-list  li > a {
    text-align: right;
    display: block;
    color: #000000;
    padding-left: 1em;
    padding-right: 0.4em;
}

.nav-list li:hover{
  background: #000000;
}

.nav-list li:hover a{
  color: #bbbbbb;
  background-color: #000000;
}

.nav-list li:hover img{ 
  filter: invert(70%);
}

div.spacer::before{ /* Force a blank space to give a minimum height to our spacer div */
    content: "\200B";
}

div.heading-banner{
    padding: 0.8em 1.2em;
    background: #009999;
}

div.parent-column{
    padding: 0.8em 1.2em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;

}

div.merged-column{
    display: flex;
    flex-direction: row-reverse;
}

div.major-column{
    display: flex;
    flex-direction: column;
    flex: 3;
    min-width: 0; /* stops flex columns from disappearing if one is too large */
    max-width: 100%;
}

div.minor-column{
    flex-direction: row;
/*  flex: 1;*/
    min-width: 0; /* stops flex columns from disappearing if one is too large */
}

div.single-post-reference{
    display: flex;
    flex-direction: row;
    width: 100%;
}

div.date-column{
    /*font-size: 16px;*/
    flex-direction: column;
    flex: 1;
    min-width: 0; /* stops flex columns from disappearing if one is too large */
    padding-left: .5em;
}

div.title-column{
    /*font-size: 16px;*/
    flex-direction: column;
    text-align: right;
    /*flex: 3;*/
    min-width: 0; /* stops flex columns from disappearing if one is too large */
    padding-right: .5em;
}

div.title-column > p{
    margin: 0 0 10px;
}

div.date-column > p{
    margin: 0 0 10px;
}

/* I would like printing to handle links differently */
@media screen {
    a:hover,
    a:focus {
        color: #fefe54;
        background: #aa5500; 
    }

    a{
        color: #fefe54;
        text-decoration: none;
    }
    /* Out of respect for the cost of color ink */
    section > blockquote{
        color: #fe54fe;
    }
}


a.nav-head{
    color: #000084;
    display: flex;
    flex-direction: column; /* flexing in the opposite direction to put all bullet points on one line*/
    flex-basis: 100%;
    text-decoration: none; /* remove blue highlight and underlight for links */
}

a.nav-item{
    color: #000000;
    display: flex;
    flex-direction: column; /* flexing in the opposite direction to put all bullet points on one line*/
    flex-basis: 100%;
    text-decoration: none; /* remove blue highlight and underlight for links */
    padding: 0 10px;
}

a.nav-item:hover{ /* reverse colors when mouse is over a nav-item */
    color: #bbbbbb;
    background: #000000;
}

a.nav-item-sitename{
    color: #bbbbbb;
    background: #000000;
    display: flex;
    flex-direction: column; /* flexing in the opposite direction to put all bullet points on one line*/
    flex-basis: 100%;
    text-decoration: none; /* remove blue highlight and underlight for links */
    padding: 0 10px;
}

ul{
    all: inherit;
    list-style-type: none; /* no bullet point in the unordered list <li> */
}

article > ul{
    list-style-type: square;
}

li{
    /*    padding: 0 10px;*/
}

p{
    color: #bbbbbb; 
    margin: 0px 0px 20px;
}

hr{ /* used for wide horizontal line */
    margin: 6px 0 7px; 
    border-top: 0px solid  #ffffff;
    border-bottom: 2px solid #ffffff;
}

article{
    font-family: DOS-text, Monaco, Menlo, Consolas, "Courier New", monospace;
    color: #ffffff;
    box-sizing: border-box; /* without this our text element will grow past the parent div size*/
    width: 100%;
    overflow-wrap: break-word; /* to cleanly handle wrapping long lines */
    font-size: 16px; /* redefine per media type, ~80 char per line*/
}

article > p{
    color: #ffffff;
/*  white-space: pre-line;*/
}

article > ul{
    margin: 0 0 20px 20px;
}

article > h3{
    margin: 0px 0px 20px;
}

section{
    margin-bottom:36pt;
    margin-top:18pt;
}

section > p{
    color: #ffffff;
    line-height: 1.3;
}

sup {
    line-height: 0;
}

h1{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #ffffff;
}

h2{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #ffffff;
    text-align: center;
}

h3{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #ffffff;
}

h3::before{ /* Force a blank space to give a minimum height to our spacer div */
    content: ">>> ";
}

h3::after{ /* Force a blank space to give a minimum height to our spacer div */
    content: " <<<";
}

h4{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #fe54fe;
}

h5{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #bbbbbb;
}

h6{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: inherit;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    color: #bbbbbb;
}

code{
    font-family: DOS-text, Monaco, Menlo, Consolas, "Courier New", monospace;
    /*display: block;*/
    padding: 0;
    margin: 0 0 10px;
    white-space: pre;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #000000;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #f8f8f2;
}

pre > code {
    display: block;
}

img.banner-icon{
    vertical-align: middle;
}

img.feed{
    vertical-align: middle;
}

/* Set the Author + date text-boxes to the right side of the screen*/
p.nomdeplume{
    position: relative;
    bottom: 0;
    right: 0;
    text-align: right;
}

/* Render as 2 boxes instead one one */
span.nomdeplume{
    background-color: #00aa00;
    color: #ffffff;
    display: inline-block;
    padding: 0 12.4px;
    margin-top: 12.4px;
    text-align: right;
}

span.nomdeplume::before{
    content: "∵";
}

/* Render as 2 boxes instead one one */
span.date{
    background-color: #00aa00;
    color: #ffffff;
    display: inline-block;
    padding: 0 12.4px;
    margin-top: 12.4px;
    text-align: right;
}

span.date::before{
    content: "∴";
}

/* Scale and add a white box around this */
p.pseudoterm{
    border: 2px solid #bbbbbb;
    font-size: 18px;
    padding: 10px;
}

section.gallery{
    display: grid;
    grid-template-columns: auto auto;
    /*max-width: 768px;*/
    margin-bottom: 1em;
}

img.gallery-photo{
    max-width: 100%; 
    height: auto;
}

a.thumbnail{
    display: block;
    padding: 3px 6px;
    margin: 4px 3px;
    border: 1px solid #ddd;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
    display: flex;
    align-items: center;
}

table.sodas{
    border-collapse: collapse;
    font-family: DOS-text, Monaco, Menlo, Consolas, "Courier New", monospace;
}

table.sodas > tbody > tr {
    border: 1px solid #ddd;
}

table.sodas > tr > td{
    border: 1px solid #ddd;
}

td.img {
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    /*min-width: 33%;*/
    min-height: 100%; 
}

a.soda_img{
    display: block;
    padding: 3px 6px;
    margin: 4px 3px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
}

a.soda_img > figure {
    margin: 0em 0em 0em 0em;
}

p.warning{
    font-family: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
    text-align: center;
    border-style: dashed solid;
    border-color: #fefe54;
    border-width: .2em;
    color: #fefe54;
}

p.warning > img {
    display: inline;
    white-space: nowrap;
    vertical-align: center;
}