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

/* Track */
::-webkit-scrollbar-track {
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff6699;
}

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

body {
	background-color: #f5cad1;
	color: black;
	font-family: ms gothic;
	background-image: url('bg2.png'); 
	background-size: 600px; background-repeat: no-repeat; 	background-position: top left; display: block;
}

.content {margin: auto; width: 1000px; height: 950px;}
.container {margin: auto; width: 1000px; display: flex;}

.left {
	float: left;
	width: 37%;
	border-left: 3px dashed #ff6699;
	border-right: 3px dashed #ff6699;
	border-top: none;
	border-bottom: none;
	padding: 5px;
	color: black;
}

.left a {color: white;}
.left a:hover {color: black;}

.leftinner {padding: 5px; background-color: #ff6699; font-size: 14px; height: 900px; color: white;}


.right {float: right; width: 60%; height: 900px;}

.titles a {color: #ff87bb; text-decoration: none;}   
.titles a:hover {background-color: pink;}

.intro {
	margin: auto;
        width:600px; 
	height: 400px;
	background-image: url(graphics/coverbg.png); 
	background-size: 300px; background-color: #faf688; background-repeat: no-repeat; background-position: bottom left; display: block;
	display: block;
	font-size: 14px;
}

.intro a {color: #ff6699;}

.monitors {font-style: italic; font-size: 12px; font-weight: bold;}
.monitors img {height: 100px; vertical-align: center;}


.page1, .page2 {
	margin: auto;
        width: 500px; 
        height: 770px;
	overflow-x: hidden; overflow-y: scroll;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; 
  }
}

.text {margin-left: 10px; font-size: 11px;}
.text a {color: #ff6699;}
.text span {font-size: 10px;}