@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Fuzzy+Bubbles:wght@400;700&family=Gaegu&display=swap');

*, html{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	cursor: url(cursor-2.png), auto !important;
	scrollbar-color: #ee699c #fff;
	scrollbar-width: thin;
}

html{
	min-width: 100vw;
	min-height: 100vh;
}

body{
	background: url('../assets/bg.gif') repeat;
	font: normal 100%/160% 'Fuzzy Bubbles', sans-serif;
	color: #333;
	cursor: url(cursor-2.png), auto;
	overflow-x: hidden;
}

::selection {
	background: #ee699c;
	color: #fff;
}

::-moz-selection {
	background: #ee699c;
	color: #fff;
}

::-webkit-selection {
	background: #ee699c;
	color: #fff;
}

main{
	width: 60%;
	margin: 0 auto;
}

h1{
	font: normal 4.5em 'Gaegu', sans-serif;
	text-align: center;
	margin: 1em 0 0.5em;
	color: #ee699c;
	text-transform: lowercase;
	text-shadow: 2px 2px 0px #fff;
}

#footer{
	color: #e880a3;
	font: normal 180% 'Gaegu', sans-serif;
	text-align: center;
	margin: 2em 0;
	text-shadow: 2px 2px 0px #fff;
	clear: both;
}

#footer img{
	image-rendering: pixelated;
}

nav{
	position: fixed;
	right: 0;
	top: 0;
	margin-top: 2.5%;
	text-align: right;
	width: 15%;
}

nav ul{
	list-style: none;
}

nav ul li{
	margin: 1em 0;
	font: normal 130% 'Gaegu', sans-serif;
	text-transform: lowercase;
}

nav ul li a:link, nav ul li a:visited, docnav ul li a:link, docnav ul li a:visited{
	color: #fff;
	text-decoration: none;
	background: #ee699c;
	padding: 0.5em;
	display: block;
	border: solid 1px #ee699c;
}

nav ul li a.current{
	background: #ffcade;
	border: solid 1px #ffcade;
	color: #dc4f85;
}

nav ul li a:hover, nav ul li a:active, docnav ul li a:hover, docnav ul li a:active{
	background: #fff;
	color: #ee699c;
}

docnav{
	position: fixed;
	left: 0;
	top: 0;
	margin-top: 5%;
	text-align: left;
	width: 15%;
}

docnav ul{
	list-style: none;
}

docnav ul li{
	margin: 1em 0;
	font: normal 150% 'Gaegu', sans-serif;
	text-transform: lowercase;
}

.mobilenav{
	display: none;
}

.content{
	background: #fff;
	border: 1px solid #ee699c;
	padding: 1em;
}

strong{
	font-family: 'Fuzzy Bubbles', sans-serif;
	color: #ee699c;
}

em{
	color: #ee699c;
}

/** index styling **/

#index{
	padding-bottom: 3em;
}

#locker{
	position: absolute;
	top: 15%;
	left: 5%;
}

#locker img{
	width: 220px;
}

#locker img:hover{
	cursor: pointer;
}

#random-image{
	width: 35%;
	display: inline-block;
	text-align: center;
}

#random-image img{
	height: 350px;
}

#bio{
	float: right;
	width: 60%;
	display: inline-block;
	font-size: 115%;
	line-height: 160%;
}

#bio img{
	height: 30px;
	vertical-align: middle;
}

#bio img.modes{
	height: 25px;
}

#badges{
	clear: both;
	text-align: center;
	margin: 1em auto;
}

#badges img{
	height: 40px;
}

/** main styling **/

#mainheader{
	background-image: linear-gradient(to top, #f7ede3, #f4b3d2);
	height: 80px;
	width: 100%;
	text-align: center;
}

#mainheader img{
	height: 70px;
	margin: 5px 0;
}

.outfit{
	text-align: center;
	background: #fafafa;
	padding: 10px;
	border: 4px #ee91be dotted;
}

.outfit img{
	height: 280px;
}

#faves #weapons, #others #weapons{
	width: 70%;
  margin: 0 auto;
}

#weapons ul{
	margin: 1.5em 0 0;
	list-style-type: none;
	text-align: center;
}

#weapons ul li{
	display: inline-block;
}

#weapons ul li a:active img, #weapons ul li a:focus img, #weapons ul li a:hover img, #weapons ul li a:target img, .active, .favactive, .otheractive{
	background: #fcd2d9;
	border-bottom: none;
  	display: inline-block;
}

#weapons ul li a:active, #weapons ul li a:focus, #weapons ul li a:hover, #weapons ul li a:target{
	background: none;
}

.content #weapons img{
	height: 70px;
}

/** maps styling **/

h2{
	background: #ffe7f3 url('../assets/headerbg.gif');
	color: #ec4781;
	text-shadow: 2px 2px 0 #fff;
	text-align: center;
	text-transform: lowercase;
	font: normal 150% 'Fuzzy Bubbles', sans-serif;
	padding: 7px;
	clear: both;
	margin-top: 0.75em;
}

h2:first-child{
	margin-top: 0;
}

