* {
	cursor: url(/assets/images/cursors/devilcursor.png), auto
}

:root {
	--bordercolor: #60667b;
	--textcolor: #60667b;
	--backgroundcolor: #60667b
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	color: var(--textcolor);
	line-height: 1
}

h1 {
	margin: 3px;
	padding: 0
}

h2 {
	margin: 3px;
	padding: 0;
	font-size: 12px
}

h3 {
	margin: 3px;
	padding: 0
}

p {
	margin: 3px
}

a {
	cursor: url(/assets/images/cursors/glovepointer.png), pointer;
	color: var(--textcolor)
}

a:hover {
	color: white
}
/*!
 ██████  ██████  ██ ██████  
██       ██   ██ ██ ██   ██ 
██   ███ ██████  ██ ██   ██ 
██    ██ ██   ██ ██ ██   ██ 
 ██████  ██   ██ ██ ██████             
*/
.container {
	grid-template-columns: 23% 77%;
	grid-template-rows: 10% 14% 69% 7%;
	grid-template-areas: "deco header""outgoing_links top_box""webrings location_container""location_links location_links";
	max-width: 700px;
	height: 630px;
	margin: 0 auto;
	display: grid;
	gap: 0;
	grid-auto-flow: row
}

.deco {
	grid-area: deco;
	display: flex;
	align-items: center;
	justify-content: right
}

header {
	grid-area: header;
	display: flex;
	align-items: center;
	position: relative
}

.outgoing_links {
	grid-area: outgoing_links;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.top_box {
	grid-area: top_box;
	border: 1px solid var(--bordercolor);
	display: flex;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background: white
}

.top_box div {
	align-self: center
}

.webrings {
	grid-area: webrings;
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-color: #60667b
}

.location_container {
	grid-area: location_container;
	position: relative
}

.location_links {
	grid-area: location_links
}
/*! 
 ██████  ██████  ██ ██████      ███████ ████████ ██    ██ ██      ██ ███    ██  ██████  
██       ██   ██ ██ ██   ██     ██         ██     ██  ██  ██      ██ ████   ██ ██       
██   ███ ██████  ██ ██   ██     ███████    ██      ████   ██      ██ ██ ██  ██ ██   ███ 
██    ██ ██   ██ ██ ██   ██          ██    ██       ██    ██      ██ ██  ██ ██ ██    ██ 
 ██████  ██   ██ ██ ██████      ███████    ██       ██    ███████ ██ ██   ████  ██████  
*/
.header_title {
	height: 100%
}

#main_header {
	font-weight: 800;
	display: flex;
	align-items: center;
	height: 50px
}

#deco_image {
	animation: tilt .5s infinite;
	image-rendering: pixelated;
	height: 40px;
	margin-right: 6px
}

.outgoing_links div {
	background: var(--backgroundcolor);
	color: #fff;
	padding: 3px;
	font-weight: bold;
	text-align: right;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px
}

.outgoing_links div a {
	color: white
}

.outgoing_links div a:hover {
	color: var(--backgroundcolor)
}

.webrings_outer_div {
	margin: 5px;
	filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white)
}

.webrings a:hover {
	cursor: url(/assets/images/cursors/glovepointer.png), pointer
}

.location_desc {
	margin-left: 10px;
	margin-right: 10px;
	border-right: dotted 1px var(--bordercolor);
	border-left: dotted 1px var(--bordercolor);
	display: flex;
	height: 100%;
	background: white
}

.enter_button {
	background: var(--backgroundcolor);
	color: white;
	padding: 6px;
	margin: 6px;
	font-weight: bold;
	text-decoration: none;
	outline: dotted 1px var(--backgroundcolor);
	border: 0
}

.enter_button:hover {
	background: white;
	outline: dotted 1px white
}

.location_text_box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 60%
}

.location_image {
	height: 300px;
	position: absolute;
	bottom: 0;
	align-self: center
}

