/*GLOBAL STUFF---------------------------------------------------------------------------*/
body {
	background: linear-gradient(180deg, rgba(2,0,36,0.6) 0%, rgba(64,9,121,0.6) 34%, rgba(255, 107, 24,0.6) 77%, rgba(255,200,43,0.6) 98%), url("/main_images/bgmain.png");
	background-attachment:fixed;
	font-family: "comic";
	color: black;
	-webkit-text-stroke-color: black;
}

@media only screen and (max-width: 800px) {
  body {
    background-color: black;
	background-image: url("/main_images/mobilebg.png");
	background-attachment:scroll;
  }
}

#page-wrap {
	width: 800px;
	margin: 0 auto;
}

@font-face {
	font-family: 'comic';
	src: url("comic.ttf");
	src: url("comic.otf");
}

.containermain {
  display: grid; 
  grid-template-columns: 0.8fr 1.2fr 1fr 1fr; 
  grid-template-rows: 0fr 0.6fr 0.6fr 1.8fr 0.7fr;
  gap: 0px 0px; 
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
}


.content {
  display: grid; 
  gap: 0px 0px; 
  grid-area: 2 / 1 / 5 / 5;
  margin-bottom:10px;

}

header h1 img {
  transform: rotate(-5deg);
  height: 90px;
  width: auto;
}


.victini { 
	grid-area: 1 / 1 / 2 / 2; 
}

	
.header{
	grid-area: 1 / 2 / 2 / 5; 
	position:relative;
}

.footer {
	grid-area: 5 / 1 / 6 / 5; 
	border-radius: 50px 0px 0px 50px;
	height:60px;
	line-height:60px;
	font-size:20px;
	padding:5px;

}

li{
	list-style-image: url("/main_images/pokeball.gif");
}

.starbanner{
	position:absolute;
	right:0px;
	z-index:-1000;
	
}

.purple {
	border-style: solid;
	border-color: purple;
	border-color: rgba(64,9,121,1);
	background-color: purple;
	background-color: rgba(64,9,121,0.7);
	color:#E9E9D3;
}

.purple a{
	color:#E9E9D3;
}

.blue {
	border-style: solid;
	border-color: blue;
	border-color: rgba(2,0,36,1);
	background-color: blue;
	background-color: rgba(2,0,36,0.7);
	color:#EED7C9;
}

.blue a{
	color:#EED7C9;
}

.orange {
	border-style: solid;
	border-color: orange;
	border-color: rgba(255, 107, 24,1);
	background-color: orange;
	background-color: rgba(255, 107, 24,0.7);
	color:#08020A;
}

.orange a{
color:#08020A;
}

.yellow {
	border-style: solid;
	border-color: yellow;
	border-color: rgba(255,200,43,1);
	background-color: yellow;
	background-color: rgba(255,200,43,0.7);
	color:#061630;
}

.yellow a{
	color:#061630;
}


.topnav {
	border-style: solid;
	border-color: yellow;
	border-color: rgba(255,200,43,1);
	background-color: yellow;
	background-color: rgba(255,200,43,0.7);
	border-radius: 50px 0px 0px 50px;
	overflow: hidden;
}

.topnav a {
	float: left;
	color: #061630;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:hover {
	transform:rotate(7deg);
	color:white;
}

h2{
	font-family: "comic";
	padding:5px;
	height:25px;
}

h3{
	font-family: "comic";
	height:20px;
	padding:5px;
}

.logo {
	margin: 0px;
	float: inherit;
}

.dropshadow{
	filter:drop-shadow(6px 6px rgba(0, 0, 0, 0.5));
}

/*global stuff MOBILE VERSION-----------------------------*/


/*index page--------------------------------------------------
ROW START / COLUMN START / ROW END / COLUMN END--------------*/


.aboutsite { 
	grid-area: 3 / 1 / 6 / 3; 
	width:440px;
	border-radius: 0px 50px 50px 0px;
	font-size:20px;
	padding:5px;
}

.dandelions{
	grid-area: 2 / 2 / 2 / 2;
	position:relative;
}

.welcome{
	grid-area: 3 / 3 / 3 / 5;
	border-radius: 50px 0px 0px 50px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	width:350px;
	height:40px;
}
.www { 
	grid-area: 4 / 3 / 6 / 5; 
}

.ratglobe { 
	grid-area: 1 / 3 / 3 / 5; 
}

