:root {
	--main-bg-color: black;
	--large-font: 40px;
	--medium-font: 30px;
	--small-font: 20px;
}

body, html {
    height: 100%;
    background-color: var(--main-bg-color);
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
}

h1, .h1 {
    font-size: var(--large-font);
    font-weight: normal;
    color: white;
}
h2, .h2 {
    font-weight: normal;
    font-size: var(--medium-font);
}
h3, .h3 {
    font-size: var(--small-font);
    font-weight: normal;
	color: white;
}

.white {
    color: white;
}

a,
a:hover,
a:link,
a:visited {
	color: white;
	cursor: pointer;
	text-decoration: underline;
}

#diskthing {
    position: fixed;
	width: 45%;
    top: 120px;
    right: 10px;
}

#diskthing img {
    width: 80%;
    float: right;
}

#topspacer {
    height: 30px;
    top: 0px;
    width: 100%;
    position: fixed;
    background-color: var(--main-bg-color);
}

#header {
    top: 30px;
    width: 95%;
    padding-left: 5%;
    height: 100px;
    position: fixed;
    background-color: var(--main-bg-color);
    color: white;
}

#topspacer,
#header {
    z-index: 100;
}

#header img {
    height: 80px;
}

#header td {
	vertical-align: top;
}

#burger,
.burger {
	display: none;
	--show: false;
}

nav {
    margin-bottom: 20px;
    margin-right: 5em;
	display: inline;
}

.topnav {
	float: right;
}

.topnav ul {
    list-style: none;
    display: block;
    margin: 0 auto;
}

.logo {
	float:left;
	margin-right:7px;
	width: 90px;
}

sup {  /* taken from https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/ */
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

.centered {
	text-align: center;
}

.technav {
	float: none;
}

.technav ul {
    list-style: none;
    display: inline;
    margin: 0 auto;
    list-style: none;
}

.topnav li {
    margin-top: 9px;
    float: left;
    padding-left: 21px;
    color: white;
    font-size:  var(--small-font);
	cursor: pointer;
}

.technav li {
	text-decoration: underline;
}

.topnav li:hover,
.technav span:hover {
  color: #AAA;
}

.technav span {
	cursor: pointer;
	text-decoration: underline;
}

.content {
    font-size:  var(--small-font);
    padding-top: 100px;
    width: 50%;
    display: none; /* initial condition */
    margin-left: 5%;
}

#footer {
    font-size: 14px;
    padding-top: 30px;
    text-align: left;
	color: white;
	margin-left: 20px;
}

.content {
    /* color: #CCC; */
	color: white;
    opacity: .9;
}

.highlight {
    font-weight: bold;
    color: rgb(223, 141, 226);
}

@media screen and (max-width: 700px) {
    #diskthing {
        display: none;
    }
    .content, #footer {
        width: 90%;
    }
    #header {
        height: 60px;
        width: 100%;
    }
    #header img {
        height: 40px;
    }
    .topnav li {
        display: none;
    }
	.topnav.show-menu li {
		display: block;
		float: none;
	}
	#burger {
		font-size: var(--large-font);
		display: block;
		float: right;
		--show: true;
	}
	:root {
		--main-bg-color: black;
		--large-font: 30px;
		--medium-font: 25px;
		--small-font: 20px;
	}
}