body {
background-image: url("https://cyberpeach.net/res/gingham02.png");
background-size: 15%;
font-family: Courier New;
font-size: 15px;
color: black;
  display: flex;
  justify-content: center;
}

/*  text formatting  */
/* homepage text */
h1 {
 margin-right: 40%;
 color: #432361;
 font-size: 22px;
}

h2 {
 margin-right: 40%;
 margin-bottom: 0%;
 color: #000;
 font-size: 15px;
 font-weight: normal;
}

/* other page text */
h3 {
 margin-right: 3%;
 color: #432361;
 font-size: 22px;
}

h4 {
 margin-right: 0px;
 margin-bottom: 0px;
 margin-top: 0px;
 color: #432361;
 font-size: 16px;
}

p {
 margin-right: 3%;
 color: #000;
 font-size: 15px;
}

/* about page */
h5 {
 margin-left: 35%;
 color: #000;
 font-size: 15px;
 font-weight: normal;
}

ul {
 margin-right: 30%;
 margin-bottom: 0%;
 color: #000;
 font-size: 15px;
}

ul2 {
 margin-right: 0%;
 margin-bottom: 0%;
 color: #000;
 font-size: 15px;
}

/* connect page */
p.h6 {
 margin-bottom: 0px;
 margin-top: 5px;
 margin-left: 45%;
 color: #432361;
 font-size: 22px;
 font-weight: bold;
}

p.h7 {
 margin-left: 45%;
 color: #000;
 font-size: 15px;
 font-weight: normal;
}


p.updates {
	font-size: 10px;
}

footer {
margin: 0px;
font-size: 10px;
color: black;
font-weight: bold;
}

a:link {
 color: #8064A2; 
}

a:active {
 color: #3F2F52; 
}

a:visited {
  color:#8064A2;
}

/* --SCROLLBAR-- */
/* width */
::-webkit-scrollbar {
  background: white;
}

/* Track */
::-webkit-scrollbar-track {
  background: white;
  border: 0.5px dotted black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: lavender;
  border: 0.5px solid black;
}

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

/* Arrow Buttons */
::-webkit-scrollbar-button {
  background: lavender;
  border: 0.5px solid black;
}