.arrow { 
	grid-area: 2 / 1 / 3 / 2; 
}


.h2main { 
grid-area: 1 / 1 / 1 / 3;
height:30px;
width:440px;
line-height:30px;
border-radius: 0px 50px 50px 0px;
padding-bottom:15px;
margin-bottom:0px;
 }


.h3main { 
grid-area: 2 / 2 / 2 / 3; 
text-align:center;
line-height:25px;
height:25px;
border-radius: 50px;
width:300px;
margin-top:0px;
}

/*ABOUT ME----------------------------------------------------------------*/

.aboutmetitle { 
	grid-area: 1 / 2 / 2 / 4; 
	position:relative;
}


.about1 { 
	grid-area: 2 / 1 / 3 / 2; 
	border-radius: 0px 50px 50px 0px;
	width:245px;
}
.about2 { 
	grid-area: 2 / 4 / 3 / 5; 
	border-radius: 50px 0px 0px 50px;
	width:245px;
}
.about3 { 
	grid-area: 5 / 1 / 6 / 2; 
	border-radius: 0px 50px 50px 0px;
	width:245px;
}
.about4 { 
	grid-area: 5 / 4 / 6 / 5; 
	border-radius: 50px 0px 0px 50px;
	width:245px;
}

.me{
	grid-area: 2 / 2 / 6 / 4;
}

.shinycharm{
	grid-area: 2 / 5 / 2 / 5;
	position:relative;
}

.shtickerbook{
	grid-area: 3 / 2 / 3 / 2;
	position:relative;
}

.mikufig1{
	grid-area: 3 / 1 / 4 / 1;
	position:relative;
	z-index:99;
}

.listening{
	grid-area: 3 / 4 / 3 / 4;
	position:relative;
}

.feeling{
	grid-area: 3 / 4 / 3 / 4;
	position:relative;
	
}

.pikachu{
	grid-area: 5 / 3 / 6 / 4;
	position:relative;
}

.samuel{
	grid-area: 5 / 2 / 6 / 3;
	position:relative;
}

.pronouns{
	grid-area: 2 / 2 / 2 / 2;
	position:relative;
}

.mcrbutton{
	grid-area: 6 / 5 / 6 / 5;
	position:relative;
}

.mizukistamp{
	grid-area: 2 / 4 / 2 / 4;
	position:relative;
}

.now{
	grid-area: 3 / 1 / 4 / 1;
	position:relative;
}

.now p{
	position:absolute;
	border-radius:50px;
	padding-left:10px;
	width:270px;
	padding:0px;
	left:100px;
	top:20px;
}

.bread{
	grid-area: 5 / 3 / 6 / 4;
	position:relative;
}

.bread img{
	transform:rotate(10deg);
	position:absolute;
	height:100px;
	top:90px;
	left:60px;
	
}
/*collection directory----------------------------------------------------*/
.collectcontainer {  
  display: grid;
  grid-auto-flow: row;
  grid-area: 2 / 1 / 5 / 5;
  grid-template-rows:0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr ;
  margin-bottom:20px;
}

.collecttitle{
	grid-area: 1 / 2 / 2 / 3;
	border-radius: 50px;
	text-align:center;
	height:40px;
	line-height:40px;
}

.collectcontainer div a{
	text-decoration: none;
	display:inline-block;
}

.collectcontainer div a:hover{
	transform:rotate(7deg);
}

.kanto { 
	grid-area: 2 / 1 / 2 / 2;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 0px 50px 50px 0px;
	text-decoration:none;
	text-align:center;
}

.kanto img{
	position:absolute;
	top:-60px;
	left:110px;
}

.johto { 
	grid-area: 2 / 3 / 2 / 4;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 50px 0px 0px 50px;
	text-decoration:none;
	text-align:center;
}

.johto img{
	position:absolute;
	top:-60px;
	left:-80px;
}

.hoenn { 
	grid-area: 3 / 1 / 3 / 2;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 0px 50px 50px 0px;
	text-decoration:none;
	text-align:center;
}

.hoenn img{
	position:absolute;
	top:-60px;
	left:110px;
}

.sinnoh { 
	grid-area: 3 / 3 / 3 / 4;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 50px 0px 0px 50px;
	text-decoration:none;
	text-align:center;
}

.sinnoh img{
	position:absolute;
	top:-60px;
	left:-80px;
}

