/* this whole website has the worst coding known to man so good luck sifting through it (to future me) */
* {
box-sizing:border-box;
image-rendering: pixelated;
}

/* ^^^ images ^^^ */

html {
cursor: url('startrio.png'), pointer;
}


body {
background-image: url('bg3.gif');
font-size: 14px;
color: #BD3966;
font-family: 'Courier New', monospace;
}


p {
margin: 10px 0;
}


::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #E88EA8;
  border-radius: 0px;
  border: 2px solid #ffffff;
  }

::-webkit-scrollbar-thumb:hover {
  background: #F0A3B8;
  }

::-webkit-scrollbar-track {
  background: none;}
  
 ::selection {
	
	background: #F0A3B8;
	color: white;
}

mark {
  background: #F0A3B8;
	color: white;
}

#b1::before {
	
	content: url('../assets/hrt10.gif');
	margin-top: 0px;
}


#b2::before {
	
	content: url('../assets/hrt9.gif');
	margin-top: 0px;
}


h3::before
{content: url('../assets/wing3.gif');
margin-top: 0px;
	}
	
h3::after
{content: url('../assets/wing4.gif');
margin-top: 0px;
	}

h1, img {
	margin: 0;
	
}

a{
	text-decoration:none;
	color: #BD3966;
}

#kc {
	
	position: absolute;
	z-index: 15;
	animation: swing 10s infinite alternate ease-in-out;
	transform-origin: top;
	height: 400px;
	width: auto;
	margin-left: 1000px;
	margin-top: 900px;
}

#ama {
	
	height: 400px;
	width: auto;
	position: absolute;
	z-index: 16;
	rotate: z 4.5deg;
	margin-left: -1000px;
	margin-top: -400px;
}
@keyframes swing {
	
	from { transform: rotate(15deg);
		
		
		
	}
	
	to {
		
		transform: rotate(-15deg);
		
	}
	
}


.website-wrapper {
border-style: none;
border-width: 1px;
border-color: black;
height: 100vh;
width: 100vw;
display: flex;
z-index: -5;
justify-content: center;
align-items:center;
overflow: hidden;
position: absolute;
}


#chaka1 {
	
	position: absolute;
	z-index: 8;
	margin-bottom: -500px;
	margin-left: -1020px;
	rotate:z  -15deg;
}

#cam1 {
	position: absolute;
	z-index: 7;
	margin-top:300px;
	margin-right: -1320px;
	rotate:z  15deg;
	height: 300px;
	width: auto;
	
}

#bow {
	
	position: absolute;
	z-index:-3;
	height: 900px;
	width: auto;
	rotate: z 10deg;
	margin-left: 900px;
	margin-top: -100px;
}

.top {
	
	position: absolute;
	z-index: -2;
	width: 400px;
	height: 100px;
	background-color: none;
	margin-top: -630px;
	margin-left: -500px;
	padding-top: 20px;
	padding-left: 50px;
	padding-right: 50px;
	display: flex;
	flex-direction: row;
}



#b1 {
	
	height: 100px;
	width: 120px;
	background-color: white;
	margin-right: 10px;
	 box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	 transition: transform ease 0.5s;
	 top: 0px;
	 border-width: 12px;
	border-style: solid;
	border-image-source: url(../assets/border6.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 4px;
}

#b1:hover {
	
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	
}

#b2:hover {
	
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	
}

#b2 {
	
	height: 100px;
	width: 120px;
	background-color: white;
	margin-left: 10px;
	transition: transform ease 0.5s;
	 box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	 	border-width: 12px;
	border-style: solid;
	border-image-source: url(../assets/border6.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 4px;
}

#c2 {
	
	display: none;
}

.ultcont {
	display: flex;
	flex-direction: row;
	justify-content: center;
align-items:center;
	height: 620px;
	width: 1000px;
	background-color: red;
	position: absolute;
	z-index: 1;
	border-width: 10px;
	border-style: solid;
	border-image-source: url(border1.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 4px;
  background-color: #ffdce0;
   box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.page1 {
	
	height: 550px;
	width: 450px;
	background-image:url(bg.png);
	z-index: 2;
	margin: 10px;
	border-radius: 5px;
	border-color: #f0e0cc;
	border-width: 2px;
	border-style: dotted;
}

.page2 {
	
	height: 550px;
	width: 450px;
	background-image:url(bg.png);
	z-index: 2;
	margin: 10px;
	border-radius: 5px;
	border-color: #f0e0cc;
	border-width: 2px;
	border-style: dotted;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}


.wcont1 {
	
	max-height: 250px;
	width: 400px;
	height: 250px;
	background-color: rgba(255, 255, 255, 0.35);
	border-width: 10px;
	border-style: solid;
	margin: 20px;
	padding: 0px;
	 border-image-source: url(../assets/border5.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 2px;
	overflow-x: hidden;
	overflow-y: auto;
}

#second.wcont2 {
	max-height: 250px;
	width: 400px;
	height: 250px;
	background-color: rgba(255, 255, 255, 0.35);
	border-width: 10px;
	border-style: solid;
	margin: 20px;
	 border-image-source: url(../assets/border5.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 2px;
  
}

#first.wcont2 {
	
	height: 510px;
	width: 400px;
	background-color: rgba(255, 255, 255, 0.35);
	border-width: 10px;
	border-style: solid;
	margin: 20px;
	 border-image-source: url(../assets/border5.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 2px;
  text-align: center;
}

#first.wcont2::before {
	
	width: 100%;
	height: 70px;
	content: url(../assets/pnk.gif);
	 background-color: none;
	margin-left: 70px;
	margin-right: 70px;
	margin-bottom: 20px;

}

#quote::before {
	
	content: url(../assets/hrt8.gif);
}

.spine {
	
	z-index: 5;
	position: absolute;
}

.home {
	
	z-index: 2;
	position: absolute;
	margin-top: 700px;
	width: 300px;
	height: 50px;
	background-image:url(bg.png);
	text-align: center;
	align-content: center;
}

#yur {
	
	top: 0px;
	left: 0px;
	z-index: 20;
	position:fixed;
	width: 600px;
	height: auto;
	
	
}


#zur {
	
	bottom: 0px;
	right: 0px;
	z-index: 21;
	position:fixed;
	
	
	
}

#perk {
	z-index: 19;
	position: absolute;
	margin-left:-1500px;
	margin-top: 400px;
		animation-name: croAnim;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}	

 @keyframes croAnim {
	
	from {transform: rotateX(0deg) rotateY(0deg)
	rotateZ(0deg);}
    to {transform: rotateX(360deg)
	rotateY(360deg)
	rotateZ(360deg);}
	
}