:root {
	--purple: #742d97;
	--teal: #53e5ab;
	--black: #20112d;
	--pink: #e7248f;
	--light: #258977;
}
#flood {
	z-index: 4;
}

.loadingScreen {
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
	background-image: url("https://weredog.nekoweb.org/assets/bluebrick.jpg");
    font-family: Handjet, cursive; 
	cursor: url("https://www.cursor.cc/cursor/399/208/cursor.png"), auto;
	color: white;
	background-size: auto;
	overflow-x: hidden;
	z-index: 1;
}
p {
	font-size: 20px;
}
a {
	color: white;
	text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: white;
}
a:visited {
  color:white;
  text-decoration: none;
}
ul {
  list-style-image: url('https://weredog.nekoweb.org/assets/leash.gif');
  font-size: 20px;

}
button {
	background-color: var(--pink);
	color: white;
	border: 2px solid var(--pink);
	padding: 20px;
}

#update{
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-color: var(--black);
	width: 100%;
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	margin-top: 2px;
	text-align: center;
	color: white;
	overflow-y: scroll;
	height: 400px;
}

#allcontain  {
width:90%;
margin: auto;
}
#headcontainer {
	margin: 20px;
	height: auto;
	float: left;
	width: 90%;
}
#headingbox {
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	width: 100%;
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	margin-top: 2px;
	text-align: center;
	color: white;
	background-image: url('https://weredog.nekoweb.org/assets/lisafrank.jpg');
	background-size:20%;
}
#container1 {
	margin: 20px;
	margin-right: 15px;
	margin-left: 90px;
	width: 55%;
	height: auto;
	float: left;
	text-align: center;
}
#container2 {
	margin: 20px;
	margin-right: 15px;
	width: 20%;
	height: auto;
	float: left;
	text-align: center;
}
#container3 {
	margin: 20px;
	margin-right: 40px;
	width: 30%;
	height: auto;
	float: left;
	text-align: center;
	margin-left: 90px;
}
#container4 {
	margin: 20px;
	margin-right: 15px;
	width: 45%;
	height: auto;
	float: left;
	text-align: center;
}
#container5 {
	margin: auto;
	width: 40%;
	height: auto;
	
	text-align: center;
}
#frontncenter {
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-color: var(--black);
	width: 90%;
	text-shadow: 1px 1px #c5bbcd;
	text-align: center;
	padding: 5px;
	margin: auto;
	color: white;
}
#headerbox {
	height: 10%;
	border-style: solid;
	border-width: 5px;
	border-color: #ba66ff #cf94ff;
	background-image: url("https://sadhost.neocities.org/images/tiles/aquagalaxy_small.gif");
	text-align: center;
	margin: 20px;
	color: white;
	padding-left: 40px;
}
#logowrap {
	width: auto;
	height: auto;
	position: relative;
}

#slidingbox {
	height: 10%;
	border-style: solid;
	border-width: 2px;
	border-color: #ba66ff #cf94ff;
	background-color: var(--teal);
	text-align: center;
	margin: 20px;
	color: white;
	padding-left: 40px;
}
#logobox {
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	width: 400px;
}
#thinkcontainer {
	width: 500px;
	height: 500px;
	position: relative;
	background-image: url("https://weredog.nekoweb.org/assets/thinking.png");
	text-align: center;
	margin: auto;
}
#thinkmedia {
	width: auto;
	height: auto;
	position: relative;
}
#leftcontainer {
	margin: 20px;
	margin-right: 15px;
	width: 20%;
	height: auto;
	float: left;
	text-align: center;
}
#rightcontainer {
	margin-left: 5px;
	margin: 20px;
	width: 50%;
	height: auto;
	float: left;
}
#rightmostcontainer {
	margin: 20px;
	margin-right: 5px;
	width: 20%;
	height: auto;
	float: left;
}
#artbox {
	margin: auto;
	width: 80%;
	height: auto;
	float: none;
	position: relative;
}

#bigbox {
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-color: var(--black);
	color: white;
	float: left;
	padding: 5px;
	text-align: center;
	width: 100%;
	margin-right: 30px;
	table-layout: center;
	margin-bottom: 5px;
}
#bigboxscroll {
	border-style: solid;
	border-width: 5px;
	border-color: var(--pink);
	background-color: url(https://weredog.nekoweb.org/assets/forest.gif);
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	text-align: center;
	width: 100%;
	margin-right: 30px;
	table-layout: center;
	margin-bottom: 5px;
	overflow-y: scroll;
	margin-top: 40px;
	height: 200px;
	scrollbar-color: magenta teal;
}
#sideboxscroll {
		border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-color: var(--black);
	width: 100%;
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	margin-top: 2px;
	text-align: center;
	color: white;
	overflow-y: scroll;
	height: 500px;
}
#sidebox {
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-color: var(--black);
	width: 100%;
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	margin-top: 2px;
	text-align: center;
	color: white;
	
}

#navbox {
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-image: url("https://weredog.nekoweb.org/assets/forest.gif");
	width: 100%;
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	margin-top: 2px;
	text-align: center;
	color: white;
}
#cd{
	z-index: 0;
	animation-name: wiggle;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	position: relative;
}
#image{
	width:auto;
}
#case {
	width: 500px;
	height: 500px;
	position: relative;
	text-align: center;
	margin: auto;
}
@keyframes wiggle {
	0% {
		left: -12px;
	}
	50% {
		left: 25px;
	}
	100% {
		left: -12px;
	}

}
#marquee {
	margin-bottom: 5px;
	padding: 2px 0;
	overflow: hidden;
	width: 852px;
	height: 31px;
	border: 6px solid #0012ca;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-style: outset;
	border-radius: 11px;
	background-color: #ece9d811;

	user-select: none;
}
#profilebox {
	margin-top: 25px;
	color: white;
	border-style: solid;
	border-width: 5px;
	border-color: var(--teal);
	background-color: var(--black);
	text-shadow: 1px 1px #c5bbcd;
	float: left;
	padding: 5px;
	text-align: center;
	width: 100%;
	position: relative;
	 animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
			}
			@keyframes example {
  0%   { top: -12px;}
  50%  {top: 25px;}
  100% {top: -12px;}
  
 
}
#bouncingbox {
	animation-name: bounce;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes bounce {
	0% {
		top: -12px;
	}
	50% {
		top: 25px;
	}
	100% {
		top: -12px;
	}
}
#wolfrun {
	position: relative;
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes wolfrun {
}

@media screen and (max-width: 800px) {
	.leftcontainer {
		float: center;
	}
}