body {
  background-color: #CE7879;
  font-family: "Karla", Arial, sans-serif;
  color: #162719;
  background: url("https://file.garden/ZA_UJlkUN2HXHENQ/images/backgrounds/brickbg.jpg");
  background-attachment: fixed;
  }
  
.wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin: auto;
	height: 110vh;
}

.header {
	width: 80%;
	margin: auto;
	text-align: center;
	font-family: "Amatic SC", Papyrus, fantasy;
	color: #F2E8CF;
	background: url("https://file.garden/ZA_UJlkUN2HXHENQ/images/backgrounds/woodbg.jpg");
	border: 2px solid #162719;
}

.sidebar {
	height: 80vh;
	flex: 1;
	margin: 1%;
}

.imgbox {
	border: 3px double #162719;
	background: #7AAC5D;
	margin-bottom: 3%;
}

.imgbox img {
  max-width: 100%;
  height: auto;
  }

.menu {
	height: 90%;
	text-align: center;
	line-height: 200%;
	color: #F2E8CF;
	background-color: #162719;
	border: 10px solid;
	border-image: url('https://file.garden/ZA_UJlkUN2HXHENQ/images/backgrounds/woodbg.jpg') 20% round;
	outline: 2px solid #162719;
}

.main {
	display: flex;
	flex-wrap: wrap;
	gap: 2% 2%;
	flex: 5;
}

.box {
	height: 45vh;
	overflow: auto;
	padding: 2%;
	background: #F2E8CF;
	border: 3px double #162719;
	margin: 1%;
}

.subbox {
	width: 42%;
	height: 30vh;
	overflow: auto;
	padding: 2%;
	border: 3px double #162719;
	background: #7AAC5D;
	margin: 1%;
}

.subbox a:link, .subbox a:visited {
	color: #F2E8CF;
	text-decoration: none;
}
	
.subbox a:hover, .subbox a:active {
	color: #CE7879;
	text-decoration: underline;
	}
	
.footer {
	width: 65%;
	margin-left: 25%;
	text-align: center;
	font-family: "Amatic SC", Papyrus, fantasy;
	color: #F2E8CF;
	background: url("https://file.garden/ZA_UJlkUN2HXHENQ/images/backgrounds/woodbg.jpg");
	border: 2px solid #162719;
}

a:link, a:visited {
	color: #7AAC5D;
	text-decoration: none;
	}			

a:hover, a:active {
	color: #CE7879;
	text-decoration: underline;
	}
	
h1, h2, h3, h4 {
	font-family: "Amatic SC", Papyrus, fantasy;
	margin: 0.25em;
	padding: 0;
	text-align: center;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2.5em;
}

h3 {
	font-size: 2em;
}

h4 {
	font-size: 1.5em;
}

hr {
  width: 85%;
  border-bottom: 3px double #386641;
  border-top: none;
  }

.divider {
	max-width: 80%;
	margin: auto;
}

#ivypot {
	position: absolute;
	top: 0;
	right: 0;
}

/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #386641;
  border: 1px solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #A7C957;
  border: 1px solid;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #CE7879;
}

::-webkit-scrollbar-button {
  background: #A7C957;
}

::-webkit-scrollbar-button:hover {
  background: #CE7879;
}

::-webkit-scrollbar-button:single-button {
  border: 1px solid;
  height: 12px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

/*mobile view*/

@media only screen and (max-width: 600px) {

.subbox {
	width: 100%;
}

.hide {
	  display: none;
  }

}