@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

body, html {
  font-family: 'Roboto Mono', monospace;
  font-size:14px;
  padding:0;
  margin:0;
  overflow-x:hidden;
}

#container {

  position:absolute;
  box-sizing:border-box;
  width:800px;
  left:calc( 50% - 400px );
  margin-left:0;
  padding-left:20px;
  padding-right:20px;
  border-left:6px solid #EEE;
  border-right:6px solid #EEE;

}

h1
{
  text-align: center;
  font-size:1.75em;
}

h1.thanks {
  width:100%;
  text-align:center;
  padding:0;
  font-size:1.5em;
}

h2 {
  margin:0;
  padding-top:30px;
  padding-bottom:30px;
  font-size:1.5em;
  text-align: left;
}

h2 span {
  background-color:white;
  padding-right:20px;
}

h2 hr {
  border:0;
  width:100%;
  border-bottom:6px solid #EEE;
  margin-top:-14px;
}

h3
{
  margin-top: 0px;
  text-align: center;
}

h3 span
{
  border-bottom: 4px solid #EEE;  
}

p.highlight {
  font-size:1.3em;
}

p {
  margin:0;
}

ul {
  list-style-type: none;
  padding:0;
  margin:0;
  margin-top:10px;
}

ul li {
  position:relative;
  padding-left:30px;
}

ul li i {
  position:absolute;
  top:0.18em;
  margin-left:-1.2em;
  font-size:1.2em !important;
  color:#AAA;
}

.thumbnails
{
  --w: calc(800px - 52px);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * (3 / 8));
  background-color: #888;
}

.thumbnails video
{
  position: absolute;
  display: block;
  width: 25%;
}

.thumbnails .t1
{
  left: 0px;
  top: 0px;
  height: 100%;
}

.thumbnails .t2
{
  left: 25%;
  top: 0px;
  height: 50%;
}

.thumbnails .t3
{
  left: 25%;
  top: 50%;
  height: 50%;
}

.thumbnails .t4
{
  left: 50%;
  top: 0px;
  height: 100%;
}

.thumbnails .t5
{
  left: 75%;
  top: 0px;
  height: 50%;
}

.thumbnails .t6
{
  left: 75%;
  top: 50%;
  height: 50%;
}

.smallSpacer {
  height:15px;
}

.spacer {
  height:30px;
}

a {
  color:#0099ff;
}

iframe {
  margin-left:150px;
  width:450px;
  border:6px solid #EEE;
}

.piano {
  height:600px;
}

@media only screen and (max-width: 1000px) {

  body, html {
    font-size:3vw;
    width:100%;
    position:fixed;
    height:100%;
  }

  #container {
    max-width:none;
    width:calc( 100% - 20vw );
    left:0px;
    margin: 0 10vw ;
  }

  iframe {
    margin-left:0;
    width:calc( 100% - 15px);
    border:6px solid #EEE;
  }
  
  .piano {
    height:100vw;
  }

  h1 {
    margin:0;
    padding-top:4vw;
    padding-bottom:2.5vw;
  }

  h1 hr {
    margin-top:-2vw;
  }

  ul li {
    padding-left:3.5vw;
  }

  .smallSpacer {
    height:2.5vw;
  }
  
  .spacer {
    height:5vw;
  }

  .thumbnails
  {
    --w: calc(100vw - 32.5vw);
    position: relative;
    width: var(--w);
    height: calc(var(--w) * (3 / 4) * 2);
  }
  
  .thumbnails video
  {
    position: absolute;
    display: block;
    width: 50%;
  }
  
  .thumbnails .t1
  {
    left: 0px;
    top: 0px;
    height: 50%;
  }
  
  .thumbnails .t2
  {
    left: 50%;
    top: 0px;
    height: 25%;
  }
  
  .thumbnails .t3
  {
    left: 50%;
    top: 25%;
    height: 25%;
  }
  
  .thumbnails .t4
  {
    left: 50%;
    top: 50%;
    height: 50%;
  }
  
  .thumbnails .t5
  {
    left: 0px;
    top: 50%;
    height: 25%;
  }
  
  .thumbnails .t6
  {
    left: 0px;
    top: 75%;
    height: 25%;
  }
  
}