/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: #2c2f38;
  background-attachment: fixed;
  font-family: Verdana, sans-serif;
  font-size: 0.9em;
  color: #151b26;
  }
  
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 70%;
	height: 95vh;
	margin: auto;
}

.main {
	height: 100%;
	flex: 3;
}

.leftside, .rightside {
	height: 50%;
	flex: 1;
	font-family: Courier, serif;
}

.main, .leftside, .rightside {
	border: 2px solid #151b26;
	border-radius: 5px;
	border-bottom: 2px solid #6f687a;
	margin: 1%;
	background: #eae8db;
	overflow: auto;
}

.main img, .leftside img, .rightside img {
	max-width: 100%;
}

.rightside {
	align-self: flex-end;
}

.inner {
	padding: 2%;
	height: 90%;
	overflow: auto;
}

h1, h2, h3, h4 {
	font-family: Courier, monospace;
	font-size: 1.2em;
	background: #797b7a;
	color: #fff;
	border-bottom: 2px solid #2E2326;
	padding: 1%;
	margin:  0;
}

#leftimg {
	position: absolute;
	width: 330px;
	left: 12%;
	bottom: 0;
	z-index: -1;
}

#rightimg {
	position: absolute;
	width: 330px;
	right: 12%;
	top: 0;
	z-index: -1;
}

header {
	font-size: 2em;
	font-family: Courier, monospace;
	border-bottom: 2px dashed #2c2f38;
}

header img {
	float: right;
	width: 50%;
}

.footer {
	font-family: monospace;
	border-top: 2px dashed #2c2f38;
}

a {
	font-family: Courier, serif;
	font-size: 14px;
}

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

a:hover, a:active {
	color: #F4ACB7;
	text-decoration: underline;
	font-size: 14px;
	}
	
ul {
	
	line-height: 200%;
}

hr {
  width: 90%;
  border-bottom: 2px dashed #2c2f38;
  border-top: none;
  }
  
/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

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

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

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

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

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

::-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) {

.wrapper {
	width: 100%;
}

.inner {
	overflow: visible;
}

}