* {
	box-sizing: border-box;
  	scrollbar-color: #F23A74 #FFF;
  	scrollbar-width: thin;
  }

body, html {
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
}

img {
	max-width: 100%;
}

body {
	background-image:url(img/bg.png);
	background-repeat: repeat;
	background-attachment: fixed;
	font: 1em Arima;
}

a {
	color: #FF7AA5;
	text-decoration: none;
}

a:hover {
	color: #FBB9C1;
}

#container {
	display: grid;
	grid-template-areas:
		"header header"
		"main nav"
		"footer footer";
	grid-template-columns: 70% 25%;
	width: 75%;
	gap: 0 5%;
	margin-left: 12.5%;
}

header {
	grid-area: header;
}

header img {
	max-width: 85%;
	border-bottom: 24px solid transparent;
	border-left: 24px solid transparent;
    border-image: url(img/lace.png) 34 round;
}

main {
	display: flex;
	flex-flow: column nowrap;
	grid-area: main;
	align-items: center;
}

main section {
	margin: 3% 0;
	padding: 2%;
	width: 100%;
	border: 26px solid transparent;
    border-image: url(img/lace.png) 34 round;
	/* https://solaria.neocities.org/guides/borderimage/ */
	background-color: #FFF5F6;
	background-clip: padding-box;
	color: #8B0B34;
}

main > img {
	max-width: 100%;
	margin: 3% 0;
}

h1 {
	font: 2.75em 'Grey Qo';
	margin-top: 0;
	padding-right: 0.5em;
	font-weight: 900;
	color: #F23A74;
	text-align: right;
	border-bottom: 2px dashed #F23A74;
}

h2 {
	color: #F23A74;
	font: 2em 'Damion';
	margin: 0;
}

h3 {
	text-align: center;
	margin: 0;
	color: #F23A74;
	font: 2em Damion;
}

.navBox {
	margin-top: 10%;
	background-clip: padding-box;
	background-color: #FFF;
	border-bottom: 26px solid transparent;
    border-image: url(img/lace.png) 34 round;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
}

nav {
	grid-area: nav;
	text-align: center;
}

nav h2 {
	text-align: center;
	border-bottom: 1px dotted #FBBCC4;
	background-color: #FBBDC5;
	margin: 0;
	color: #FFF;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    padding: .5em;
}

.navBox ul {
	width: 80%;
	margin-left: 10%;
	padding-left: 0;
	text-align: left;
	list-style-type: none;
}

.navBox ul li {
	background-image: url(img/heartbullet.png);
	background-position: center left;
	padding-left: calc(20px + 5%);
	background-repeat: no-repeat;
	margin: 2% 0;
}

.navBox a {
	display: inline-block;
	text-align: left;
}

footer {
	background-color: #FFF;
	padding: 1%;
	font-size: 0.75em;
	grid-area: footer;
	margin: 5% 0;
	text-align: center;
	color: #8B0B34;
	border: 2px dashed #FBBDC5;
}

#eventDisplay, #visitorDisplay {
	font-size: 1em;
	font-family: monospace;
}

#eventDisplay::before, #visitorDisplay::before {
	content: "> ";
}


/* About Page */
#bio {
	display: grid;
	grid-template-columns: 30% 65%;
	gap: 3% 5%;
}

#bio > div {
	padding-bottom: 5%;
}

#bioGrid {
	display: grid;
	grid-template-columns: 33% 63%;
	gap: 0.75em 4%;
	line-height: 1em;
}

#bioGrid div {
	align-content: center;
}

#bioGrid div:nth-child(odd) {
	color: #F56AAF;
}

#interests {
	display: grid;
	grid-template-columns: repeat(3, 33%);
	gap: 2%;
}

#interests ul {
	padding-left: 4%;
	margin-top: 2%;
}

#stampCollection {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

#stampCollection a, #blinkieCollection a {
	height: 56px;
	width: 99px;
	margin: 0.25em;
}

#stampCollection > img, #blinkieCollection  > img {
	margin: 0.25em;
}

#blinkieCollection {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

#blinkieCollection img, #blinkieCollection a {
	width: 150px;
	height: 20px;
}

/* Guestbook */
.comment {
	border: 1px dashed #FBBDC5;
	text-align: left;
	margin: 3%;
	padding: 2%;
	background-color: #FFF;
}

.comment h3 {
	text-align: left;
	font-size: 1.5em;
}

.comment small {
	display: block;
	width: 100%;
	text-align: right;
}