#maps .gallery{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#maps .gallery img{
	width: 45%;
	margin: 1em;
}

#maps .caption{
	text-align: center;
	margin-bottom: 1em;
}

#maps label{
	display: inline-block;
	width: 49%;
	font: normal 150% 'Gaegu', sans-serif;
	color: #ee699c;
}

#maps label:hover{
	cursor: default;
}

/** gallery styling **/

#fits .content, #art-gallery .content, #teams .content, #maps .content, #cosplay .content, #fests .content{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#fits .content label, #art-gallery .content label, #teams .content label, #maps .content label, #cosplay .content label, #fests .content label{
	display: inline-block;
	width: 50%;
	font: normal 180% 'Fuzzy Bubbles', sans-serif;
	background: #ee699c;
	color: #fff;
	text-align: center;
	text-transform: lowercase;
	padding: 10px;
}

#cosplay .content label{
	width: 25%;
}

#art-gallery .content label{
	font: normal 200%/115% 'Gaegu';
	text-transform: capitalize;
}

.radiobutton:checked + label, label:hover{
	background-color: #fff!important;
	color: #ee91be!important;
	cursor: pointer;
}

.option {
	order: 1;
	width: 100%;
	margin: 1em 0 0;
	display: none;
}

.radiobutton {
	display: none;
}

.radiobutton:checked + label + .option {
	display: initial;
}

.radiobutton:checked + .option {
	display: initial;
}

/** teams styling **/

.gallery{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#teams .gallery img{
	width: 45%;
	margin: 1em;
	height: 100%;
}

#teams h2{
	font: normal 180% 'Gaegu', sans-serif;
	text-transform: none;
}

#teams .column1{
	width: 50%; 
	display: inline-block;
}

#teams .column2{
	float: right; 
	width: 45%; 
	margin-top: 1em; 
	display: inline-block;
}

/** art styling **/

#art-gallery .gallery img{
	width: 30%;
	margin: 1%;
	height: fit-content;
}

#art-gallery .gallery img.small{
	width: 20%;
	margin: 1% 5%;
	height: fit-content;
}

/** docs styling **/
#docs h2, #stuff h2{
	font: normal 280%/50% 'Gaegu', sans-serif;
	color: #ee699c;
	text-align: center;
	text-transform: lowercase;
	padding: 0.5em 0;
	background: none;
	border-bottom: 5px dotted #ee699c;
	border-top: 5px dotted #ee699c;
	letter-spacing: 3px;
	background: url('docshead.jpg');
}

hr{
	border-top: none;
	border-bottom: 5px dotted #ee699c;
	display: block;
	margin: 2em auto 0;
	border-left: none;
  border-right: none;
}

#docs p{
	padding: 0.5em 0;
}

#docs p.first{
	padding-top: 1.5em;
}

#docs ul{
	list-style-type: none;
	margin: 0.5em;
}

#docs li{
	padding: 0.25em 0;
}

#docs li:before{
	content: '';
  display: inline-block;
  height: 25px;
  width: 25px;
  background-image: url('../assets/bullet.png');
  background-size: contain;
  background-repeat: no-repeat;
  padding-right: 20px;
  vertical-align: text-bottom;
}

ul#twocol{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

ul#twocol li{
	width: 50%;
}

a:link, a:visited{
	color: #ee699c;
	text-decoration: wavy underline 1px;
	 -webkit-text-decoration-line: underline wavy;
	-webkit-text-decoration-color: #ee699c;
	-webkit-text-decoration-thickness: 1px;
	text-decoration-style: wavy;

}

a:hover, a:active{
	background: #ee699c;
	color: #fff;
}

h3{
	font: normal 2.2em/0.4em 'Gaegu', sans-serif;
	text-transform: lowercase;
	color: #ef748b;
	margin: 0.5em 0;
	background: #ffecf4;
	text-shadow: 2px 2px 0 #fff;
}

#blurb p, #mainblurb p, #altblurb p, #faveblurb p, #othersblurb p{
	padding: 0.5em;
}

p.splashtag{
	padding: 1.5em 0 0.5em!important;
	text-align: center;
}

/** stuff styling **/

#stuff .grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.item{
	flex: 33.33%;
	max-width: 33.33%;
	height: 20em;
	overflow: hidden;
}

.item img{
	object-fit: scale-down;
	filter: var(--image-shadow);
	padding: 1em;
	max-width: 100%;
  height: 9em;
	}

.item img:hover{
	transform: scale(110%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.image{
	text-align: center;
}

.text{
	height: 10em;
  overflow: auto;
  background: var(--text-bg);
  padding: 5px;
  font-size: 90%;
}

#stuff .grid .item:nth-child(2n+1){
	background: url('splash-1.png') no-repeat center;
	background-size: cover;
	height: 100%;
}

#stuff .grid .item:nth-child(2n+1) strong, #stuff .grid .item:nth-child(2n+1) a:link, #stuff .grid .item:nth-child(2n+1) a:visited{
	color: #FFC0E8;
	text-shadow: 1px 1px 0 #ef748b;
}

