body {
  width:100vw;
  height:100vh;
  margin:0;
  background-color:#f0f0ff;
  color:#444499;
  display:flex;
  flex-direction:column;
}

*{
  box-sizing:border-box;
}

#header{
  display:block;
  position:relative;

  background-color:#444499;
  color:#f0f0ff;
}

#container{
  display:block;
  position:relative;
  
}

#footer{
  display:block;
  position:relative;

  font-size:0.6em;
  text-align:right;
  color:#c0c0ee;
  
  margin-top:auto;
}

@media only screen and
    (orientation:portrait){
  body{
    font-size:3vh; 
  } 
}

@media only screen and
    (orientation:landscape){
  body{
    font-size:5vh; 
  } 
  #footer{

  }
  #container{
    
  }
}

.heading{
  font-size:1.2em;
  font-weight:bold;
}

#container{
  overflow-x:auto;
  overflow-y:auto;
}

.subsection{
  background-color:#f0f0ff;
}

@media only screen and (min-width:500px){
  .subsection{
    display:inline-block;
    width:32.5%; /* Tradeoff aestheticity for compatibility */
    height:100%;
    overflow-y:scroll;
  }
}

a{
  text-decoration:none;
  color:#c0c0ee;
}

.subsection a{
  display:block;
  text-align:right;
  
  font-size:0.7em;
  color:#444499;
}

pre{
  background-color:#e0e0fe;
  font-size:0.8em;
  overflow-x:scroll;
}

#footer p{
  margin:0;
  position:absolute;
  bottom:0; right:0;
}

div, pre{
  padding:1vh 1vw 1vh 1vw;
}

.note{
  font-size:0.7em;
}

#testarea{
  display:grid;
  grid-template-columns:auto auto;
}

/*#testarea > pre:first-child{
  grid-area:1/ 1/ span 2/ span 2;
}*/

#testarea button{
  height:40px;
}

button{
  user-select:none;
}

#statarea{
  display:grid;
  grid-template-columns:auto auto 1fr;
}

.hidden{
  display:none;
}

canvas{
  border:1px solid black;
}