/* Resources */
.resourceGrid {
	display: grid;
	grid-template-columns: 33% 67%;
	border: 1px solid #FBBDC5;
}

.resourceGrid div {
	border: 1px solid #FBBDC5;
	padding: 2%;
	align-content: center;
}


/* Make a Website */
details {
	margin: 2%;
}

summary {
	font-size: 1.25em;
	color: #F23A74;
}


/* Drawbox */
#gallery {
	display: flex;
	flex-flow: row wrap;
	gap: 2%;
}

#gallery > div {
	width: 32%;
}


/* Neighborhood */
#myLink {
    text-align: center;
}

#myLink textarea {
    width: 88px;
}


/* Toybox */
#togglenav, .buttons {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

#togglenav a, .buttons button {
	margin: 1%;
	padding: 2%;
	display: inline-block;
	background-color: #FBBDC5;
	color: #FFF;
	font: 1.25em Arima;
	border-radius: 1em;
	text-align: center;
	border: none;
	font-weight: 700;
	border: 5px dotted #F23A74;
	background-clip: padding-box;
}

#togglenav a:hover, .buttons button:hover {
	background-color: #FFF;
	color: #FBBDC5;
}

#togglenav a {
	width: 23%;
}

.buttons button {
	width: 33%;
	font-size: 1em;
}

.bigLink {
	max-width: 20%;
}


/* Tarot Collection */
.tarotBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.tarotBox div {
	width: 48%;
	padding: 4%;
	border: 3px dashed #FBBDC5;
	background-color: #FFF;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	text-align: center;
	margin-bottom: 4%;
}

.tarotBox div img {
	max-height: 40vh;
}

.tarotBox div p {
	font-size: 0.9em;
	padding: 0;
	margin: 0;
}

.feed-title, .ljuser {
	display: none;
}

/* LARP Page */
.larpCharacter {
	display: grid;
	grid-template-columns: 30% 70%;
	align-items: center;
}

.larpCharacter img {
	max-width: 100%;
}

.larpCharacter > div:nth-child(2) {
	padding: 4%;
}

.tabbed {
	overflow-x: hidden; /* so we could easily hide the radio inputs */
}

.tabbed [type="radio"] {
	/* hiding the inputs */
	display: none;
}

.tabs {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	list-style: none;
	padding: 0;
	justify-content: space-between;
}

.tab {
	width: 30%;
	text-align: center;
	color: #F23A74;
}

ul.tabs {
	background-color: #FFF;
	border-bottom: 2px dashed #F23A74;
}

.tab:last-child {
	width: 40%;
}

.tab > label {
	display: block;
	padding: 4%;
}

.tabContainer {
	display: flex;
}

.tabContent {
	visibility: hidden;
 	margin-right: -100%;
	width: 100%;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
	background-color: #FFF5F6;
	height: 100%;
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabContainer .tabContent:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tabContainer .tabContent:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked ~ .tabContainer .tabContent:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked ~ .tabContainer .tabContent:nth-of-type(4),
.tabbed [type="radio"]:nth-of-type(5):checked ~ .tabContainer .tabContent:nth-of-type(5) {
	visibility: visible;
	display: flex;
	align-items: top;
	flex-flow: column nowrap;
}

/* Generators  */
.generatorsList ul li {
	text-transform: capitalize;
}
#result {
	text-align: center;
	color: #F23A74;
	font-size: 1.5em;
}

#subResult {
	text-align: center;
	color: #F23A74;
	font-size: 1.2em;
}

#generateButton {
	text-align: center;
}

#generate {
	font-size: 1em;
	padding: 0.25em 0.5em;
}

#baseBox {
	display: grid;
	grid-template-columns: 33% 64%;
	font-size: 1.25em;
	width: 80%;
	margin-left: 10%;
}

#baseBox div:nth-child(odd) {
	color: #F23A74;
	font-weight: 700;
}

#fandomGens h3 {
	font-size: 1.5em;
	margin-top: 0.75em;
	text-transform: capitalize;
}

.genURL {
	font-size: 1.25em;
}

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

/* Pokeymanz Generator */
.pkmnDiv {
	display: grid;
	grid-template-areas: "pkmnSprite pkmnInfo"
						 "pkmnSprite movesDiv";
}

.pkmnSprite {
	grid-area: pkmnSprite;
	padding: 1em;
}

.pkmnInfo {
	grid-area: pkmnInfo;
	display: flex;
	flex-flow: column nowrap;
	text-align: center;;
}

.pkmnTypes {
	display: flex;
	flex-flow: row nowrap;
}

