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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #2d5fdb;
  }

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

h3, ul {
	margin: 0;
	
}

#Gbuttons li::before
{content: url('assets/disc.png');
}

#Cbuttons li::before
{content: url('assets/flow.png');
}

#Wbuttons li::before
{content: url('assets/music.png');
}

h2.header2nd::before
{content: url('assets/wing1.gif');
margin-top: 0px;
	}

h2.header2nd::after
{content: url('assets/wing2.gif');
margin-top: 0px;
	}

h3.header3rd::before
{content: url('assets/hrt1.gif');
margin-right: 60px;
	
}

h3.header4th::before
{content: url('assets/hrt2.gif');
margin-right: 60px;
	
}

h3.header5th::before
{content: url('assets/hrt3.gif');
margin-top: 3px;
margin-right: 2px;
	
}

li:hover{
	text-decoration:none;
	color:white;
	background-color:#5FC9FF;
	display:inline-block;
	min-width: 177px;
}
li a:hover{
	color:white;
	
}
.webbuttons {
	border-style: outset;
	height: 33px;
	width: 88px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	border-color: #ffffff;
	box-shadow: 2px 2px 8px #53baf5;
}

.webbuttons a {
  border-style: outset;
	height: 33px;
	width: 88px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	border-color: #ffffff;
	box-shadow: 2px 2px 8px #53baf5;
   }
   
   
li a{
	text-decoration:none;
	
}

.header4th {
	margin-top: 5px;
	
	
}

/* ^^^ random stuff^^^*/

body {
background-image: url('assets/bg-pattern.png');
font-size: 13px;
color: #1300B6;
font-family: 'SF Pixelate', sans-serif;
}

h3 {
background-color: #5FC9FF;
font-size: 17px;
color: white;
border-radius: 1px;
font-family: "Pixelify Sans", sans-serif;
	
}

h2.header2nd {
font-size: 22px;
color: white;
font-family: "Pixelify Sans", sans-serif;
	
}

/* ^^^ writing ^^^ */

p {
margin: 10px 0;
}

.dvd {
	
	margin-bottom: 5px;
	width:88px;
	height:60px;

	
}

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

/* ^^^ nothing crazy/justthe viewing or whatever idk */

.border-container {
border-style: hidden;
border-width: 1px;
border-color: white;
height: 1226px;
width: 976px;
z-index: 0;
margin-top: 37px;
margin-left: -250px;
margin-right: 20 px;
position: absolute;
}

/*^^^ lace border ^^^^ */

.border2 {
	width: 1054px;
	height: 796px;
	z-index:1;
	margin-top: 125px;
	position: absolute;
	
}

/*^^^ 2nd lace border ^^^ */

#flowers1 {
	
	z-index:-2;
	position: absolute;
	rotate: z -45deg;
	margin-left: -1300px;
	margin-top: 250px;
}	

#flowers2 {
	
	z-index:-2;
	position: absolute;
	margin-left: 1100px;
	margin-top: 40px;
	animation-name: floAnim;
  animation-duration: 180s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}	

 @keyframes floAnim {
	
	from {rotate: z 0deg; }
    to {rotate: z 360deg; }
	
}
	
#ribbon1 {
	z-index:6;
	position: absolute;
	margin-top:780px;
	margin-left: -690px;
	rotate: z 30deg;
	
}

.ultimate-container {
border-style: none;
border-width: 1px;
border-color: white;
height: 750px;
width: 1000px;
margin-top: 150px;
margin-bottom: 150px;
margin-left: 150px;
margin-right: 150px;
z-index: 2;
position: absolute;
background-color: white;
display: flex;
flex-direction: column;

}

/* ^^^ main container ^^^ */



#header {
	
	height: 150px;
	width: 1000px;
	border-color:red;
	border-style:hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	
	
	
}

#headertext {
	
	height: 150px;
	width: 582px;
	border-style:hidden;
	display: flex;
	flex-direction: row;
	
	
	
}

