/* class nav: all navigation bar content */

/* class menu-btn: all navigation bar content except the logo */

@font-face {
    font-family: "GenoaItalic";
    src: url("../fonts/genoa_italic_filtered.woff")format("woff");
}

@font-face {
    font-family: "CMU-Serif";
    src: url("../fonts/cmunrm.woff")format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "CMU-Serif";
    src: url("../fonts/cmunbx.woff")format("woff");
    font-weight: bold;
}

@font-face {
    font-family: "CMU-Serif";
    src: url("../fonts/cmunti.woff")format("woff");
    font-style: italic;
}

@font-face {
    font-family: "CMU-Serif";
    src: url("../fonts/cmunbi.woff")format("woff");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "CMU-TT";
    src: url("../fonts/cmuntt.woff")format("woff");
}

@font-face {
    font-family: "CMU-TT";
    src: url("../fonts/cmuntb.woff")format("woff");
    font-weight: bold;
}

@font-face {
    font-family: "CMU-TT";
    src: url("../fonts/cmunit.woff")format("woff");
    font-style: italic;
}

:root {
    --logo-height: 190px;
    --nav-width: 200px;
    --nav-gutter: 1rem;
    --min-btn-ht: 0.5in;
    --max-btn-ht: 170px;
    --logo-margin: 0px;
    --desktop-content-max-x: calc(100vw - var(--nav-width) - var(--nav-gutter));
    --max-chars-per-line: 80ch;

    --default-font-size: 1.3rem;

    --main-color: #F5E8C8;
    --main-color-trasp1: #EBDDB777;
    --main-color-trasp2: #EBCE8477;
    --main-color-opacity: calc(119.0/255.0);
    --nav-background: black;
    --cloud-shadow-high: -5px -5px 3px #fbf9e550, 3px 3px 3px #ebce8480, -3px -3px 3px #ebce8460;
    --cloud-shadow-low: 0px 0px 3px #EBA58480, 4px 3px 3px #816A4B80;
    --cloud-shadow: -5px -5px 3px #fbf9e550, 3px 3px 3px #ebce8480, -3px -3px 3px #ebce8460, 0px 0px 3px #EBA58480, 4px 3px 3px #816A4B80;
    --highlight-shadow: 0px 0px 5px #eedd82;
    --accent-color1: #611D1F;
    --accent-color2: #98585A;
    --accent-color3: #a52a2a;
    --highlight-color1: green;
    --highlight-color1-complement: #800000;
    --highlight-color2: #0080FF;
    --highlight-color2-complement: #FFB861;
    --border-hard: 1px solid #ccc;
    --border-soft: 1px dotted #ccc;
}

.text-browser {
    display: none;
}
ul {
    list-style-type: none;
}

h5, h6 {
    font-size: 1em;
}

/* LaTeX formatting adapted from http://tess.oconnor.cx/2007/08/tex-poshlet */
span.latex-over sub, span.latex-over sup {
    text-transform: uppercase;
}