.type {
	flex-grow: 1;
	padding: 0.25em;
}

.grass {
	background-color: #78C850;
	color: #FFF;
}

.poison {
	background-color: #A040A0;
	color: #FFF;
}

.normal {
	background-color: #A8A878;
	color: #FFF;
}

.fire {
	background-color: #F08030;
}

.water {
	background-color: #6890F0;
}

.electric {
	background-color: #F8D030;
	color: #000;
}

.ice {
	background-color: #98D8D8;
	color: #000;
}

.fighting {
	background-color: #C03028;
	color: #FFF;
}

.ground {
	background-color: #E0C068;
}

.flying {
	background-color: #A68FEC;
}

.psychic {
	background-color: #F85888;
	color: #FFF;
}

.bug {
	background-color: #A8B820;
}

.rock {
	background-color: #B8A038;
	color: #FFF;
}

.ghost {
	background-color: #705898;
	color: #FFF;
}

.dark {
	background-color: #705848;
	color: #FFF;
}

.dragon {
	background-color: #7038F8;
	color: #FFF;
}

.steel {
	background-color: #B8B8D0;
	color: #FFF;
}

.fairy {
	background-color: #F0B6BC;
	color: #000;
}

.abilityDiv {
	width: 100%;
	background-color: #FEF4EB;
	color: #B03B6E;
	border-bottom: 2px solid #B03B6E;
}

.movesDiv {
	grid-area: movesDiv;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}

.oneMove {
	flex-grow: 1;
	flex-basis: 48%;
	margin: 1%;
	color: #000;
	display: flex;
	flex-flow: column nowrap;
	text-align: center;
}

.moveDesc {
	padding: 0 1em 0 1em;
	font-size: 0.9em;
	color: #292929;
}

.moveButtonsHouse {
	width: 100%;
	margin: 0.5em;
}

.moveButton {
	align-self: center;
}

/* Picrew Zone */
#picrewZone {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#picrewZone div {
	width: 30%;
}

#picrewZone img {
	max-width: 90%;
}

#picrewZone a {
	color: #F23A74;
	font-size: 1.2em;
}

#picrewZone p {
	margin: 0;
}

#picrewNav {
	width: 15%;
	max-height: 80%;
	overflow: auto;
	position: fixed;
	top: 0;
	margin-left: -6%;
	align-self: start;
	z-index: 10;
	background-color: #FFF;
	padding: 1%;
	opacity: 0.5;
	border-left: 5px solid #F23A74;
	border-right: 5px solid #F23A74;
#}

#picrewNav:hover, #picrewNav:active {
	opacity: 1;
}

#picrewNav h1 {
	text-align: center;
}

#picrewNav h2 {
	font-size: 1.5em;
}

#picrewNav ul {
	list-style-type: none;
}

#picrewZone div {
	text-align: center;
	border: 2px dotted #F23A74;
	background-color: #FFF;
	margin: 0.5em;
	padding: 1%;
}

.hide {
	display: none;
}

.extraInfo {
	font-size: 0.75em;
}

/* Mobile Responsiveness */
@media screen and (width < 980px) {
	#container {
		width: 90%;
		margin-left: 5%;
		grid-template-areas:
			"header"
			"nav"
			"main"
			"footer";
		grid-template-columns: 100%;
	}

	header img {
		max-width: 100%;
		border-left: none;
	}

	nav {
		display: flex;
		flex-flow: row nowrap;
	}

	nav img {
		display: none;
	}

	.navBox {
		width: 33%;
	}

	.navBox h2 {
		font-size: 1.1em;
	}

	.navBox ul {
		display: none;
		width: 100%;
	}

	.navBox h2:hover + ul, .navBox h2:active + ul, .navBox ul:hover {
		display: block;
		width: 33%;
		z-index: 5;
		position: absolute;
		background-color: #FFF;
		margin: 0;
	}

	/* About Page */
	#bio {
		display: flex;
		flex-flow: column nowrap;
	}

	#bio > div:nth-child(1) {
		order: 2;
	}

	#bio > div:nth-child(2) {
		order: 1;
	}

	#interests {
		display: flex;
		flex-flow: column nowrap;
	}

	#interests div {
		border-bottom: 1px dashed #F23A74;
		margin-bottom: 5%;
	}

	/* Tarot */
	.tarotBox div {
		width: 100%;
	}

	/* Picrew */
	#picrewNav {
		width: 25%;
	}

	#filterContainer ul {
		padding-left: 1em;
	}
}