html, body {
  margin: 0;
  /*height: 100%;*/
}

body {
  max-width: 1000px;
  margin: 50px auto;
  margin-top: 100px;
  background: linear-gradient(to bottom right, #044f6f, #00979c);
  background-attachment: fixed;
  text-align: justify;
}

#top {
  display: none;
}

header {
  background-image: url(../img/header.jpg);
}

h1 {
  font-family: 'IBM Plex Mono', monospace;
  color: white;
  padding: 35px 0;
  margin: 0;
  text-align: center;
  font-size: 4em;
  letter-spacing: 3px;
}

.tracks h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2em;
  margin: 0 auto 1em auto;
  padding: 0.5em;
  max-width: 250px;
  text-align: center;
}

.tracks h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.8em;
  color: #044f6f;
  padding-top: 15px;
  margin: 1.2em 0 0 0;
  border-top: 3px solid #044f6f;
  width: 100%;
  display: inline-block;
  letter-spacing: 3px;
  text-align: left;
}

.tracks {
  background-color: #FFFAF0;
  padding: 75px;
  padding-top: 35px;
}

.index {
  background-color: transparent;
  font-family: 'IBM Plex Mono', monospace;
}

.index a {
  display: block;
  width: 100%;
}

.index a:link {
  color: black;
}

.index a:visited {
  color: black;
}

p {
  margin-top: 1em;
  padding: 0;
  font-size: 18px;
  line-height: 1.75;
  font-family: 'Open Sans', sans-serif;
}

ul li {
  font-size: 18px;
  line-height: 1.75;
  font-family: 'Open Sans', sans-serif;
  list-style-type: circle;
}

.tracks ol li {
  font-size: 18px;
  line-height: 1.75;
  font-family: 'Open Sans', sans-serif;
}

nav ol {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  max-width: 90%;
}

nav ol li {
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.4em;
}

#subnav {
	display: none;
}

.Track1, .Track2, .Track3, .Track4, .Track5, .Track6, .Bonus, .iipmedt, .ipmedt5, .imthe1 {
  margin-top: 20px;
  font-weight: bold;
  transition: all 0.5s ease;
}

.main li:last-child{
  margin-bottom: 20px;
}

nav h2 {
  float: left;
  font-family: 'IBM Plex Mono', monospace;
  color: black;
  transform: rotate(-90deg);
  position: relative;
  top: 48px;
  width: 110px;
  /*vertical-align: middle;*/
}

nav .Bonus h2 {
  top: 35px;
}

nav .sub {
  display: inline-block;
  padding: 10px;
  border-left: 2px dotted black;
  height: 150px;
  font-size: 1.15em;
}

.Track1, .t1 {
  background-color: red;
  color: black;
}

.Track2, .t2 {
  background-color: orange;
  color: black;
}

.Track3, .t3 {
  background-color: yellow;
  color: black;
}

.Track4, .t4 {
  background-color: lime;
  color: black;
}

.Track5, .t5, .Bonus, .bn {
  background-color: DeepSkyBlue;
  color: black;
}

.iipmedt, .ipmedt5, .imthe1 {
  background-color: #E5E5E5; /*#fcb407;*/
  color: black;
}

.Track6, .t6 {
  background-color: #EE82EE; /* Violet */
  color: black;
}

.Track1:hover, .Track2:hover, .Track3:hover, .Track4:hover, .Track5:hover, .Track6:hover, .Bonus:hover, .iipmedt:hover, .ipmedt5:hover, .imthe1:hover  {
  /*background-color: floralwhite;*/
  opacity: 0.7;
  transform: scale(1.05);
}

div.close {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 30px;
  padding: 100px 20px 20px 20px;
  display: block;
  background-color: rgba(0,0,0,.4);
  color: #fff;
  position: fixed;
  top: -90px;
  left: 50%;
  z-index: 99;
  margin-left: -28px;
  cursor: pointer;
  transition: all .4s;
}

div.close:hover {
  background-color: rgba(0,0,0,.6);
  padding: 120px 20px 20px 20px;;
}

.close a {
  color:white;
  text-decoration: none;
  width: 4em;
}

.close a:visited {
  color:white;
}

.close i {
  display: inline-block;
}

.warning {
  background-color: yellow;
  margin: 1em 0;
}

.information {
  background-color: #ddd;
  margin: 1em 0;
}

.download {
  background-color: #1E90FF;
  margin: 1em 0;
  text-align: left;
}

.code {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: bold;
  background-color: #fff;
  margin: 1em 0;
  text-align: left;
}