.location_text_box a {
	align-self: center
}

.location_deco_image {
	width: 40%;
	background-size: cover;
	background-position: center
}

.location_link_container {
	display: flex;
	justify-content: space-between
}

.location_link {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background: var(--backgroundcolor);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40%;
	height: 20px;
	cursor: url(/assets/images/cursors/glovepointer.png), pointer
}

.location_link:hover {
	cursor: url(/assets/images/cursors/glovepointer.png), pointer
}

.location_link p {
	color: white;
	font-weight: bold;
	text-decoration: underline;
	cursor: url(/assets/images/cursors/glovepointer.png), pointer
}

.link_bounce {
	animation: bounce linear .2s
}

.sitemap_link {
	position: absolute;
	right: 11px;
	bottom: 0;
	height: 50px;
	z-index: 2
}

.phone:hover {
	cursor: url(/assets/images/cursors/glovepointer.png), pointer
}
/*! 
███████ ██ ███████ ██ ███    ██  ██████  
██      ██    ███  ██ ████   ██ ██       
███████ ██   ███   ██ ██ ██  ██ ██   ███ 
     ██ ██  ███    ██ ██  ██ ██ ██    ██ 
███████ ██ ███████ ██ ██   ████  ██████  
*/
@media only screen and (max-width:599px) {
	body .container {
		grid-template-columns: 15% 85%;
		grid-template-rows: 9% 4% 15% 55% 7% 10%;
		grid-template-areas: "deco header""outgoing_links outgoing_links""top_box top_box""location_container location_container""location_links location_links""webrings webrings"
	}

	body .outgoing_links {
		flex-direction: row;
		justify-content: space-evenly
	}

	body .top_box {
		border-left: 0;
		border-right: 0;
		border-radius: 0
	}

	body .webrings {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 3px;
		height: fit-content
	}

	body #main_header {
		height: 40px
	}

	body .outgoing_links div {
		justify-content: center;
		display: flex;
		align-items: center;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 0;
		width: 100%
	}

	body .marquee {
		border-left: 0;
		border-right: 0;
		border-radius: 0
	}

	body .outgoing_links div a {
		font-weight: 700
	}

	body .webrings div {
		margin: 3px
	}

	body .location_text_box {
		width: 75%
	}

	body .location_text_box img {
		height: 160px
	}

	body .location_desc div:first-of-type {
		width: 25%
	}

	body #worshipingvolcanoes_button {
		width: 40%
	}

	body .phone {
		display: none
	}

	body .flowers {
		display: none
	}

	body .outgoing_links div img {
		display: none
	}

	body #pokemon_deco {
		z-index: -1
	}
}
/*!
 █████  ███    ██ ██ ███    ███  █████  ████████ ██  ██████  ███    ██ ███████ 
██   ██ ████   ██ ██ ████  ████ ██   ██    ██    ██ ██    ██ ████   ██ ██      
███████ ██ ██  ██ ██ ██ ████ ██ ███████    ██    ██ ██    ██ ██ ██  ██ ███████ 
██   ██ ██  ██ ██ ██ ██  ██  ██ ██   ██    ██    ██ ██    ██ ██  ██ ██      ██ 
██   ██ ██   ████ ██ ██      ██ ██   ██    ██    ██  ██████  ██   ████ ███████ 
*/
@keyframes fade_out {
	from {
		opacity: 1
	}

	to {
		opacity: 0
	}
}

@keyframes fade_in {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}
/*!
██       ██████   █████  ██████  ███████ ██████  
██      ██    ██ ██   ██ ██   ██ ██      ██   ██ 
██      ██    ██ ███████ ██   ██ █████   ██████  
██      ██    ██ ██   ██ ██   ██ ██      ██   ██ 
███████  ██████  ██   ██ ██████  ███████ ██   ██ 
*/
#loader {
	align-items: center;
	background: white;
	display: flex;
	height: 100vh;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999
}