span.latex-over sub {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

span.latex-over, span.latex-over sub {
    font-size: 1em;
}

span.latex-over sup {
    font-size: 0.7em;
    vertical-align: 0.3em;
    margin-left: -0.45em;
    margin-right: -0.15em;
}

span.em-dash::after {
    content: "–";
}

span.bar-dash {
    visibility: hidden;
}

span.bar-dash::before {
    content: "―";
    visibility: visible;
    position: relative;
    display: inline-block;
    margin-right: -0.8ex;
}

span.acute-e {
}

/* span.acute-e::after { */
/*     content: "\0301"; */
/*     position: relative; */
/*     display: inline-block; */
/*     top: 0.4ex; */
/*     right: 0.1em; */
/* } */

body {
    font-family: "CMU-Serif", serif;
    font-variant-ligatures: common-ligatures;
}

code {
    font-family: "CMU-TT", Courier, monospace;
}

pre {
    font-family: monospace;
}

@media screen {
    body {
	background-image: url("../graphics/background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: left;
	padding: 0px;
	margin: 0px;
    }

    /* default link style */
    main a, aside a {
	text-shadow:  var(--cloud-shadow);
	color: var(--accent-color1);
	text-decoration: none;
    }

    main a:visited, aside a:visited {
	color: var(--accent-color2);
    }
    main a:hover, aside a:hover {
	color: var(--accent-color3);
	text-shadow: var(--highlight-shadow);
    }

    /* style main navigation bar */
    .nav {
	padding: 0px;
	margin: 0px;
	text-decoration: none;
	background-color: var(--nav-background);
	color: var(--main-color);
    }
    .nav * {
	color: inherit;
	text-decoration: none;
    }
    .nav a {
	display: block;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
    }
    label.nav {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
    }
    .menu-btn {
	font-size: 1.5rem;
	text-align: center;
	font-weight: 900;
	font-family: "Courier New", Courier, monospace;
    }
    .menu-btn img {
	height: 60px;
    }
    .nav:hover {
	filter: opacity(0.5);
    }

    .nav:active {
	filter: opacity(0.4);
    }

    /* logo graphic created with CSS */
    div#dwhoman-logo {
	--logo-margin: -8px;
	text-align: center;
	font-family: "GenoaItalic", Courier, monospace;
	font-weight: normal;
	background-color: transparent;
	width: 100%;
	background-color: var(--nav-background);
    }
    div#dwhoman-logo * {
	padding: 0px;
	margin: 0px;
    }
    div#dwhoman-logo a {
	display: block;
	width: 100%;
	height: 100%;
    }
    div#dwhoman-logo span {
	position: relative;
	top: 29px;
	left: calc(10px + var(--logo-margin));
	font-size: 80px;
    }

    div#dwhoman-logo span:first-child {
	vertical-align: -20px;
	margin-right: -14px;
    }

    div#dwhoman-logo span:last-child {
	vertical-align: -20px;
	margin-left: -21px;
    }
    div#dwhoman-logo a::before {
	content: '';
	position: absolute;
	margin-top: 11px;
	margin-left: var(--logo-margin);
	width: 128px;
	height: 128px;
	border: solid 10px currentColor;
	border-radius: 100%;
    }
    /* switch between main menu and blog menu */
    input#expand-blog-menu {
	position: fixed;
	left: -100vw;
	filter: opacity(0);
    }
    label#expand-blog-menu-inactive, label#expand-blog-menu-active {
	cursor: pointer;
    }
    input#expand-blog-menu:checked ~ .menu {
	display: none;
    }

    input#expand-blog-menu:not(:checked) ~ .blog-menu {
	display: none;
    }


    @media (min-width: 1280px) and (max-resolution: 182dpi) {
	body > main {

	}
    }

    /* destop, tablet */
    @media
    (min-width: 8192px),
    (min-width: 5120px) and (max-width: 8191px) and (max-resolution: 731dpi),
    (min-width: 4608px) and (max-width: 5119px) and (max-resolution: 658dpi),
    (min-width: 3840px) and (max-width: 4607px) and (max-resolution: 548dpi),
    (min-width: 2700px) and (max-width: 3839px) and (max-resolution: 385dpi),
    (min-width: 2560px) and (max-width: 2669px) and (max-resolution: 365dpi),
    (min-width: 2160px) and (max-width: 2559px) and (max-resolution: 308dpi),
    (min-width: 1920px) and (max-width: 2159px) and (max-resolution: 274dpi),
    (min-width: 1440px) and (max-width: 1919px) and (max-resolution: 205dpi),
    (min-width: 1280px) and (max-width: 1439px) and (max-resolution: 182dpi),
    (min-width: 1024px) and (max-width: 1279px) and (max-resolution: 146dpi)
    {
	/* for tabbing and screen readers */
	input#expand-blog-menu:focus ~ label#expand-blog-menu-active, input#expand-blog-menu:focus ~ label#expand-blog-menu-inactive {
	    filter: opacity(0.5);
	}
	
	input#expand-blog-menu:focus:not(:hover) ~ label#expand-blog-menu-inactive::after {
	    content: "Hit space for sub-menu.";
	    display: block;
	    filter: opacity(1);
	}
	
	input#expand-blog-menu:focus:not(:hover) ~ label#expand-blog-menu-active::after {
	    content: "Hit space for main menu.";
	    display: block;
	    filter: opacity(1);
	}

	.mobile {
	    display: none;
	}

	footer {
	    display: none;
	}

	/* 2-column n-row grid */
	body {
	    display: grid;
	    grid-template-columns: var(--nav-width) auto;
	    grid-column-gap: var(--nav-gutter);
	}

	body > main {
	    max-width: var(--desktop-content-max-x);
	    margin: 0 auto 50vh auto;
	    grid-column: 2/3;
	    font-size: var(--default-font-size);
	}

	/* position the main menu */
	header#masthead {
	    --min-btn-ht: 2rem;
	    position: fixed;
	    width: var(--nav-width);
	    top: 0;
	    left: 0;
	    height: 100vh;
	    grid-column: 1/2;
	    grid-row: 1/-1;

	    display: grid;
	    grid-gap: 0px;
	    grid-template: "logo" var(--logo-height) "nav1" minmax(var(--min-btn-ht), var(--max-btn-ht))
				  "nav2" minmax(var(--min-btn-ht), var(--max-btn-ht))
				  "nav3" minmax(var(--min-btn-ht), var(--max-btn-ht)) "nav4" minmax(var(--min-btn-ht), var(--max-btn-ht))
				  "nav5" minmax(var(--min-btn-ht), var(--max-btn-ht)) "nav6" minmax(var(--min-btn-ht), var(--max-btn-ht))
				  "filler" auto "totop" minmax(var(--min-btn-ht), var(--max-btn-ht));
	}

	div#dwhoman-logo {
	    grid-area: logo;
	}
	label#expand-blog-menu-inactive, label#expand-blog-menu-active {
	    grid-area: nav1;
	}

	div#blog-chronologic, div#about-page {
	    grid-area: nav2;
	}

	div#blog-recent, div#resume-page {
	    grid-area: nav3;
	}

	div#blog-categories, div#project-page {
	    grid-area: nav4;
	}

	div#blog-threads, div#following-page {
	    grid-area: nav5;
	}

	div#blog-feed, div#blog-feed-comp {
	    grid-area: nav6;
	}

	div#nav-filler {
	    grid-area: filler;
	}

	div.filler {
	    background-color: var(--nav-background);
	}

	div#to-top {
	    grid-area: totop;
	}
    }

    /* mobile */
    @media
    (max-width: 1023px),
    (min-width: 1024px) and (max-width: 1279px) and (min-resolution: 147dpi),
    (min-width: 1280px) and (max-width: 1439px) and (min-resolution: 183dpi),
    (min-width: 1440px) and (max-width: 1919px) and (min-resolution: 206dpi),
    (min-width: 1920px) and (max-width: 2159px) and (min-resolution: 275dpi),
    (min-width: 2160px) and (max-width: 2559px) and (min-resolution: 309dpi),
    (min-width: 2560px) and (max-width: 2669px) and (min-resolution: 366dpi),
    (min-width: 2700px) and (max-width: 3839px) and (min-resolution: 386dpi),
    (min-width: 3840px) and (max-width: 4607px) and (min-resolution: 549dpi),
    (min-width: 4608px) and (max-width: 5119px) and (min-resolution: 659dpi),
    (min-width: 5120px) and (max-width: 8191px) and (min-resolution: 732dpi)
    {	
	header#masthead div#nav-filler {
	    display: none;
	}
	header#masthead div#to-top {
	    display: none;
	}

	main {
	    max-width: 95vw;
	    margin-bottom: 1.5in;
	}
	@media (max-aspect-ratio: 1/2) {
	    main {
		font-size: 2rem;
	    }
	}

	div#to-top-alt, div#to-top-alt a {
	    height: 1in;
	}

	header#masthead div#blog-feed-comp {
	    display: none;
	}
	header#masthead .menu-btn {
	    height: auto;
	}
	header#masthead {
	    display: grid;
	    grid-gap: 0px;
	    height: 100vh;
	    grid-template-rows: minmax(var(--logo-height), 1fr) repeat(auto-fit, minmax(var(--min-btn-ht), 1fr));
	    grid-template-columns: 100vw;
	}

	.nav {
	    filter: opacity(0.5);
	    grid-column: 1/2;
	}

	div#dwhoman-logo {
	    height: var(--logo-height);
	    height: auto;
	    grid-row: 1/2;
	}
	label#expand-blog-menu-inactive, label#expand-blog-menu-active {
	    grid-row: 2/3;
	}
	div#blog-chronologic, div#about-page {
	    grid-row: 3/4;
	}
	div#blog-recent, div#resume-page {
	    grid-row: 4/5;
	}
	div#blog-categories, div#project-page {
	    grid-row: 5/6;
	}
	div#blog-threads, div#following-page {
	    grid-row: 6/7;
	}
	div#blog-feed {
	    grid-row: 7/8;
	}
    	ul > li, li > ul {
	    margin-left: 0px;
	    padding-left: 0px;
	}
    }

    @media (max-height: 799px) {
	.menu-btn img {
	    display: none;
	}
    }
}

@media print {
    header, header *, footer, footer * {
	display: none;
    }
}