/*
Fonts:
*/

@import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|PT+Mono|Open+Sans&display=swap');


/*
  Page Styling:
*/
body {
  display: flex;
  margin: 0;
  flex-direction: column;
  min-height: 100vh;
  background: #2c3e50;
  font-family: Helvetica;
}

main > * {
  margin: 4px;
  padding: 5px;
  border-radius: 7px;
}

main {
  display: flex;
  flex-basis: 300px;
}

article {
  flex: 4 0 50%;
  -webkit-flex: 4 0 50%; /* Safari 6.1+ */
  -ms-flex: 4 0 50%; /* IE 10 */ 
  background: #ecf0f1;
}

aside {
  flex: 1 1 40%;
  -webkit-flex: 4 0 40%; /* Safari 6.1+ */
  -ms-flex: 4 0 40%; /* IE 10 */ 
  background: #343434;
  color: white;
  max-height: 80vh;
  padding: 10px;
}

aside > span{
  font-family: 'Montserrat', 'Lato', 'Arial', serif, sans-serif;
  text-align: center;
  font-size: 20pt;
}

button{
  font-size: 14pt;
  margin: 10px;
  outline: none;
  border: none;
  display: inline-block;
  box-shadow: 0 5px 5px -2px #222;
  top: 0;
  border-radius: 5px;
  padding: 10px;
  background: teal;
  color: white;
}


button:hover{
    box-shadow: 0 2px 3px -1px #222;
  cursor: pointer;
}

button:active{
  background: #1af;
}

aside > div{
  font-family: 'PT Mono', monospace, sans-serif;
  padding: 10px 40px;
  background: #111;
  min-height: 65%;
  border-radius: 1rem;
  overflow-y: scroll;
  max-height: 70%;
}


 footer {
  margin: 4px;
  padding: 5px;
  border-radius: 7px;
  background: #222;
  color: white;
  flex-basis: 100px;
  max-height: 60vh;
  min-height: 40vh;
  overflow-y: scroll;
  padding-left: 2vw;
}

#console > div{
  padding: 10px 0 10px 20px;
  margin-bottom: 5px;
}

.info{
  background-color: #777;
}

.warn{
  background-color: darkred;
  opacity: 0.9;
}


#console{
  background: #111;
}

/*
  Phone Breakpoint:
*/
@media all and (max-width: 640px) {
  main {
    flex-direction: column;
    flex-grow: 1;
    height: 30vh;
    overflow: scroll;
  }
  aside{
    height: 30vh;
    overflow: scroll;
  }
  header {
    flex-basis: 50px;
    overflow: scroll;
  }
  footer{
    flex-basis: 50px;
  }
}