:root {
	--black: #000000;
	--red: #FF0F33;
	--d-red: #930020;
	--dd-red: #640614;
	--ddd-red: #3C0000;
	--ddd-red-rgb: 60,0,0;
	--l-gray: #B2ADAE;
	--gray: #665F60;
	--d-gray: #3B3637;
	--yellow: #FFFB00;
	
	--box-border: 4px var(--black) solid;
}

body {
	background-color: var(--ddd-red);
	width: calc(100vw - (100vw - 100%)); /* width = 100% view width minus scrollbar width */
	height: 100vh;
	margin: 0px;
	color: var(--red);
	font-size: 1.1rem;
	font-family: "Halogen", sans-serif;
}

h2 { font-weight: normal; }
h3 {
	margin-bottom: .25em;
	font-family: 'Ghoulish Fright', sans-serif;
	font-size: 1.4em; letter-spacing: 1px;
	color: var(--yellow);
}
p { margin: .35em 0; }

body a { font-family: 'Ghoulish Fright', sans-serif; letter-spacing: 1px; color: var(--yellow); }
body a:is(:hover,:focus-visible) { color: var(--l-gray); }

::selection { background: var(--yellow); color: var(--black); }
img {
	user-drag: none;
	-webkit-user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

ul { margin: 0px; list-style-type: '\002726'; }
li { padding-left: .5em; }
li::marker { color: var(--yellow); }

main {
	width: 100%; height: 100%;
	display: flex;
}
main > * > header {
	position: relative;
	font-family: 'Crimes Times Six', sans-serif;
	background:
		linear-gradient(rgba(var(--ddd-red-rgb),.8),rgba(var(--ddd-red-rgb),.8)),
		url('/graphix/bg/pencil_scribble.jpg');
	background-size: 300px;
	background-blend-mode: hard-light;
	line-height: 0.1em;
	text-align: center;
	background-color: var(--black);
	padding: .4em;
	font-size: 2em;
	
	@media (prefers-reduced-motion: no-preference) {
		margin-bottom: 5px;
	box-shadow: 0 0 15px var(--black);
		&::after {
			content: '';
			position: absolute;
			bottom: 0; left: 0;
			transform: translateY(100%);
			background-image: url('/graphix/dividers/blood_drips.webp');
			width: 100%;
			height: 24px;
		}
	}
}
@media screen and (max-width: 800px) {
	body { height: auto; min-height: 100vh; }
	
	main {
		flex-direction: column; /* stack vertically on small screens */
		/* main area flex children */
		> * { max-width: 100%; }
	}
	
	/* show main image in center on large screens */
	#main-image { order: 1; }
	#about { order: 2; }
	#gallery { order: 3 }
}
@media screen and (min-width: 800px) {
	body { overflow: hidden; }
	/* main area flex children */
	main > * { width: calc(100%/3); max-height: 100%; }
	#main-image { flex-grow: 1; /* expand to fill remaining horizontal space */ }
}

/************** MAIN IMAGE SECTION **************/

#main-image {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-content: space-between;
	background: var(--red);
	background-image: url('images/red-diamonds.png');
	background-size: 15%;
	border: var(--box-border);
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* put the border inside instead of outside */
	border-top:none; border-bottom: none;
}
#main-image button#coffin { pointer-events: auto; }
#main-image img {
	pointer-events: none;
	user-select: none;
	max-width: 170%; max-height: 70vh;
	position: relative;
	left: 50%; transform: translate(-50%,0); /* center horizontally */
	
	-webkit-filter: drop-shadow(5px 5px 0px var(--black));
	filter: drop-shadow(8px 8px 15px rgba(0,0,0,.6));
}

/* coffin stuff */
#coffin {
	padding-top: 1em;
	@media screen and (max-width: 800px) { overflow: hidden; }
}
div:has(> #coffin) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	@media screen and (min-width: 800px) {
		flex-grow: 1;
	}
}
@media (prefers-reduced-motion: no-preference) {
	/* closed coffin shake on hover */
	#coffin:not(.open):hover {
		animation: shake .3s;
		/* loop */
		animation-iteration-count: infinite;
	}
	@keyframes shake {
		0% { rotate: 0deg; }
		25% { rotate: -1deg; }
		50% { rotate: 0deg; }
		75% { rotate: 1deg; }
		100% { rotate: 0deg; }
	}
	/*@keyframes shake {
		0% { transform: translate(1px, 1px) rotate(0deg); }
		10% { transform: translate(-1px, -2px) rotate(-1deg); }
		20% { transform: translate(-2px, 0px) rotate(1deg); }
		30% { transform: translate(2px, 2px) rotate(0deg); }
		40% { transform: translate(1px, -1px) rotate(1deg); }
		50% { transform: translate(-1px, 2px) rotate(-1deg); }
		60% { transform: translate(-2px, 1px) rotate(0deg); }
		70% { transform: translate(2px, 1px) rotate(-1deg); }
		80% { transform: translate(-1px, -1px) rotate(1deg); }
		90% { transform: translate(1px, 2px) rotate(0deg); }
		100% { transform: translate(1px, -2px) rotate(-1deg); }
	}*/
}