.unova { 
	grid-area: 4 / 1 / 4 / 2;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 0px 50px 50px 0px;
	text-decoration:none;
	text-align:center;
}

.unova img{
	position:absolute;
	top:-60px;
	left:110px;
}

.kalos { 
	grid-area: 4 / 3 / 4 / 4;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 50px 0px 0px 50px;
	text-decoration:none;
	text-align:center;
}

.kalos img{
	position:absolute;
	top:-60px;
	left:-80px;
}

.alola { 
	grid-area: 5 / 1 / 5 / 2;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 0px 50px 50px 0px;
	text-decoration:none;
	text-align:center;
}

.alola img{
	position:absolute;
	top:-60px;
	left:110px;
}

.galar { 
	grid-area: 5 / 3 / 5 / 4;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 50px 0px 0px 50px;
	text-decoration:none;
	text-align:center;
}

.galar img{
	position:absolute;
	top:-60px;
	left:-80px;
}

.hisui { 
	grid-area: 6 / 1 / 6 / 2;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 0px 50px 50px 0px;
	text-decoration:none;
	text-align:center;
}

.hisui img{
	position:absolute;
	top:-60px;
	left:110px;	
}

.paldea { 
	grid-area: 6 / 3 / 6 / 4;
	position:relative;
	font-family:comic;
	height:40px;
	line-height:30px;
	font-size:30px;
	border-radius: 50px 0px 0px 50px;
	text-decoration:none;
	text-align:center;
}

.paldea img{
	position:absolute;
	top:-60px;
	left:-80px;	
}

.middle { 
	grid-area: 2 / 2 / 7 / 3;
	border-radius:50px;
	width:350px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:10px;
}

.middle h3{
	margin-left:15px;
}

/*POKEMON PAGES INDIVIDUAL--------------------------------------------*/
.boxcontent{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 0.5fr;
	grid-area: 2 / 1 / 5 / 5;
}


.leftbox{
	border-radius: 0px 50px 50px 0px;
	grid-area: 1 / 1 / 2 / 2;
	margin:20px;
}

.leftbox img{
	margin-left:15px;
	padding:10px;
}

.rightbox{
	border-radius: 50px 0px 0px 50px;
	grid-area: 1 / 2 / 2 / 3;
	margin:20px;
	padding:10px;
}

.leftboxpikachu{
	grid-area: 1 / 1 / 2 / 2;
	margin:20px;
	border-radius: 0px 50px 50px 0px;
}

.leftboxpikachu img{
	margin-left:15px;
	padding:10px;
}

.leftboxpikachu2{
	grid-area: 2 / 1 / 3 / 2;
	margin:20px;
	border-radius: 0px 50px 50px 0px;
}

.leftboxpikachu2 img{
	margin-left:15px;
	padding:10px;
}

.leftboxpikachu3{
	grid-area: 3 / 1 / 4 / 2;
	margin:20px;
	border-radius: 0px 50px 50px 0px;
}

.leftboxpikachu3 img{
	margin-left:15px;
	padding:10px;
}

.leftboxpikachu4{
	grid-area: 4 / 1 / 5 / 2;
	margin:20px;
	border-radius: 0px 50px 50px 0px;
}

.leftboxpikachu4 img{
	margin-left:15px;
	padding:10px;
}

.rightboxpikachu{
	grid-area: 1 / 2 / 5 / 3;
	margin:20px;
	padding:10px;
	border-radius: 50px 0px 0px 50px;
}

/*BLOG-----------------------------------------------------------------*/
.blogcontainer{
	grid-area: 2 / 1 / 5 / 5;
	display:grid;
	margin:40px;
}

.articles{
	text-align:left;
}

.articles li{
	font-size:15px;
	margin-top:5px;
}

/*UPDATES---------------------------------------------------------------*/
.updatecontainer{
	grid-area: 2/ 1 / 5 / 5;
	display:grid;
}

.updatecontainer article{
	border-radius:50px;
	margin:20px;
	padding:15px;
}

/*PLUSH GALLERY-----------------------------------------------------------*/
.gallery{
  grid-area: 3 / 1 / 5 / 5;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 	
  width:800px;
}

.gallery section{
	border-radius:50px;
	margin:5px;
}

.gallery section img{
	width:180px;
	margin-left:1px;
	margin-right:1px;
	border-radius:50px;
}

