/* 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('arrowred.png'), pointer;
}


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

::-webkit-scrollbar-thumb {
  background: #B82828;
  border-radius: 0px;
  }

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

::-webkit-scrollbar-track {
  background: #EFCFB0;}


body {
background-image: url('bg2.png');
background-size: auto;
font-size: 12px;
color: green;
font-family: 'SF Pixelate', sans-serif;
}

::selection {
	
	background: #942D12;
	color: white;
}

.website-wrapper {
border-style: none;
border-width: 1px;
border-color: black;
height: 100vh;
width: 100vw;
display: flex;
z-index: -1;
justify-content: center;
}



.ultimate-container {
border-style: dashed;
border-width: 6px;
border-color: white;
height: 1000px;
width: 750px;
top: 150px;
z-index: 2;
position: absolute;
background-color: #8A3636;
display:flex;
flex-direction:column;
  border-image-source: url(../assets/bord5.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 3px;
}

.header {
	height: 150px;
	width: 739px;
	background-image: url('bg.png');
	background-repeat: repeat;
	justify-content: center;
	align-items: center;
	display: flex;
	
	
}

.mainbody {
	height: 845px;
	width: 739px;
	color: #8A3636;
	
	
	
	
}

#b5 {
	z-index: 15;
	position: absolute;
	left:-200px;
	top: 200px;
		animation-name: croAnim;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}	

#b6 {
	z-index: 13;
	position: absolute;
	left:650px;
	top:-10px;
}	


#b7 {
	
	z-index: 20;
	position: absolute;
	left:400px;
	top: 600px;
	rotate: z -15deg;
	
}


#b8 {
	
	z-index: 22;
	position: absolute;
	left:50px;
	top: 900px;
	rotate: z -45deg;
	
	
}


#b9  {
	
	z-index: 24;
	position: absolute;
	left:-250px;
	top: -100px;
	
	
}




#n1 {
	
	z-index: 18;
	position: absolute;
	left: 600px;
	top: 1px;
	rotate: z 10deg;
}

#n2 {
	
	z-index: 19;
	position: absolute;
	left: -115px;
	top: 730px;
	
}

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

.stardivs {
	
	height: 21px;
	width: 739px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #B82828;
}

.writes {
	
	width: 739px;
	height: 820px;
	background-image: url('bg3.png');
	padding: 5px;
	display: flex;
	flex-direction: column;
	
}

.w1 {
	
	
	width: 729px;
	height: 350px;
	overflow-y: auto;
	overflow-x: hidden;
	background-image: url('../assets/linedp.png');
	background-repeat: repeat-y;
	background-size: contain;
	padding-left: 100px;
	padding-top: 7px;
	border-radius: 3px;
	border-style: dashed;
	border-width: 2px;
	border-color: white;
	margin: 5px;
	
}

.w2 {
	
	width: 350px;
	height: 350px;
	overflow: auto;
	background-color: #F5ECDD;
	border-radius: 3px;
	border-style: dashed;
	border-width: 2px;
	border-color: white;
	margin: 5px;
	display: flex;
	flex-direction: column;
	vertical-align: middle;
	padding: 5px;
	text-align: center;
	background-image: url('../assets/crumple.png');
	background-size: cover;
	text-shadow: 0 0 3px #FF0000;
	
}

.rightcont {
	
	height: 350px;
	width: 380px;
	background-color: none;
	display: inline;
	padding: 5px;
}

.w3 {
	
	height: 350px;
	width: 370px;
	background-color: none;
	margin: 5px;
	display: inline;
	
}

.lowercont {
	
	height: 360px;
	width: 729px;
	display: flex;
	flex-direction: row;
}

a{
	text-decoration:none;
	
}

.album {
	width: 250px;
	height: 250px;
	margin-top: 5px;
	margin-left: 50px;
	
}

.kid {
	display: none;
	margin: 3px;
	
}

#afftd:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#sm:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#cheers:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#beft:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#bones:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#bullets:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#dtbm:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#dtbm2:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#dte:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#eh:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#fasb:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#ht:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#iag:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#itis:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#jun:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#letgo:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#mad:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#meteora:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#saosin:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#soh:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#sta:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#toxicity:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#ttn:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#wake:hover + .kid {
	
	display: block;
	margin: 3px;
	
}

#divider {
	
	margin-left: 140px;
}


ul{
	
	list-style-type: none;
}

#yums li::before {
	
	content: url('../assets/red.gif');
	
}

#ysongs li::before {
	
	content: url('../assets/red2.gif');
	
}