.banner {
border: 1px dotted blue;
background-image: url(https://cyberpeach.net/res/banner03.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 940px;
height: 85px;
position: absolute;
top: 20px;
margin: 0 auto;
}

.nav {
border: 1px dotted blue;
background-image: url(https://cyberpeach.net/res/bkgd06.png);
background-size: 4%;
width: 940px;
height: 35px;
position: absolute;
top: 105px;
margin: 0 auto;
z-index: 3;
}

.menu {
border: 0px dotted blue;
background-color: transparent;
width: 940px;
height: 35px;
position: absolute;
top: -8px;
left: 0px;
margin: 0 auto;
z-index: 4;
}

.menumobile {
border: 0px dotted blue;
background-color: transparent;
width: 940px;
height: 35px;
position: absolute;
top: -8px;
left: 0px;
margin: 0 auto;
z-index: 4;
display: none;
}

.main {
border: 1px dotted blue;
background-color: #F7F2FF;
width: 940px;
height: 480px;
position: absolute;
top: 141px;
margin: 0 auto;
}

.home {
border: 1px dotted blue;
background-color: #F7F2FF;
background-image: url(https://cyberpeach.net/res/amethyst.png);
background-repeat: no-repeat;
  background-position: 108% 110%;
  background-size: 44% auto;
width: 700px;
height: 480px;
position: absolute;
top: -1px;
left: -1px;
padding: 2px 0 0 10px;
margin: 0 auto;
overflow: auto;
}

.blog {
border: 1px dotted blue;
background-color: #F7F2FF;
width: 739px;
height: 480px;
position: absolute;
top: -1px;
left: -1px;
padding: 0px 0 0 0px;
margin: 0 auto;
overflow: hidden;
}

.about {
border: 1px dotted blue;
background-color: #F7F2FF;
background-image: url(https://cyberpeach.net/sketchbook/me.png);
background-repeat: no-repeat;
background-size: 45%;
background-position: -4% -15%;
width: 739px;
height: 480px;
position: absolute;
top: -1px;
left: -1px;
padding: 0px 0 0 0px;
margin: 0 auto;
overflow: hidden;
}

.connect {
border: 1px dotted blue;
background-color: #F7F2FF;
background-image: url(https://cyberpeach.net/res/gwendolyn.png);
background-repeat: no-repeat;
background-size: 34%;
background-position: 8% 100%;
width: 739px;
height: 480px;
position: absolute;
top: -1px;
left: -1px;
padding: 0px 0 0 0px;
margin: 0 auto;
overflow: auto;
}

.sidebar {
border: 1px dotted blue;
background-color: #FCFCFE;
width: 229px;
height: 480px;
position: absolute;
top: -1px;
left: 710px;
margin: 0 auto;
z-index: 1;
}

/* homepage */
.updatesbar {
 border-bottom: 0px dotted blue;
 background-image: url(https://cyberpeach.net/res/updatesbar.gif);
 background-size: 100% 100%;
 background-repeat: no-repeat;
 position: absolute;
 width: 224.5px;
 height: 19px;
 top: 0px;
 left: 0px;
 padding: 5px 0px 0px 5px;
 overflow: auto;
 z-index: 2;
}

.updates {
 border: 0.5px dotted blue;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-radius: 0px;
 background-image: url(http://cyberpeach.net/res/bkgd05.png);
 background-size: 6%;
 position: absolute;
 width: 224px;
 height: 151px;
 top: 24px;
 left: 0px;
 padding: 5px 0px 0px 5px;
 overflow: auto;
 z-index: 2;
}

.div2 {
 border: 0px dotted blue;
 border-left: 0px;
 border-right: 0px;
 background-color: transparent;
 background-size: 12%;
 position: absolute;
 width: 229px;
 height: 52px;
 top: 181px;
 padding: 0px 0px 0px 0px;
 overflow: hidden;
}

.webring {
 border-top: 0.5px dotted blue;
 border-bottom: 0.5px dotted blue;
 background-color: #FFE9F4;
 position: absolute;
 width: 213px;
 height: 30px;
 top: 232.5px;
 padding: 8px;
}

.div3 {
 border: 0px solid transparent;
 background-color: transparent;
 position: absolute;
 width: 229px;
 height: 61px;
 top: 279.5px;
}

.yw-raw {
  border-top: 1px dotted blue;
  border-bottom: 1px dotted blue;
  background-image: url(https://cyberpeach.net/res/bkgd04.png);
  background-size: 35%;
  height: 100%;
  text-align: center;
  font-family: courier new;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 2px 1px 2px;
}


.div4 {
 border: 0.5px dotted blue;
 border-left: 0px;
 border-right: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 229px;
 height: 127.5px;
 top: 352px;
}

/* sidebar 2 */
.sidebar2 {
border: 1px dotted blue;
background-color: #F7F2FF;
width: 200px;
height: 480px;
position: absolute;
top: -1px;
left: 739px;
margin: 0 auto;
z-index: 1;
}

/* blog page */
.div5 {
 border: 0px solid transparent;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 113px;
 top: 0px;
}

.div6 {
 border: 0px solid transparent;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 320px;
 top: 161px;
}

.div7 {
 border: 0px solid transparent;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 44px;
 top: 115px;
}
/* about page */
.div8 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 100px;
 top: 0px;
 left: 0px;
}

.div9 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 200px;
 top: 102px;
 left: 0px; 
}

.div10 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 199px;
 height: 147px;
 top: 304px;
 left: 0px; 
}

.div11 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 199px;
 height: 25px;
 top: 453px;
 left: 0px;
} 

/* connect page boxes */
.div12 {
 border-top: 0.5px dotted blue;
 border-bottom: 0.5px dotted blue;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 300px;
 top: 90px;
 left: 0px;
}

.div13 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200.5px;
 height: 35px;
 top: 392px;
 left: 0px; 
}

.div14 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200px;
 height: 89px;
 top: 0px;
 left: -0.5px; 
}

.div15 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200.5px;
 height: 19.5px;
 top: 427px;
 left: -0.5px;   
}

.div16 {
 border: 0px dotted black;
 border-radius: 0px;
 background-color: transparent;
 background-repeat: no-repeat;
 position: absolute;
 width: 200.5px;
 height: 34px;
 top: 447px;
 left: -0.5px;
}

.bottom {
border: 1px dotted blue;
background-color: #F7F2FF;
width: 940px;
height: 31px;
position: absolute;
top: 622px;
margin: 0 auto;
z-index: 1;
}

.buttons {
	border: 0px;
	background-color: transparent;
	width: 457px;
	height: 31px;
	position: absolute;
	top: 0px;
	left: 242px;
	z-index: 2;
}

.banner01 {
 border: 0px;
 background-color: transparent;
 width: 242px;
 height: 31px;
 position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
}

.banner02 {
	background-color: transparent;
	width: 215px;
	height: 31px;
	position: absolute;
	top: 0px;
	left: 698.5px;
	z-index: 2;
}

.footer {
border: 0px dotted blue;
background-color: transparent;
background-size: 5%;
width: 940px;
height: 40px;
position: absolute;
top: 663px;
margin: 0 auto;
z-index: 1;
text-align: center;
}

.footer2 {
border: 0px dotted blue;
background-color: transparent;
background-size: 5%;
width: 940px;
height: 40px;
position: absolute;
top: 663px;
margin: 0 auto;
z-index: 1;
text-align: center;
}

/* MOBILE LAYOUT: create definitions then implement them into the mobile layout! */
/* to hide desktop elements, set display to "none" */
 @media screen and (max-width: 950px) {
body{
  width:100%;
  margin: 0px;
  display: flex;
  justify-content: center;
  background-size: 30%;
}

.banner {
  border: 0px dotted black;
  background-color: transparent;
  background-image: url(https://cyberpeach.net/mobile/mobilelogo01.png);
  background-size: 100% 90%;
  background-repeat: no-repeat;
  width: 340px;
  height: 13.5%;
  top: 8px;
  position: absolute;
  z-index: 1;
  transform: rotate(-4deg);
}

.nav {
border: 0px dotted blue;
background-image: none;
width: 385px;
height: 70px;
position: absolute;
top: 17%;
margin: 0 auto;
z-index: 2;
}

.menu {
 display: none; 
}

.menumobile {
display: block;
border: 0px dotted blue;
background-color: transparent;
width: 100%;
height: 70px;
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
z-index: 2;
}


.main {
border: 1px dotted blue;
background-color: #F7F2FF;
width: 330px;
height: 410px;
position: absolute;
top: 32%;
margin: 0;
z-index: 2;
}

.home {
border: 1px dotted blue;
background-color: #F7F2FF;
background-image: url(https://cyberpeach.net/res/amethyst.png);
background-repeat: no-repeat;
  background-position: 180% 97%;
  background-size: 70% auto;
width: 100%;
height: 410px;
position: absolute;
top: -1px;
left: -5px;
padding: 0px 0 0 10px;
margin: 0 auto;
overflow: auto;
z-index: 2;
}

.blog {
border: 1px dotted blue;
background-color: #F7F2FF;
background-repeat: no-repeat;
  background-position: 180% 97%;
  background-size: 70% auto;
width: 103%;
height: 410px;
position: absolute;
top: -1px;
left: -5px;
padding: 0px 0 0 0px;
margin: 0 auto;
overflow: hidden;
z-index: 2;
}

.about {
border: 1px dotted blue;
background-color: #F7F2FF;
background-image: url(https://cyberpeach.net/sketchbook/me.png);
background-repeat: no-repeat;
background-size: 65%;
background-position: -44% 15%;
width: 97%;
height: 410px;
position: absolute;
top: -1px;
left: -5px;
padding: 0px 10px 0 10px;
margin: 0 auto;
overflow: auto;
z-index: 2;
}

.connect {
border: 1px dotted blue;
background-color: #F7F2FF;
background-image: url(https://cyberpeach.net/res/gwendolyn.png);
background-repeat: no-repeat;
background-size: 52%;
background-position: -22% 100%;
width: 100%;
height: 410px;
position: absolute;
top: -1px;
left: -5px;
padding: 0px 0 0 10px;
margin: 0 auto;
overflow: auto;
z-index: 2;
}

/* connect page */
p.h6 {
 margin-bottom: 0px;
 margin-top: 5px;
 margin-left: 25%;
 color: #432361;
 font-size: 22px;
 font-weight: bold;
}

p.h7 {
 margin-left: 25%;
 color: #000;
 font-size: 15px;
 font-weight: normal;
}

.sidebar {
border: 1px dotted blue;
background-color: #FCFCFE;
width: 340px;
height: 290px;
position: relative;
top: 435px;
left: -5px;
margin: 0 auto;
z-index: 1;
}

/* homepage */
.updatesbar {
 border-bottom: 0px dotted blue;
 background-image: url(https://cyberpeach.net/res/updatesbar.gif);
 background-size: 100% 100%;
 background-repeat: no-repeat;
 position: absolute;
 width: 98.6%;
 height: 30px;
 top: 0px;
 left: 0px;
 padding: 5px 0px 0px 5px;
 overflow: auto;
 z-index: 2;
}

.updates {
 border: 0.5px dotted blue;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-radius: 0px;
 background-image: url(http://cyberpeach.net/res/bkgd05.png);
 background-size: 7.5%;
 position: absolute;
 width: 98.6%;
 height: 250px;
 top: 35px;
 left: 0px;
 padding: 5px 0px 0px 5px;
 overflow: auto;
 z-index: 2;
}

.webring {
 display: none; 
}

.div2 {
display: none;
}

.div3 {
display: none;
}

.div4 {
display: none;
}

/* sidebar 2 */
.sidebar2 {
display: none;
}


.bottom {
border: 1px dotted blue;
background-color: #F7F2FF;
width: 88.5%;
height: 31px;
position: absolute;
top: 676px;
margin: 0;
z-index: 1;
display: none;
}

.buttons {
	border: 0px;
	background-color: transparent;
	width: 100%;
	height: 31px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	display: none;
}

.banners {
display: none;
}

.footer {
border: 0px dotted blue;
background-color: transparent;
background-size: 5%;
width: 95%;
height: 36px;
position: absolute;
top: 130%;
margin: 0 auto;
z-index: 1;
text-align: center;
display: none;
}

.footer2 {
border: 0px dotted blue;
background-color: transparent;
background-size: 5%;
width: 95%;
height: 100%;
position: relative;
top: 655px;
margin: 0 auto;
z-index: 1;
text-align: center;
display: none;
}

}