.gallery section h3{
	margin:0px;
	margin-bottom:5px;
	text-align:Center;
}


.pokeballs{
	grid-area: 2 / 1 / 2 / 3;
	border-style: solid;
	border-color: blue;
	border-color: rgba(2,0,36,1);
	background-color: blue;
	background-color: rgba(2,0,36,0.7);
	color:#EED7C9;
	border-radius: 0px 50px 50px 0px;
	height:100px;
	text-align:center;
}

.pokeballs h2{
	margin:0px;
}

.teams{
	grid-area: 2 / 3 / 2 / 5;
	border-style: solid;
	border-color: orange;
	border-color: rgba(255, 107, 24,1);
	background-color: orange;
	background-color: rgba(255, 107, 24,0.7);
	color:#08020A;	
	border-radius: 50px 0px 0px 50px;
	height:100px;
	text-align:center;
}

.display-none{
  display:none;
}

.tab:target{
  display:block;
}

.teams a:hover{
  color:white;
  transform:rotate(7deg);
}

.tab-buttons button{
  background-color: transparent;
  font-size: 18px;
  border-style: none;
  margin-bottom: 0px;
  color:black;
  font-family:comic;
}

.tab-buttons button:hover{
	color:white;
	transform:rotate(7deg);
}

.child {
	align-self: flex-end;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
	transform-origin: bottom;
}

.bounce:hover {
	animation-name: bounce;
	animation-timing-function: steps(2, end);
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10px);
	}
}

.child2 {
	align-self: flex-end;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	transform-origin: bottom;
}

.bounce2 {
	animation-name: bounce2;
	animation-timing-function: linear;
}

@keyframes bounce2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}
/*--POKEMON NAMES-------------------------------------------------*/

.namecontainer{
	display:grid;
	grid-area: 2 / 1 / 5 / 5;
}

.dreamworld{
	grid-area: 1 / 1 /5 / 5;
}

.dreamworld img{
	height:300px;
	z-index:99;
}

.statistics{
	grid-area: 1 / 3 / 3 / 6;
	margin-top:50px;
	padding-left:300px;
	height:180px;
	border-radius: 50px 0px 0px 50px;
}

.statistics h2{
	text-decoration:underline;
	display:inline;
}

.statistics ul{
	margin:5px;
	padding-left:0px;
}

.namedesc{
	grid-area: 3 / 1 / 6 / 6;
	padding:10px;
	height:100px;
	border-radius: 0px 50px 50px 0px;
}


/*--LINKS--------------------------------------------------------------*/

.linkcontainer {
  display: grid; 
  grid-area: 2 / 1 / 5 / 5;
  gap: 0px 0px; 
}
.webrings { 
	grid-area: 1 / 1 / 2 / 2; 
	height:350px;
	margin:20px;
	margin-left:auto;
	margin-right:auto;
	width:320px;
}
.personal { 
	grid-area: 1 / 2 / 2 / 3; 
	height:350px;
	margin:20px;
	margin-left:auto;
	margin-right:auto;
	width:370px;
}

.webdev{
	grid-area: 2 / 1 / 3 / 2;
	margin:20px;
	border-radius:50px;
}

.windows{
	grid-area: 2 / 2 / 3 / 2;
	margin:20px;
	border-radius:50px;
}

.piracy { 
	grid-area: 3 / 1 / 4 / 2; 
	border-radius:50px;
	margin:20px;
}

.linktome{
	grid-area:3 / 2 / 4 / 2;
}

.linktome div{
	border-radius: 50px 0px 0px 50px;
	padding-left:20px;
}

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  margin-right:3px;
  margin-top:3px;
  margin-bottom:3px;
  min-height: 10px;
}

.simplebar-scrollbar:before{
  position: absolute;
  content: '';
  left: 2px;
  border-radius:0px;
  right: 2px;
  opacity: 1;
  transition: none;
}
.simplebar-scrollbar.simplebar-visible:before {
  /* When hovered, remove all transitions from drag handle */
  opacity: 1;
}

.orange .simplebar-scrollbar{
	background-color: rgba(255, 107, 24,1);
}

.orange .simplebar-scrollbar:before{
	background-color: rgba(255, 107, 24,1);
}

.orange .simplebar-scrollbar.simplebar-visible:before{
	background-color: rgba(255, 107, 24,1);
}

.purple .simplebar-scrollbar{
	background-color:rgba(64,9,121,1);
}

