:root {
	--black: black;
	--white: white;
	--orange: #e49836;
	--l-yellow: #f5e99f;
	--yellow: #ffff66;
	--l-blue: #7bfefc;
	--blue: #74b8d4;
	--d-blue: #1da1d2;
	--red: #cc0000;
	--l-purple: #f3c6fe;
	--purple: #d399f0;
	--d-purple: #660066;
	--sidebar-color: #32ca97;
}

.page-settings {
	--open-button-fill: var(--black);
	--open-button-background: var(--yellow);
	--open-button-border: 2px var(--black) solid;
	--background: var(--white);
	--border: 3px var(--black) solid;
	--outline: 0px;
	--color: var(--black);
	--accent: var(--black);
	.open-page-settings {
		box-shadow: -3px 3px var(--black);
		&:hover { --open-button-fill: var(--red); background: var(--white); }
	}
	#page-settings-contents {
		border-radius: 1rem;
		padding-top: 1.5rem;
		font-family: 'Comic Sans MS', 'Comic Sans', sans-serif;
		label, button {
			font-family: 'Garfield', 'Comic Sans MS', 'Comic Sans', sans-serif;
			font-weight: bold;
			font-size: .9rem;
			&:hover { color: var(--red); }
		}
	}
}

/* credit/caption under full image view */
.full-image-view {
	color: var(--orange);
	.fiv-content {
		.text {
			background: var(--white);
			color: var(--black);
			border-radius: 1rem;
			border: 3px var(--black) solid;
		}
	}
}

html, body { height: 100%; width: 100%; }

body {
	margin: 0;
	font-family: "Garfield","Comic Sans MS","Comic Sans",sans-serif;
	letter-spacing: .1em;
	color: var(--black);
	background: var(--l-yellow);
}

/* cursor */
body.customCursor, .customCursor * {
	cursor: url("/shrines/garf/images/cursor.png"), auto;
	/* links cursor */
	a, a:hover, button, button:hover {
		cursor: url("/shrines/garf/images/cursor.png"), auto;
	}
}

a, a:link, a:visited { color: var(--red); }
a:hover { color: var(--orange); }

img { max-width: 100%; }

a.skip-to-content {
	background: var(--yellow);
	color: var(--black);
	border: 2px black solid;
	border-top: none;
	border-radius: 0 0 1em 1em;
	padding: .3em .6em .2em .5em;
	left: .5rem;
}

/* header logo */
#logo {
	max-width: min(600px,90%);
	&:hover, &:focus-visible {
		filter: hue-rotate(15deg) saturate(80%) brightness(120%) contrast(120%);
	}
	user-select: none;
}
a:has(#logo) {
	display: block;
	height: fit-content;
}

.whitebox {
	background: var(--white);
	padding: 1.25rem 1rem 1.5rem 1rem;
	border-radius: 1rem;
	border: 3px var(--black) solid;
}

main {
	display: flex;
	height: 100%;
	
	> .left, > .right {
		background-image: url('images/garfield_bg_green_2x.jpg');
		background-size: 100%;
		width: max(88px,8.8vw);
		flex-shrink: 0;
		z-index: 2;
	}
	
	> .left {
		margin-left: 1.2rem;
	}
	
	#nav-wrapper {
		display: flex; flex-direction: column;
		height: 100%;
		justify-content: space-between;
		align-items: center;
		padding: min(3rem,5vh) 0 min(1.5rem,2vh) ;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	#nav-ad {
		max-width: 90%;
		@media screen and (height < 500px) { display: none; }
	}
	nav {
		display: flex;
		flex-direction: column;
		gap: max(.5rem,.8vw);
		
		a, a:link, a:visited, button {
      display: block;
      width: max(130%,11.5vw);
			margin-left: -.75rem;
			color: var(--black);
      font-size: max(.75rem,1.2vw);
      background: var(--yellow);
      border: 2px black solid;
      border-radius: 0 1em 1em 0;
      padding: .3em .6em .2em .5em;
      box-shadow: -2px 2px var(--black);
		}
		a:before, button:before {
			content: '';
			background-image: url('images/paw_off.svg');
			background-size: 100%;
			background-repeat: no-repeat;
			width: 1em;
			height: 1em;
			display: inline-block;
			margin-right: .35em;
		}
		a, button { &:focus-visible, &:hover {
			background: var(--white);
			color: var(--red);
			&:before { background-image: url('images/paw_on.svg'); }
		} }
		
		a:first-of-type {
			position: relative;
			margin-top: 100%;
			&:after {
				content: '';
				position: absolute;
				left: -8%; bottom: 51%;
				width: 100%;
				padding-bottom: 70%;
				background-image: url('images/button_topper.png');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: 40% bottom;
			}
		}
	}
	
	> .right {
		margin-right: 1.2rem;
		/* hide right bar on small screens */
		@media screen and (width < 800px) { width: 0px; min-width: 0px; margin-right: 0px; }
	}
	
	> .center {
		flex-grow: 1;
		min-width: 0;
		text-align: center;
		overflow: scroll;
		padding: 0 1rem 2rem 1rem;
		
		> header {
			padding: 1rem .5rem .5rem .5rem;
			h1 { margin: 0; line-height: 1; }
		}
		
		> .whitebox {
			width: min(550px,90%);
			margin: 0 auto;
			--m: max(-55px,-6.5vw); /* top margin */
			margin-top: var(--m);
			padding: calc(var(--m)*-1 + .35rem) 1rem 2rem 1rem;
		}
		
		#content-topper {
			max-width: min(500px,80%);
			user-select: none;
			pointer-events: none;
		}
	}
	
	#newspaper, #newspaper:link, #newspaper:visited, #newspaper:hover {
		color: var(--black);
	}
	#newspaper {
		position: fixed;
		right: 0; bottom: 0;
		transform: translate(-8%,60%);
		rotate: -20deg;
		background: var(--white);
		width: max(14rem,min(70vh,min(400px,50vw)));
		height: min(70vh,min(420px,53vw));
		border: 3px var(--black) solid;
		
		transition: all 0.25s;
		
		@media (prefers-reduced-motion: no-preference) {
			&:hover, &:focus-visible { transform: translate(-8%,25%); }
		}
		
		> header {
			text-align: center;
			h2 {
				font-family: 'Arial';
				letter-spacing: initial;
				text-transform: uppercase;
				font-size: 3rem;
				margin: 1rem 1rem .75rem 1rem;
				border-bottom: 4px var(--black) solid;
			}
			h4 {
				font-size: .75rem;
				margin-top: 0;
			}
		}
		
		.comics {
			padding: .5rem;
			padding-top: 0;
			img { max-width: 100%; }
		}
	}
}