* {color:white;}
body, html {
  height: 100%;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  background-image: url(Pattern/BackgroundPattern13.png);
}
h1 {
  text-align:center;
  border: 6px solid rgb(0,40,55);
  border-radius:10px;
  background-color:rgb(0,40,55);
  margin: auto;
  width:auto;
  color: white;
  padding: 10px 10px;
  letter-spacing:5px;
  text-shadow: 3px 3px rgb(76,158,175);
  font-family: 'Pixelify Sans';font-size: 45px;
}
h2 {
  color:rgb(0,130,145);
  text-align:center;
  font-family: 'Pixelify Sans';font-size: 30px;
  margin: 20px auto auto auto;
  width:auto;
}
.topheader {
  font-size:22px;
  color: rgb(76,158,175);
  text-shadow:none;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width:auto;
  text-align:center;
}
a:link, a:visited {
  background-color:rgb(0,40,55);
  border: 6px solid rgb(0,40,55);
  border-radius:10px;
  padding:5px 5px;
  text-decoration:none;
  display:inline-block;
  margin-top: 20px;
  font-family: 'Pixelify Sans';font-size: 25px;
}
a:hover, a:active {
  background-color:rgb(0,60,75);
}
li {
  display: inline;
}
.scrollbox {
  overflow:auto;
  height: 35.5rem;
}


.tab {
  margin-left: 13.5rem;
  margin-top:3.5rem;
  float: left;
  display: block;
  border: 10px solid rgb(0,30,45);
  border-radius:10px 0 0 10px;
  background-color: rgb(0,30,45);
  width: 15%;
  height:75vh;
}


.tab button {
  background-color: inherit;
  color: white;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}


.tab button.active {
  background-color: rgb(0,60,75);
}

.tabcontent {
  margin:3.5rem auto;
  float: left;
  padding: 0px 12px;
  border: 10px solid rgb(0,30,45);
  border-radius:0 10px 10px 0;
  background: rgb(0,40,55);
  width: 58%;
  border-left: none;
  height: 75vh;
  bottom:10rem;
}

.bottom {
  margin:65rem auto;
  border: 10px solid rgb(0,30,45);
  background-color: rgb(0,30,45);
  width:auto;
  height:10%;
}

img.artwork01 {
  width:15vw;
  height:auto;
  border:none;
}

img.artwork02 {
  width:15vw;
  height:auto;
  border:none;
}

img.artwork03 {
  width:15vw;
  height:auto;
  border:none;
}
/*Nicer-looking resizing for narrower screens.*/
@media(max-width: 1000px) {
  .main {
    width: 82.5vw;
    }
    
  @media(max-width: 850px){
    body {
      font-size: 0.85rem;
      }
    .main {
      height: 91vh;
      width: 92vw;
      margin: 7vh 5vw 1.5vh 5vw;
      }
    .left, .right {
      height: 75vh;
      width: 18.5vw;
      }
    .right {
      right: 0;
      }
    .middle {
      height: 90vh;
      width: 50vw;
      margin-left: 20.5vw;
      }
    .left .scrollbox,.right .scrollbox {
      height: 75vh;
      }
    .middle .scrollbox {
      height: 90vh;
      }
    .footer {
      bottom: -2.5vh;
      margin: 0.25rem auto 0.5rem auto;
      }
    }
  }

/*Resizing for horizontally shorter screens.*/
@media(max-height: 45rem) {
  .main {
    height: 91vh;
    margin-top: 7vh;
    margin-bottom: 1.5vh;
    }
  .middle {
    height: 90vh;
    }
  .left, .right {
    height: 75vh;
    }
  .left .scrollbox, .right .scrollbox {
    height: 75vh;
    }
  .middle .scrollbox {
    height: 90vh;
    }
  .inner {
    padding-top: 0.5em;
    }
  .footer {
    bottom: -2.5vh;
    margin: 0.25rem auto 0.5rem auto;
    }
    
  @media(max-height: 32.5rem) {
    body {
      font-size: 0.825rem;
      }
    .main {
      margin-top: 10vh;
      height: 88vh;
      }
    .middle {
      height: 87vh;
      }
    .left, .right {
      height: 72vh;
      }
    .left .scrollbox, .right .scrollbox {
      height: 72vh;
      }
    .middle .scrollbox {
      height: 87vh;
      }
    .inner {
      padding-top: 0.25rem;
      }
    .footer {
      bottom: -3vh;
      }
    }
  }

/*Mobile layout*/
@media(orientation: portrait) {
    .main, .box {
      position: relative;
      display: block;
      }
    
    .left,.right,.middle {
      width: 85.5vw;
      height: auto;
      margin: 0 auto;
      padding-right: 3px;
      }
      
    .left .scrollbox, .right .scrollbox, .middle .scrollbox {
      height: auto;
      max-height: 100%;
      }
      
    .inner {
      padding: 0.75rem 1.5em 0.25em 1.5em;
      }
    
    .left {
      border-radius: 20px 20px 2px 2px;
      margin: 0;
      }
      
    .middle {
      border-radius: 2px;
      margin: 1rem 0;
      }
      
    .right {
      border-radius: 2px 2px 20px 20px;
      margin: 0;
      }
    .down {
      border-radius: 2px;
      width: 85.5vw;
      max-height: 200vw;
      margin: 30vh auto;
      padding-right: 3px;
    }
    img.artwork01 {
      width:37.5vw;
      height:auto;
      border:none;
    }
  }