.purple .simplebar-scrollbar:before{
	background-color:rgba(64,9,121,1);
}

.purple .simplebar-scrollbar.simplebar-visible:before{
	background-color:rgba(64,9,121,1);
}

/*recipe pages----------------------------------------------------------*/
.lacebg{
  background-image:url('/recipes/lace.jpeg');
  cursor: url("/recipes/sparklepurple.gif");
}

.lacebanner{
	position:absolute;
	top:200px;
	z-index:99;
	left:130px;
}

.recipemain{
	display:grid;
}

.recipeheader{
	grid-area: 1 / 1 / 1 / 6;
	display:grid;
	position:relative;
}

.recipetitle{
	grid-area: 1 / 2 / 1 / 5;
}	

.cakeleft{
	grid-area: 1 / 1 / 1 / 1;
}

.cakeright{
	grid-area: 1 / 5 / 1 / 6;
}

.recipetitle img{
	margin-left:65px;
}
.recipebook {
	grid-area: 3 / 1 / 5 / 6; 
}

.recipenav {
	border-style: solid;
	border-width:5px;
	border-color: #9F85E1;
	background-color: blue;
	background-color:rgba(227,218,249,0.75);
	overflow: hidden;
	grid-area: 2 / 2 / 2 / 5;
	margin-bottom:60px;
}

