* { box-sizing: border-box;
	margin: 0; 
}

body{ font-family: 'Cordata'; 
	line-height: 1.4em;
	position: relative;
	margin: auto;
	background: gray url('38_1920_1080.png');
	background-size: 100%, auto;
}
#wrapper{ max-width: 60vw;
	margin: 3vh auto;
	margin-left: 35vw;
	background-color: white;
	border: 10px solid;
	border-image: url('border-lacehearts.png') 7 round;
	background-clip: padding-box;
	min-height: 93vh;
	overflow: scroll;
}
#content{ display: flex; 
	flex-direction: row;	
}

header{ width: 100%;
	border-bottom: 15px solid;
	border-image: url('border_lacebnuy.png') 13 round;
	background-clip: padding-box;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow: hidden;
}
header > img{ display: block;
	max-width: 100%; 
}
footer{ text-align: center; 
	font-size: 85%;
	margin: 1vh;
}

nav{ width: 25%;
	padding: 20px;
	padding-right: 0; 
}
nav ul{ list-style-type: none; 
	padding-left: 0; 
}
a{ text-decoration: none; 
	color: inherit;
}
a:hover{ text-decoration: underline dotted rgba(223,7,23,1);
	color: rgba(223,7,23,1); 
	cursor: pointer;
}

main{ width: 85%;
	max-height: 75vh;
	text-align: justify;
	overflow: auto;
	padding: 20px 20px 0 20px;
    }
main > div{ margin: 1em auto; }
main > div:first-child{ margin: 0 auto; }

h2{ font-size: 1.3em; }
h3{ font-size: 1.17em; margin-top: 0.5em;}
p img{ display: block; }

.divider{ text-align: center; margin: 1em auto; }
.fancy{ color: rgba(223,7,23,1);
	text-decoration: underline dotted rgba(223,7,23,1); 
    }
.gallery{ display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 1em;
	margin: 1em auto;
    }

.galleryItem {
    text-align: center;
    margin: 0.2em;
    }

#charas .gallery img{ height: 130px; }
 
/* credit to solielios (ig) */
.whiskers{
    -webkit-mask-image: url(https://0707o.neocities.org/images/misc/mask.png);
    -webkit-mask-size: 105%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center -12px;
  }   

.gameplay{
    width: 45%;
    }

.floatie{ position: absolute; 
}
#plushie{ width: 140px; 
	position: absolute;
	z-index: 5;
	bottom: -2vh;
	left: 25vw;
}
#ksnisInt, #ksnis{ font-family: 'Kalina';
	text-align: center;
	font-size: 1.7em;
	line-height: 1.5em;
	filter: drop-shadow(2px 1px 0.5px white) drop-shadow(-2px -1px 0.5px white);
	position: absolute;
	z-index: -1;
	transform: rotate(-6deg);
	top: 10vh;
	left: 12vw;
}
#ksnisInt{ z-index: 0;
	opacity: 0;
	cursor: default;
}

/* photo floaties */
.photo{ filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5)); }
#photoFrame{ z-index: 1; 
	position: absolute;
}
.photoPic{ max-width: 167px;
	max-height: 173px;
	position: absolute;
	top: 12px;
	left: 14px;
}

#photo1{ z-index: -2; 
	transform: rotate(9deg);
	position: absolute;
	top: 40vh;
	left: 5.5vw;
}
#photo2{ z-index: -3; 
	transform: rotate(-9deg);
	position: absolute;
	top: 53vh;
	left: 14.5vw;
}

/* RESPONSIVE */
@media only screen and (max-width: 800px) {
	#wrapper{ margin-left: auto; 
		max-width: 90vw;
		min-height: auto;
	}
	#content{ flex-direction: column; }
	nav, main{ padding: 10px; 
		width: 100%;
	}
	nav{ margin-bottom: 0; }
	nav ul{ display: flex;
		flex-flow: row wrap;
		justify-content: center;
		gap: 0.75em;
		line-height: 1em;
	}
	a{ text-decoration: underline dotted rgba(223,7,23,1);
		cursor: pointer;
	}
	nav a{ text-decoration: underline dotted black;
		cursor: pointer;
	}
	nav > img{ max-height: 100px; }
	#plushie{ width: 100px; 
		bottom: -4vh;
		left: 74vw; }
	#ksnisInt{ display: none; }
}

@media only screen and (min-width: 1500px) {
	#plushie{ transform: scale(1.7); 
		left: 28vw;
	}
	#ksnisInt, #ksnis{ transform: rotate(-6deg) scale(1.5); }
	#photo1{ transform: rotate(9deg) scale(1.4); }
	#photo2{ transform: rotate(-9deg) scale(1.4); }
}