.warning i, .information i, .code i, .download i {
  display: block;
  position: absolute;
  margin: 1.5em;
}

i.inline {
  display: inline;
  position: relative;
  margin: 0;
}

.warning span, .information span, .code span, .download span {
  display: inline-block;
  margin: 1em 2em 1em 4em;
}

.information a, .information a:visited {
  color: #00f;
  text-decoration: none;
}

.information a:hover {
  color: #f00;
}

.download a, .download a:visited {
  color: #0ff;
  text-decoration: none;
}

.download a:hover {
  color: #fff;
}

.code span {
  border-left: 1px solid black;
  padding-left: 0.5em;
}

iframe {
  width: 100%;
  height: 325px;
  border: 0;
}

.freestanding {
  margin: auto;
  background-color: #eee;
}

.freestanding img {
  display: block;
  max-width: 85%;
  max-height: 350px;
  margin: auto;
  padding: 2em;
}

.freestanding figcaption {
  margin: 0;
  padding: 2em;
  font-size: 16px;
  line-height: 1.75;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  font-style: italic;
  border-bottom: 1px dotted #ccc;
  background-color: #FFFAF0;
}

footer {
  background-color: #226;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  transition: all 0.5s ease;
}

footer a {
  font-size: 18px;
  width: 100%;
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: 1em;
}

footer:hover {
  background-color: #002;
}

footer a:visited {
  color: white;
}

@media all and (max-width: 800px){

  body {
    margin: 30px auto 100px auto;
  }

  div.close {
    font-size: 20px;
    padding: 100px 15px 15px 15px;
    margin-left: -28px;
  }

  div.close:hover {
    padding: 120px 15px 15px 15px;
  }

  .close a {
    width: 3em;
  }

  #subnav {
	  display: block;
	  padding: 0;
  }

  #subnav li {
	  transition: background-color 0.5s ease;
	  margin: 0.4em;
	  list-style-type: none;
  }

  #subnav li:hover {
	  background-color: #FFF;
  }

  #subnav a {
    display: block;
    width: 100%;
	  text-decoration: none;
	  font-weight: bold;
	  padding-left: 1em;
  }

  #subnav a:link {
    color: black;
  }

  #subnav a:visited {
    color: black;
  }

  #top {
  	display: block;
    bottom: 20px;
	  right: 30px;
	  z-index: 99;
	  position: fixed;
    font-size: 2em;
	  border-radius: 100%;
	  text-align: center;
	  width: 1em;
	  height: 1em;
	  text-decoration: none;
	  font-weight: bold;
	  padding: 0.2em;
	  transition: background-color 0.5s ease;
  }

  #top a:link {
    color: black;
  }

  #top a:visited {
    color: black;
  }

  #top:hover {
	  background-color: #FFF;
  }

  .tracks {
    padding: 25px;
	  padding-top: 10px;
	  padding-bottom: 15px;
  }

  h1 {
    padding: 25px 0;
    margin: 0;
    text-align: center;
    font-size: 2.5em;
    letter-spacing: 3px;
  }

  .tracks h3 {
    font-size: 1.6em;
    padding-top: 10px;
    margin: 0.8em 0 0 0;
    letter-spacing: 3px;
  }

  .freestanding img {
    display: block;
    max-width: 90%;
    max-height: 350px;
    margin: auto;
    padding: 1em;
  }

 .freestanding figcaption {
    padding: 1.3em;
    font-size: 16px;
    line-height: 1.75;
  }

  .warning span, .information span, .code span, .download span {
    margin: 0.8em 1.5em 0.8em 2.5em;
  }

  .warning i, .information i, .code i, .download i {
    margin: 1.2em 0.9em;
  }

  .Track1, .Track2, .Track3, .Track4, .Track5, .Track6, .Bonus, .iipmedt, .ipmedt5, .imthe1 {
    margin-top: 15px;
  }

  .main li:last-child{
    padding-bottom: 1em;
  }

  .information, .code {
	  overflow: scroll;
  }

  nav h2 {
  	font-size: 1.5em;
	  float: none;
    transform: none;
    position: static;
    top: 45px;
    width: 110px;
	  margin: 0;
    padding: 0.5em;
  }

  nav .sub {
    padding: 0.5em;
	  padding-left: 3.5em;
    border-left: none;
    height: 150px;
    font-size: 1em;
	  text-align: left;
	  list-style-type: decimal;
  }

  nav ol {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    max-width: 94%;
  }

  footer a {
	  padding: 1em 0;
  }
}