:root {
  --light: rgb(255, 255, 220);
  --midlight: rgb(200, 200, 0);
  --middark: #666;
  --dark: #111;
  --link:rgb(255, 89, 0);
  --emphasis: rgb(255, 120, 0);
}

body {
    font-family:verdana;
    font-size: 1rem;
    line-height: 1.4rem;
    color: var(--light);
    background-color: var(--dark);
    background-image: url("/static/img/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
}

h1 {
    line-height: 2rem;
    font-size: 1.5rem;
    text-align: center;
    margin: 2rem 0;
}

h2 {
    text-decoration: underline;
    margin-top: 4rem;
    line-height: 2rem;
}

b {
  color: var(--emphasis);
}

p {
  margin: 1rem 1rem;
}

text {
    font-size: 1rem;
}

table {
	border-collapse: collapse;
}

table, tr, th, td {
border: 1px solid;
}

table td {
  padding: 0px 10px;
}

a:link, a:visited, a:active, a:hover {
    text-decoration: none;
    color: var(--link);
}

#headline {
  position: absolute;
  font-size: 4rem;
  color: var(--emphasis);
  width: 90vw;
  text-align: center;
  top: 35vh;
  font-size: calc(1.5rem + 1.5vh);
  text-shadow: 0px 0px 14px black;
  z-index: -1;
}

#subscript {
  position: absolute;
  font-size: 1rem;
  color: var(--light);
  width: 90vw;
  text-align: center;
  top: 50vh;
  z-index: -1;
}

.collapsible {
    /* background-color: var(--light); */
    color: var(--light);
    cursor: pointer;
    padding: 0.5rem 1rem;
    width: 99%;
    border: none;
    text-align: left;
    outline: none;
}

.content {
    padding: 0 2rem;
    font-size: 1rem;
    line-height: 1.4rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height  0.2s ease-out;
    /* background-color: var(--light); */
}

.list {
    padding: 0 3rem;
}

br {
    line-height: 2rem;
}

/* Topnav menu */
.topnav {
  overflow: hidden;
  /* background-color: var(--light); */
}

.topnav a{
  float: left;
  display: block;
  color: var(--light);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: var(--middark);
  color: var(--light);
}

.topnav a:nav-active {
  background-color: var(--dark);
  color: var(--light);
}

.topnav .icon {
  display: none;
}

.hidden {
  display: none;
}

@media screen and (max-width: 600px){
  .topnav a {
    display: none;
  }

  .topnav .icon {
    float: left;
    display: block;
  }
  
  .topnav .icon {
    /* position: absolute;
    left: 0;
    top: 0; */
    color: var(--light);
  }
  
  .topnav.visible a{
    float: none;
    display: block;
    text-align: left;
    background-color: var(--dark);
  }
}