html {
  height:100%;
}
body {
  background-color:#b8bcc8;
  height:100%;
  font-family:Arial, Helvetica, sans-serif;
}
.pageheader {
  width:auto;
  background-color:#dfdfe6;
  margin:10px;
  padding:3px;
  box-shadow: 4px 7px 3px #8e95a8;
  border-radius:3px;
  display:flex;
  flex-direction:row;
  align-items:stretch;
}
.title {
  padding:0 0 0 10px;
  margin:5px;
  font-weight:bold;
  font-size:45px;
}
.maincontent {
  background-color:#cdcbd1;
  width:85%;
  padding-bottom:5px;
  margin:auto;
  border-radius:3px;
}
.navbar {
  width:100%;
  height:75px;
  border-radius:3px;
  background-color:black;
  display:flex;
  flex-direction:row;
  align-items:stretch;
}
.navbutton {
  flex-basis:15%;
  background-color:#e1e6e8;
  text-align:center;
  font-size:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0px 3px 2px 0px #8e95a8;
  color:black;
  font-weight:bold;
  text-decoration:none;
}
#navleft {
  border-radius:3px 0 0 0;
}
#navleft:hover {
  background-color:#8e95a8;
}
#navright {
  border-radius:0 3px 0 0
}
#navright:hover {
  background-color:#8e95a8;
}
#navtitle {
  flex-basis:70%;
  flex-grow:4;
  background-color:#d0d1d5;
}
.subtitle {
  font-weight:bold;
  font-size:35px;
  margin: 30px 0px 5px 30px;
}
.para {
  padding:20px;
  margin:25px;
  font-size:20px;
  background-color:#dfdfe6;
  box-shadow: 2px 5px 3px #8e95a8;
  border-radius:2px;
}
.blogimg {
  max-height:50%; 
  max-width:50%;
  float:left;
  margin-right:20px;
  margin-left:25px;
  margin-bottom:20px;
  min-height:25%;
  min-width:25%;
  box-shadow: 4px 7px 3px #8e95a8;
  image-rendering: crisp-edges;
}
.topimg {
  width:100%;
  height:400px;
  box-shadow: 0 0 8px 8px #cdcbd1 inset;
  margin:0;
}
@media (max-device-aspect-ratio:1/1) {
  .topimg {
    display:none;
  }
  .blogimg {
    float:none;
    display:block;
    max-width:95%;
    margin-left:auto;
    margin-right:auto;
    min-height:25%;
    min-width:25%;
  }
  .subtitle {
    font-size:50px;
    text-align:center;
    margin: 30px 0px 0px 0px;
  }
  #navtitle {
    font-size:40px;
    flex-basis:50%;
    flex-grow:2;
  }
  .navbutton {
    flex-basis:25%;
    font-size:50px;
  }
  .maincontent {
    width:100%;
  }
  .navbar {
    width:100%;
    height:150px;
  }
  .title {
    font-size:100px;
  }
  .pageheader {
    width:auto;
    margin:5px 0 10px 0;
    padding:10px;
    justify-content:center;
    text-align:center;
  }
  .para {
    font-size:15px;
  }
}
@media print {
.maincontent {
  width:100%;
}
.topimg {
  display:none;
}
.pageheader {
  display:none;
}
.navbutton {
  box-shadow:0 0;
}
#navleft {
  display:none;
}
#navright {
  display:none;
}
.para {
  box-shadow:0 0;
}
.blogimg {
  box-shadow:0 0;
}
}