#stuff .grid .item:nth-child(3n){
	background: url('splash-2.png') no-repeat center;
	background-size: cover;
	height: 100%;
}

#stuff .grid .item:nth-child(3n) strong, #stuff .grid .item:nth-child(3n) a:link, #stuff .grid .item:nth-child(3n) a:visited{
	color: #ef748b;
	text-shadow: none;
}

#stuff .grid .item:nth-child(2n+1) a:hover, #stuff .grid .item:nth-child(3n) a:hover{
	color: #fff;
}

map-caption{
	display: inline-block;
  width: 49.5%;

}

/* Responsive CSS for tablets and smartphones */
@media (max-width: 850px) {
	main {
		width: 90%;
		float: none;
		display: block;
		margin-top: 4em;
	}

.ff-container.ff-responsive, .ff-container.ff-responsive .ff-image, .ff-container.ff-responsive .ff-image img, .ff-container.ff-responsive .ff-canvas {
		width: 100%!important;
	}
	nav {
width: 100%;
    font-size: 90%;
    position: absolute;
	top: 32px;
	}
	docnav{
		display: none;
	}
	.mobilenav{
		display: block;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
	}
	nav ul li{
		margin: 0;
	}
	nav ul li a:link, nav ul li a:visited, docnav ul li a:link, docnav ul li a:visited {
  color: #ee699c;
  text-decoration: none;
  background: #fff;
  padding: 0.5em;
  display: block;
  border: none;
  text-align: center;
}

nav ul li a:hover, nav ul li a:active, docnav ul li a:hover, docnav ul li a:active {
  background: #ee699c;
  color: #fff;
}
	
	.navigationbutton button{
width: 100%;
    color: #fff;
    text-decoration: none;
    background: #ee699c;
	height: 52px;
    display: block;
    border: solid 1px #ee699c;
    font: normal 24px 'Gaegu', sans-serif;
    text-transform: lowercase;
}

.navigationbutton button:hover, .navigationbutton button:active, .navigationbutton button:focus, .close li a:hover, .close li a:hover, .close li a:active{
	background: #ffcade;
	border: solid 1px #ffcade;
	color: #dc4f85;
} 

#navigation{
	display: none;
	    border-bottom: 1px solid #ee699c;
}
	#locker {
		display: none;
	}
	#random-image, #bio {
		float: left;
		display: block;
	}
	#random-image{
		width: 40%;
	}
	#maps .gallery img, #teams .gallery img {
		width: 90%;
		margin: 0.5em auto;
	}
	#art-gallery .gallery img, #art-gallery .gallery img.small {
		width: 45%;
		margin: 2% auto;
		height: auto;
	}
	#cosplay .content label {
		width: 45%;
	}
	#fits .content label, #art-gallery .content label, #teams .content label, #maps .content label, #cosplay .content label, #fests .content label {
		width: 50%;
		font-size: 120%;
	}
	.item {
		flex: 50%;
		max-width: 50%;
		height: auto;
	}
	#faves #weapons, #others #weapons{
	width: 80%;
  margin: 0 auto;
}
h1{
	margin: 1em 0 0.5em;
}
#footer{
	padding-top: 2em;
}
}

@media (max-width: 600px) {
	main, #bio {
		width: 100%;
		padding: 0 2vw;
	}
	nav{
		top: 42px;
	}
	h1 {
		font-size: 3.2em;
		margin: 1.5em 0 0.5em;
	}
	h2 {
		font-size: 1.2em;
		padding: 0.5em;
	}
	#random-image img {
		width: auto;
		height: 350px;
	}
	#bio img, #bio img.modes {
		height: 20px;
	}
	#badges img {
		height: 25px;
	}
	#maps .gallery img, #teams .gallery img, #art-gallery .gallery img, #art-gallery .gallery img.small {
		width: 98%;
		margin: 0.5em auto;
		height: auto;
	}
	#cosplay .content label, #fits .content label, #art-gallery .content label, #teams .content label, #maps .content label, #fests .content label {
		width: 100%;
		font-size: 150%;
		padding: 7px;
	}
	.outfit img {
		height: 180px;
	}
	.content #weapons img {
		height: 46px;
	}
	.item {
		flex: 100%;
		max-width: 100%;
		height: auto;
	}
	.item img {
		height: 10em;
		padding: 0.5em;
	}
	.text {
		font-size: 85%;
		height: auto;
		max-height: 8em;
	}
	ul#twocol {
		flex-direction: column;
	}
	ul#twocol li {
		width: 100%;
	}
	#teams .column1, #teams .column2 {
		width: 100%; 
		display: block;
	}
	fest-title img.icon {
  height: 1.5em!important;
	}
	fest-title img.title {
  height: 2.5em!important;
	}
	#outfits-fits .mini-fit{
		width: 50%!important;
	}
	#random-image, #bio{
		float: none;
		display: block;
		margin: 0 auto;
	}

	#random-image{
		text-align: center;
    width: auto;
	}

	#faves #weapons, #others #weapons {
		width: 100%;
	margin: 0 auto;
	}
}