#divider {
	

	height: 30px;
	width: 1000px;
	border-color:red;
	border-style:hidden;
	display: flex;
	justify-content: center;
	align-items: center;

}

.star {
	height: 150px;
	width: 209px;
	border-style:hidden;
	border-color: red;
	display: flex;
	justify-content: center;
	align-items: center;
	
	
	
	
}

/*all header elements^^^*/

.navigator {
height: 570px;
width: 200px;
border-style: solid;
border-width: 10px;
background-color: #AAE2FF;
z-index: 2;
display: flex;
flex-direction: column;
  border-image-source: url(assets/border3.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 2px;

}

li{
text-decoration: none;
display: block;	
margin-top: 5px;
background-color: white;
margin-left: -40px;
min-width: 100px;
	
}



/* ^^^ navigator stuff ^^^ */

#winbord1 {
height: 514px;
width: 512px;
border-style: hidden;
border-color: white;
position: absolute;
z-index: 3;
justify-content: center;
	align-items: center;
	margin-top: 800px;
	margin-left: -900px;
}

#window1 {
height: 379px;
width: 379px;
border-style: hidden;
border-color: white;
background-color: white;
position: absoulte;
z-index: 4;
justify-content: center;
	align-items: center;
	margin-top: 865px;
	margin-left: -899px;
}
#window2 {
	z-index:9;
	position: absolute;
	height: 340px;
	width: 340px;
	margin-top: 815px;
	margin-left: 1200px;
	font-size: 15px;
	text-align: center;
	display: grid;
	place-items: center;
}
#winbord2 {
	z-index: 8;
	position: absolute;
	margin-top: 700px;
	margin-left: 1200px;
	
}

#b1 
{
	z-index: 11;
	position: absolute;
	margin-top: 200px;
	margin-left: -1250px;
	rotate: z 300deg;
}

#b2
{
	z-index: 12;
	position: absolute;
	rotate: z 30deg;
	margin-top: 1000px;
	
	
}

#b4
{
	z-index: 13;
	position: absolute;
	margin-top: 500px;
	margin-left: 1500px;
	rotate: z 345deg;
	
}

#b5 {
	z-index: 15;
	position: absolute;
	margin-left:-1300px;
	margin-top: 600px;
		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);}
	
}

.main-body {
	height: 570px;
	width: 1000px;
	display: flex;
	flex-direction: row;
	
}
.center-div {
	height: 570px;
	width: 500px;
	background-image: url(assets/bg2.png);
	border-width: 10px;
	margin-left: 7px;
	border-style: solid;
border-image-source: url(assets/border4.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 4px;
	
}

.center-main {
	height: 420px;
	width: 480px;
	background-color: white;
	text-align: center;
	overflow-y
	: auto;
	display: inline-block;
	overflow-x: hidden;
	
	
	
}



.wlcm {
	
	margin-top:5px;
}

.blinkies {
	
	height: 30px;
	width: 480px;
}


.stamps {
	
	height: 100px;
	width: 480px;
}


.rightdiv {
	height: 570px;
	width: 290px;
	background-image: url(assets/bg3.png);
	border-width: 10px;
	margin-left: 10px;
	border-style: solid;
border-image-source: url(assets/border3.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 4px;
	
	
}

.buttoncontainer {
	
	width: 254px;
	height: 200px;
	overflow: auto;
	background: white;
	border-style: double;
	border-color: #98D8FF;
	border-width: 5px;
	
	
}

.drawinguh {
	
	width: 254px;
	height: 254px;
	overflow: auto;
	background: white;
	border-style: double;
	border-color: #98D8FF;
	border-width: 5px;
	overflow: hidden;
	
	
}


.tooltip{
  visibility: hidden;
  width: 130px;
  background-color: white;
  border-style: solid;
  color: #000000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 20;
  border-image-source: url(assets/border4.png);
  border-image-repeat: round;
  border-image-slice: 11;
  border-image-outset: 4px;
border-width: 10px;
}

#li1:hover .tooltip {
  visibility: visible;
}