.recipenav a {
	float: left;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.recipenav a:hover {
	background-color: blue;
	background-color:rgba(227,218,249,1);
	color: black;
}

.lightpurple{
  border-style: solid;
	border-width:5px;
	border-color: #9F85E1;
	background-color: blue;
	background-color:rgba(227,218,249,0.75);
	text-align:left;
}

/*Hypnospace Outlaw-----------------------------------------------------*/
.hypnocontainer {  display: grid;
 grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr 0.5fr; 
  grid-template-rows: 0.7fr 0.7fr 1.6fr 1fr; 
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "hypnostars1 hypnoheader hypnoheader hypnoheader hypnostars2"
    "hypnostars1 hypnoheader2 hypnoheader2 hypnoheader2 hypnostars2"
    "hypnostars1 hypnobody hypnobody hypnobody hypnostars2"
    "hypnostars1 hypnolink hypnolink hypnolink hypnostars2";
}

.hypnoheader { grid-area: hypnoheader; }

.hypnoheader2 { grid-area: hypnoheader2; }

.hypnobody { grid-area: hypnobody; }

.hypnolink { grid-area: hypnolink; }

.hypnostars1 { grid-area: hypnostars1; }

.hypnostars2 { grid-area: hypnostars2; }

.hypnobg{
  background-image: url('silly/hypnos/cloudset1.png');
  cursor: url("cursor1x.cur");
}

/*RAT PAGE--------------------------------------------------------*/
.ratcontainer {  display: grid;
  gap: 0em 0em;
  grid-auto-flow: row;
  place-content: center;
  grid-template-areas:
    ". . . . ratzone1 . . ratzone2 . . . ."
    ". ratzone3 mutant1 titlle titlle titlle titlle titlle titlle mutatnt2 ratzone4 ."
    ". . . . ratzone5 . . ratzone6 . . . ."
    "question question question question question question answer answer answer answer answer answer"
    ". . . ratatta1 ratatta1 models models ratatta2 ratatta2 remy remy ."
    ". . . ratatta1 ratatta1 models models ratatta2 ratatta2 remy remy ."
    ". sign1 sign1 . . spin spin . . sign2 sign2 ."
    ". sign1 sign1 . . spin spin . . sign2 sign2 ."
    "silly silly silly silly silly silly silly silly silly silly silly silly"
    "ratsintrans ratsintrans ratsintrans ratsintrans ratsintrans ratsintrans rina rina rina rina rina rina";
}

.titlle { grid-area: titlle; }

.mutant1 { grid-area: mutant1; }

.mutatnt2 { grid-area: mutatnt2; }

.ratzone1 { grid-area: ratzone1; }

.ratzone2 { grid-area: ratzone2; }

.ratzone3 { grid-area: ratzone3; }

.ratzone4 { grid-area: ratzone4; }

.ratzone5 { grid-area: ratzone5; }

.ratzone6 { grid-area: ratzone6; }

.question { grid-area: question; }

.answer { grid-area: answer; }

.ratatta1 { grid-area: ratatta1; }

.silly { grid-area: silly; }

.ratatta2 { grid-area: ratatta2; }

.models{ grid-area: models; }

.remy { grid-area: remy; }

.sign1 { grid-area: sign1; }

.sign2 { grid-area: sign2; }

.spin { grid-area: spin; }

.ratsintrans { grid-area: ratsintrans; }

.rina { grid-area: rina; }

.ratbg {
	background-image: url('/silly/rats/neon.gif');
}

.rattopnav{
	font-family:comic;
	border-radius:50px;
	width:635px;
	margin-left:auto;
	margin-right:auto
}
/*TOONTOWN-----------------------------------------------------*/
.ttbg{
 background:#f6c719 url('/shrines/toontown/bg.jpg') no-repeat top center fixed;
 background-size:100% 100%;
 height:100%;
 cursor: url("/shrines/toontown/cursor.png")
}

@font-face{
  font-family: 'magic';
  src: url("/shrines/toontown/magic.ttf");
}

.toonlist{
  position: relative;
  display: block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width: 512px;
  height: 512px;
  background-image: url("/shrines/toontown/party.png");
}

.superzany{
  text-decoration: none;
  color: black;
}

.superzany:hover{
  font-weight: bold;
}

.toonblue{
  display:block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:600px;
  height:100px;
  background-image: url('/shrines/toontown/blue.jpg');
  background-repeat: repeat;
  border-radius: 20px;
}

.bluebox{
  position: relative;
  display:block;
  text-align: left;
  margin-left:auto;
  margin-right:auto;
  width:600px;
  height:auto;
  background-image: url('/shrines/toontown/bluebox.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.task{
  position: relative;
  display:block;
  text-align: left;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:10px;
  width:600px;
  height:auto;
  background-image: url('/shrines/toontown/task1.png');
  background-position: right;
  background-size: contain;
  background-repeat: no-repeat;
}

.doodle{
  background-color: #6F9BF4;
  border-color: #4E78C5;
  border-style: solid;
  border-radius: 100px;
  width:100px;
}

.arrowback{
  background-color: #6F9BF4;
  border-color: #4E78C5;
  border-style: solid;
  border-radius: 100px;
  height: 60px;
  position: fixed;
  left: 10%;
  bottom: 10%;
  text-align: center;
  font-family:comic;
  z-index:999;
}

.arrowback:hover{
  background-color: #4E78C5;
  border-color: #6F9BF4;
  font-weight: bold;
}

.arrowup{
  background-color: #6F9BF4;
  border-color: #4E78C5;
  border-style: solid;
  border-radius: 100px;
  height: 60px;
  position: fixed;
  right:10%;
  bottom: 10%;
  text-align: center;
  z-index:999;
  font-family:comic;
}

.arrowup:hover{
  background-color: #4E78C5;
  border-color: #6F9BF4;
  font-weight: bold;
}

/*sekai---------------------------------------------*/
.sekaicontainer{
	display:grid;
}

.title { grid-area: 1 / 1 / 2 / 4; }
.bunny { grid-area: 1 / 4 / 2 / 6; }
.stats { grid-area: 2 / 3 / 4 / 6; }
.chart { grid-area: 2 / 1 / 4 / 3; }
.cards { grid-area: 4 / 3 / 7 / 6; }
.collection { grid-area: 4 / 1 / 6 / 3; }
.blinkies { grid-area: 6 / 1 / 7 / 3; }

.sekaibg{
  background-image: url('click/sekai/feathers.gif');
}

.sekai{
	border-style: solid;
	border-width:8px;
	border-radius:50px;
	border-color: rgb(0, 188, 208);
	background-color: blue;
	background-color:rgba(0, 188, 208, 0.75);
	text-align: left;
	font-size: 20px;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 300px; 
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: transparent;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: transparent;
  color: white;
  transform: rotateY(180deg);
} 
/*miku------------------------------------*/

.mikubg {
	background-image: url('/shrines/miku/binary.gif');
	cursor: url("/shrines/miku/mikucursor.gif");
}
.mikutopnav {
	border-style: solid;
	border-color: blue;
	border-color: rgba(75, 209, 138, 1);
	background-color: blue;
	background-color: rgba(172, 253, 210, 1);
	border-radius: 50px 50px 50px 50px;
	overflow: hidden;
}

.mikutopnav a {
	float: left;
	color: #061630;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.mikutopnav a:hover {
	transform:rotate(7deg);
	color:white;
}

.mikublue{
	text-align:left;
	background-color:#acfdd2;
	border-color:#4bd18a;
	border-style:solid;
}

.mikublue a{
	color:#c9118c;
	font-size:13px;
}

/*--shiny page-----------------------------*/

.shinygrid {
    display: grid;
    gap: 10px;
	grid-row-gap:10px;
	grid-area: 2 / 1 / 5 / 5;
	margin-bottom:20px;
}

.shinybox{
	max-width: 190px;
	display:inline-block;
}

.shinybox img{
	width:190px;
	height:190px;
}

.row1{
	grid-row:1;
}
.row2{
	grid-row:2;
}
.row3{
	grid-row:3;
}
.row4{
	grid-row:4;
}
.row5{
	grid-row:5;
}
.row6{
	grid-row:6;
}
.row7{
	grid-row:7;
}
.row8{
	grid-row:8;
}
.row9{
	grid-row:9;
}
.row10{
	grid-row:10;
}
.row11{
	grid-row:11;
}
.row12{
	grid-row:12;
}
.row13{
	grid-row:13;
}
.row14{
	grid-row:14;
}
.row15{
	grid-row:15;
}
.row16{
	grid-row:16;
}
.row17{
	grid-row:17;
}
.row18{
	grid-row:18;
}
.row19{
	grid-row:19;
}
.row20{
	grid-row:20;
}
.row21{
	grid-row:21;
}
.row22{
	grid-row:22;
}
.row23{
	grid-row:23;
}
.row24{
	grid-row:24;
}
.row25{
	grid-row:25;
}

mark {
	background-color: white;
	color: black;
}

.method {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shinybox:hover .method {
	visibility: visible;
	opacity: 1;
}


.methoddesc {
	transition: .2s;
	transform: translateY(1em);
}

.shinybox:hover .methoddesc {
	transform: translateY(0);
}
/*sitemap-------------------------------------*/

.details {
	font-size: 15px;
	text-align: left;
}

.collapsible {
	padding: 18px;
	width: 100%;
	text-align: left;
	outline: none;
	margin-bottom:20px;
}

/*graphic page----------------------------------*/
.blonkies{
	margin-left:15px;
}

.88x31s{
	margin-left:31px;
}

.gifbg {
	background-image: url("/rainbowbg.png");
	background-attachment:scroll;
}

/*-------------------*/

button:focus{
border-color:white;
border-style:solid;
}

.banner {
	margin-top: 0px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
	width: 95%;
}

.banner2 {
	margin-top: 0px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
	z-index: 2;
}

.banner3 {
	margin-top: 0px;
	position: relative;
	display: block;
	float: right;
	z-index: 3;
	overflow: auto;
}

.banner4 {
	margin-top: 0px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
	z-index: -2;
}




.tvbg{
  background-image:url('code.gif');
}


.ddrbg{
  background-image:url('/click/ddr/pinkbg.jpg');
}




.kurobg {
	background-image: url('click/kuro/ornate.png');
	font-family: 'Quattrocento', serif;
}

.evilbg {
  background-image: url('click/redskulls.jpg');
}


.hallowbg{
  background-image: url('click/halloween/halloweenbg2.png');
}

#borderimg {
	border-image: url(/click/kuro/border.gif) 40 stretch;
}

blockquote{
  border-left-style: solid;
	border-left-color: purple;
	border-left-color: rgba(255, 132, 255, 1);
}



/
.listing {
	margin-left: 20px;
}


.gif {
	margin-left: 110px;
	position: relative;
	top: 10px;
	margin-bottom: -10px;
}



.text {
	height: 300px;
}



.center2 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:95%;
}

.center3 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 25%
}

