* {color:white;}
body {
  font-size: 0.875rem;
  font-family: "Open Sans", sans-serif;
  background-image: url(Pattern/BackgroundPattern13.png);
	padding:0;
	margin:0;
}
center {
  text-align:center;
}
dt {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  text-align:center;
  padding:5px;
  color:rgb(76,158,175);
  background-color:rgb(0,30,45);
}
dd {
  padding:10px;
}
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;
}
.guestbook {
  border-radius: 20px;
  position: relative;
  height: auto;
  width: 40vw;
  border: 20px solid rgb(0,30,45);
  background: rgb(0,40,55);
  margin: 4.2rem 25.2rem;
}
/*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;
      }
    .guestbook {
      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;
      }
    
    .guestbook {
      width: 85.5vw;
      height: auto;
      margin: 3rem auto;
      padding-right: 3px;
      }
      
    .container01 .scrollbox,.down .scrollbox, .middle .scrollbox {
      height: auto;
      max-height: 100%;
      }
    .inner {
      padding: 0.75rem 1.5em 0.25em 1.5em;
      }
    .container01 {
      border-radius: 20px 20px 2px 2px;
      margin: 0;
      }
    .container02 {
      border-radius: 20px 20px 2px 2px;
      border-radius: 2px;
      width: 85.5vw;
      max-height: 200vw;
      margin: 30vh auto;
      padding-right: 3px;
    }
    .container03 {
      border-radius: 20px 20px 2px 2px;
      border-radius: 2px;
      width: 85.5vw;
      max-height: 200vw;
      margin: 30vh auto;
      padding-right: 3px;
    }
    .container04 {
      border-radius: 20px 20px 2px 2px;
      border-radius: 2px;
      width: 85.5vw;
      max-height: 200vw;
      margin: 30vh auto;
      padding-right: 3px;
    }
    .container05 {
      border-radius: 20px 20px 2px 2px;
      border-radius: 2px;
      width: 85.5vw;
      max-height: 200vw;
      margin: 30vh auto;
      padding-right: 3px;
    }
    .middle {
      border-radius: 2px;
      margin: 1rem 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;
    }
  }