.loader_image {
	position: absolute;
	top: 10px
}

.loader_image:hover {
	cursor: url(/assets/images/cursors/glovepointer.png), pointer
}

.fade_out {
	animation-name: fade_out;
	animation-duration: 1s
}

.fade_in {
	animation-name: fade_in;
	animation-duration: .5s
}
/*!
███    ███  █████  ██████   ██████  ██    ██ ███████ ███████ 
████  ████ ██   ██ ██   ██ ██    ██ ██    ██ ██      ██      
██ ████ ██ ███████ ██████  ██    ██ ██    ██ █████   █████   
██  ██  ██ ██   ██ ██   ██ ██ ▄▄ ██ ██    ██ ██      ██      
██      ██ ██   ██ ██   ██  ██████   ██████  ███████ ███████ 
                               ▀▀                            
*/
.marquee {
	min-height: 14px;
	overflow-x: hidden;
	font-weight: bold;
	border: 1px solid var(--bordercolor);
	position: relative;
	overflow-x: hidden;
	font-weight: bold;
	border-top-right-radius: 10px
}

.track {
	position: absolute;
	white-space: nowrap;
	will-change: transform;
	animation: marquee 32s linear infinite
}

@keyframes marquee {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}
/*!
 █████  ███    ██ ██ ███    ███  █████  ████████ ██  ██████  ███    ██ ███████ 
██   ██ ████   ██ ██ ████  ████ ██   ██    ██    ██ ██    ██ ████   ██ ██      
███████ ██ ██  ██ ██ ██ ████ ██ ███████    ██    ██ ██    ██ ██ ██  ██ ███████ 
██   ██ ██  ██ ██ ██ ██  ██  ██ ██   ██    ██    ██ ██    ██ ██  ██ ██      ██ 
██   ██ ██   ████ ██ ██      ██ ██   ██    ██    ██  ██████  ██   ████ ███████ 
*/
@keyframes bounce {
	0% {
		height: 20px
	}

	50% {
		height: 30px
	}

	100% {
		height: 25px
	}
}

@keyframes tilt {
	0% {
		transform: rotate(-2deg)
	}

	25% {
		transform: rotate(2deg)
	}

	50% {
		transform: rotate(-2deg)
	}

	75% {
		transform: rotate(2deg)
	}

	100% {
		transform: rotate(-2deg)
	}
}
/*!
██     ██ ███████ ██████  ██████  ██ ███    ██  ██████  ███████ 
██     ██ ██      ██   ██ ██   ██ ██ ████   ██ ██       ██      
██  █  ██ █████   ██████  ██████  ██ ██ ██  ██ ██   ███ ███████ 
██ ███ ██ ██      ██   ██ ██   ██ ██ ██  ██ ██ ██    ██      ██ 
 ███ ███  ███████ ██████  ██   ██ ██ ██   ████  ██████  ███████ 
*/
.ace {
	display: flex;
	align-items: center;
	width: 140px;
	justify-content: space-evenly
}

.ace p {
	margin: 0
}

.cookierun {
	display: flex;
	align-items: center;
	width: 140px;
	justify-content: space-evenly
}

.wiiring {
	width: 137px
}

.wiiring iframe {
	border: 0;
	width: 100%;
	height: 132px
}

#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;
	padding: 10px;
	text-align: center;
	font-size: 12px;
	width: 113px
}

#tmri {
	background: rgba(61, 45, 255, .5);
	padding: 2px;
	border: 1px solid #3d2dff
}

#tmri a {
	font-family: sans-serif;
	font-weight: 700;
	color: #3d2dff;
	text-decoration: underline dotted;
	text-shadow: none;
	transition: .1s
}

#tmri a:hover {
	background-image: linear-gradient(to left, violet, indigo, #00f, green, #ff0, orange, red);
	background-clip: text;
	-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
}