.sprite {
	margin: 0;
	padding: 0;
}

.column2 {
	position: relative;
	margin-bottom: 10px;
	float: left;
	width: 33.333333%;
}

.button {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
}




/*top navigation---------------------------------------*/



.topnavB {
	border-style: solid;
	border-color: black;
	;
	background-color: grey;
	background-color: rgba(64, 66, 74, 0.75);
	overflow: hidden;
}

.topnavB a {
	float: left;
	color: #99a1bf;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnavB a:hover {
	background-color: blue;
	background-color: rgba(153, 161, 191, 1);
	color: white;
}

.topnavC {
	border-style: solid;
	border-color: red;
	border-color: rgba(117, 8, 0, 1);
	background-color: red;
	background-color: rgba(117, 8, 0, 0.75);
	overflow: hidden;
}

.topnavC a {
	float: left;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnavC a:hover {
	background-color: red;
	background-color: rgba(117, 8, 0, 1);
	color: black;
}

.topnavD {
	border-style: solid;
	border-color: white;
	border-color: #E9EAEF;
	background-color: green;
	background-color:RGBA(106, 61, 175, 0.75);
	overflow: hidden;
}

.topnavD a {
	float: left;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnavD a:hover {
	background-color: green;
	background-color:RGBA(106, 61, 175, 1);;
	color: white;
}

.topnavE {
	border-style: solid;
	border-width:10px;
	border-radius:50px;
	border-color: rgb(0, 188, 208);
	background-color: blue;
	background-color:rgba(0, 188, 208, 0.75);
	overflow: hidden;
}

.topnavE a {
	float: left;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnavE a:hover {
	background-color: blue;
	background-color:rgba(0, 188, 208, 1);
	color: white;
}









/*snaaaaaaaaaaaaaaake--------------------------------------------------------------*/

.board {
	width: 399px;
	background-color: rgba(255, 132, 255, 0.75);
	border-style: solid;
	border-color: rgb(255, 132, 255);
	position: relative;
	margin-left: 0;
	margin-top: 0;
}



#buttons {
	float: right;
	width: 50%;
	text-align: right;
	padding-top: 10px;
}

#board {
	height: 399px;
	border-bottom: 0px;
}

#apple {
	position: absolute;
	background-color: black;
	height: 7px;
	width: 7px;
	overflow: hidden;
}

