/* formatting section. ignore if you are not comfortable with CSS.
    scroll lower to find the section to edit colors, backgrounds, & fonts. */

h1{
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

h2{
  display: flex;
  flex-direction: row;
}
h2:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
h2:before {
  content: "\2724";
  padding-right: .25em;
}
h2:after {
  margin-left: 10px
}

h3{
  margin: 0;
}

a{
  text-decoration: none;
  font-weight: bold;
  transition: .5s;
}

ul{
  list-style: none;
}

li:before{
  content: "\2767 ";
  padding-right: .25em;
}

hr{
  width: 50%;
  border: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

code{
  border-radius: 50px;
  padding: .5em;
}

img{
  max-width: 80%;
}

.container{
  position: absolute;
  top: 55%;
  left: 50%;
  -ms-transform: translate(-50%, -55%);
  transform: translate(-50%, -55%);
  height: 85vh;
  width: 100vw;
  overflow: hidden;
  border-top: 0px;
  line-height: 1.5em;
}
  
.nav{
  z-index: 1;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  left: 50%;
  transform: translate(-50%);
  top: 2%;
  min-height: 5vh;
  width: 70vw;
  border-radius: 50px;
}
.nav a{
  text-shadow: 0 0 0;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .8em;
  font-weight: bold;
  padding: .5em;
  border-radius: 50px;
  transition: .5s;
}
.nav a:hover{
  transition: .5s;
}
  
.page{
  width: 98%;
  height: 98%;
  overflow: auto;
  display: block;
  padding: 1%;
  padding-bottom: 1em;
}

.block{
  border-radius: 10px 30px 50px 30px;
  display: block;
  width: 80%;
  padding: 1em;
  margin: auto;
  margin-bottom: 20px;
}

.smallblock{
  text-align: left;
  border-radius: 50px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 80%;
  margin: 1em;
  padding: 1em;
}

.panel{
  height: 450px;
	width: 80%;
  border-radius: 50px;
  position: relative;
  display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas: 'one two';
	gap: 1px;
	margin: auto;
}
.one{
  grid-area: one;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: 1em;
  padding-right: 1em;
  height: 100%;
  overflow: auto;
  text-align: left;
}
.two{
  grid-area: two;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  padding-left: 1em;
  padding-right: 1em;
  height: 100%;
  overflow: auto;
  text-align: left;
}

.left{
  max-width: 45%;
  height: auto;
  float: left;
  margin: 1em;
  margin-left: 0;
}

.right{
  max-width: 45%;
  height: auto;
  float: right;
  margin: 1em;
  margin-right: 0;
}

.center{
  max-width: 80%;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}

.border{
  border-radius: 50px;
}

@media only screen and (max-width: 700px) {
  .container{
    top: 0;
    left: 0;
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  .nav{
    width: 100vw;
    top: 87%;
    border-radius: 0;
  }
}



/* styling section. even if you aren't comfortable with CSS, you should still feel free to experiment with any values here!
    visit a "color picker" website to find hex codes ( ie. #123456 ). 
    you can also search "html colors" to use words instead of hex codes if you'd prefer. ( eg. "dodgerblue" "lemonchiffon" etc. ) */

body{
  background: url(https://files.catbox.moe/028bkh.jpg) center repeat #fff;
  font-family: Georgia, Garamond, serif;
  color: #655533;
}

h1, h2, h3, h4{
  font-family: Georgia, Garamond, serif; 
  text-shadow: 2px 2px #f7d9a6;
}

h1, h2{
  color: #739339;
}

h3, h4{
  color: #bc9c2e;
}

b{
  color: #000;
}

a{
  text-shadow: 2px 2px #f7d9a6;
}
a:link, a:visited{
  color: #85bf54;
}
a:hover, a:active{
  color: #fff;
}

hr{
  border-bottom: 2px dashed #a0d376;
}

code{
  color: #bc9c2e;
  background: #fff;
}

.container{
  background: linear-gradient(lemonchiffon, #f7d9a6);
  box-shadow: 0 20px #bc9c2e;
}

.nav{
  border: 10px solid #DAF7A6;
  box-shadow: 10px 10px #a0d376;
  background: #DAF7A6;
}
.nav a{
  background: #fff;
  color: #bc9c2e;
  box-shadow: 5px 5px #a0d376;
}
.nav a:hover{
  background: green;
  color: #fff;
}

.page{
  background: transparent;
}

.block{
  background: #fff;
  box-shadow: 10px 10px #d3bc76;
  border-left: 10px solid #a0d376;
}

.smallblock{
  background: #fff;
  box-shadow: 10px 10px #d3bc76;
}

.panel{
  background: #fff;
  box-shadow: 10px 10px #d3bc76;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
}

.one{
  background: transparent;
}

.two{
  background: transparent;
  border-left: 1px solid #d3bc76;
}

.shadow{
  box-shadow: 10px 10px #d3bc76;
}