body {
background: #FFADAD;
background: radial-gradient(circle,rgba(255, 173, 173, 1) 0%, rgba(255, 214, 165, 1) 5%, rgba(253, 255, 182, 1) 25%, rgba(202, 255, 191, 1) 50%, rgba(160, 196, 255, 1) 75%, rgba(189, 178, 255, 1) 100%);
  background-attachment: fixed;
  font-family: Calibri, sans-serif;
  font-size: 0.9em;
  color: #2E2326;}
  
.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;
}

.main, .leftside, .rightside {
	border: 2px solid #2E2326;
	border-radius: 5px;
	border-bottom: 2px solid #2E2326;
	margin: 1%;
	background: #fff;
background: radial-gradient(circle, rgba(255, 173, 173, 0.5) 0%, rgba(255, 214, 165, 0.5) 5%, rgba(253, 255, 182, 0.5) 10%, rgba(202, 255, 191, 0.5) 25%, rgba(160, 196, 255, 0.5) 50%, rgba(189, 178, 255, 0.5) 75%, rgba(255, 173, 173, 10) 100%,);
	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: monospace;
	font-size: 1.2em;
	background: rgba(255, 173, 173, 10);
background: radial-gradient(circle, rgba(255, 173, 173, 1) 0%, rgba(255, 214, 165, 1) 10%, rgba(253, 255, 182, 1) 25%, rgba(202, 255, 191, 1) 50%, rgba(160, 196, 255, 1) 75%, rgba(189, 178, 255, 1) 100%);
	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: monospace;
	border-bottom: 2px dashed #F4ACB7;
}

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

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

a {
	font-family: monospace;
}

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

a:hover, a:active {
  color:#D6BCC7;
	text-decoration: underline;
	}
	
ul {
	
	line-height: 200%;
}

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

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

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

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

::-webkit-scrollbar-button {
  background: #9D8189;
}

::-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;
}

}