#coffin-key { position: absolute; z-index: 3; right: 0%; bottom: 0; rotate: 54deg; }
@media screen and (min-width: 800px) { #coffin-key { position: fixed; transform: translate(-30%,-20%); } }
@media screen and (max-width: 800px) { #coffin-key { bottom: 10%; } }
#coffin-key img { width: min(35vw,max(9vw,150px)); }
/* cursor */
body.customCursor {
	cursor: url(images/cursor-blood.png), auto;
	/* links cursor */
	*, a, a:hover, button, button:hover {
		cursor: inherit;
	}
}
body.hasKey, body.hasKey * {
	cursor: url(images/cursor-coffin-key.png), auto !important;
}

/******** NAVIGATION ********/
nav {
	position: relative;
	display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
	padding: .25em; gap: .55em;
	background: var(--black);
	font-size: max(1rem,min(15vw,2.25em));
	/* to top on small screens */
	@media screen and (max-width: 800px) { order: -1; }
	
	a, button {
		display: block;
		font-size: inherit;
		color: var(--red);
		text-align: center;
		&:is(:hover,:focus-visible) { color: var(--yellow); }
	}
}
#page-settings, #page-settings-contents {
	--open-button-fill: var(--red);
	--open-button-background: none;
	--open-button-border: none;
	--background: var(--dd-red);
	--border: var(--box-border);
	--outline: 0px;
	--color: var(--red);
	--accent: var(--yellow);
}
/* page settings icon button */
#page-settings {
	font-size: .8em; margin-top: -.2em; padding: 0px;
	&:hover { --open-button-fill: var(--yellow); }
}
#page-settings-contents {
	font-size: 1.25rem;
	position: absolute;
	left: 50%; transform: translate(-50%,0);
	z-index: 1000;
	padding: 1em 1.25em 1em 0.75em;
	border-radius: 0px;
	min-width: 90%;
	flex-direction: column; gap: 0.5em; align-items: flex-end; 
	text-align: right;
}
@media screen and (min-width: 800px) { #page-settings-contents { bottom: 100%; } }
@media screen and (max-width: 800px) { #page-settings-contents { top: 120%; } }
#page-settings-close-button { display: inline-block; }

/************** ABOUT SECTION **************/

#about {
	display: flex;
	flex-direction: column;
	@media screen and (min-width: 800px) { overflow: auto; }
}

/* name and species */
#about header {
	font-size: 2.5em;
	line-height: 0.8em;
	
	h1, .subheader, .subheader-mini { margin: 0px; }
	h1 {
		font-family: 'Crimes Times Six', sans-serif;
		line-height: 0.85em;
		color: var(--yellow);
	}
	.subheader {
		font-family: 'My Imaginary Friend', sans-serif;
		font-size: .9em;
		color: var(--red);
	}
	.subheader-mini {
		font-family: 'My Imaginary Friend', sans-serif;
		font-weight: normal;
		font-size: .75em;
		color: var(--gray);
	}
}

#about .content {
	overflow: auto;
	padding: 1em 2em;
	flex-grow: 1; /* fill remaining vertical space */
}

@media screen and (min-width: 800px) { #about { overflow: auto; } }

/************** GALLERY SECTION **************/

#gallery {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	
	a {
		color: var(--yellow); font-size: 1.4em;
		&:hover, &:focus-visible { color: var(--red); }
	}
}

/* container for things that aren't the header/footer */
#gallery .content {
	overflow-y: auto;
	flex-grow: 1;
	min-height: 0;
	background:
		linear-gradient(rgba(var(--ddd-red-rgb),.8),rgba(var(--ddd-red-rgb),.8)),
		url('/graphix/bg/crosses.jpg');
	background-color: var(--ddd-red);
	background-size: 150px;
	background-repeat: repeat;
	background-blend-mode: overlay;
}

#balloon-animal {
	z-index: 2;
	position: absolute; right: 0; top: 0;
	max-height: 100%; max-width: 30%;
}
#balloon-animal img { max-height: 100%; max-width: 100%; }

#gallery-images {
	padding: 1em;
	background: var(--dd-red);
	display: flex; flex-wrap: wrap; justify-content: center;
	border-bottom: var(--box-border);
}
#gallery-images footer { width: 100%; }
#gallery-images .img-container { width: calc(100%/2); height: max(20vh,100px); display: block; align-content: center; }
#gallery-images .img-container img { max-width: 100%; max-height: 100%; } 

#gallery .bottom-area {
	padding: 1em;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .5em;
}
#blinkies, #stamps {
	background: var(--black);
	padding: .5em;
	display: flex; flex-direction: column; gap: .25em;
	justify-content: center; /* vertically center contents */
}
#blinkies img, #stamps img { margin-left: auto; margin-right: auto; }

/************** SCROLLBAR **************/
/* Firefox settings */
* { scrollbar-color: var(--red) var(--black); }
/* width */
::-webkit-scrollbar { width: 15px; }
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px var(--black);
	background-color: var(--d-gray);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--red);
	border-radius: 0;
}