.snake {
	position: absolute;
	top: 200px;
	left: 200px;
	background-color: rgba(132, 255, 132, 1);
	height: 7px;
	width: 7px;
	overflow: hidden;
}

.snake2 {
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: rgba(132, 255, 132, 1);
	height: 7px;
	width: 7px;
	overflow: hidden;
}

#score {
	height: 50px;
	margin-top: 0px;
}

#cscore {
	color: white;
	padding-left: 10px;
	float: left;
	width: 25%;
	font-size: xx-large;
}

#notice {
	position: absolute;
	top: 1em;
	left: 1em;
	right: 1em;
	text-align: center;
	font-size: 150%;
}

#i2 {
	position: absolute;
	bottom: 1em;
	left: 1em;
	right: 1em;
	text-align: center;
	font-size: 95%;
}
/*--------------warning*/
.hidden { 
    display: none !important;
}
.content-warning {
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 
    if your `body` element has padding, adjust this!    
    make sure there's none of the page behind visible
    */
    margin-top: 0px;
    margin-left: 0px;
    
/* 
Begin style properties 
*/
    background-image: url('bg.png');
    background-color: blue;
}

.content-warning-evil{
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 
    if your `body` element has padding, adjust this!    
    make sure there's none of the page behind visible
    */
    margin-top: 0px;
    margin-left: 0px;
    
/* 
Begin style properties 
*/
    background-image: url('doom.png');
    background-color: blue;
}

.warning-inner {
	border-style: solid;
	font-family: comic;
	border-color: blue;
	border-color: rgba(41, 214, 255, 1);
	background-color: blue;
	background-color: rgba(41, 214, 255, 0.75);
    font-size: 20px;
 width: 509px;
}

.warning-inner-evil {
	border-style: solid;
	font-family: comic;
	border-color: orange;
	border-color: rgba(255, 198, 107, 1);
	background-color: orange;
	background-color: rgba(255, 198, 107, 0.75);
    font-size: 20px;
 width: 509px;
}


/* 
End style properties 
*/


 


/*----------transmasc ring---------------*/
#tmring{
background:#E3C6FF url('https://transmascring.netlify.app/tbg.png'); 
border:2px solid transparent;
border-image: linear-gradient(to bottom right,  rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%);
border-image-slice: 1;
text-align:center;
}



#tmri a{
font-family:sans-serif;
font-weight:bold;
color:#8a2cff;
text-decoration: underline dotted;
text-shadow:none;
transition:.1s;
display:block;
}

#tmri a:hover{  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:1.5px;
  transition:.1s;
text-shadow:none;}

#tmri p{font-family:sans-serif;
margin:0;
color:#000;
text-shadow: none;
text-decoration:none;        
}