@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0s;
}

html {
	--background: rgb(32,36,40);
	--blue-white: rgb(216,235,255);
	--green-white: rgb(216,255,235);

	--accents: rgb(216,235,255,.5); /* --blue-white with half opacity */

	font-family: sans-serif;
	color: var(--blue-white);
	background-color: var(--background);
}

/* Needs to be on both in mobile browsers */
html, body {
	overflow-x: clip;
}

body {
	margin: 0;
}

a, summary {
	color: var(--green-white);
}
summary {
	cursor: pointer;
	width: fit-content;
}

hr {
	color: var(--accents);
	border-style: solid;
	break-before: avoid;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}
/* Moving heading sizes down a level since H1 is reserved for the website header overall and h2 is a main heading */
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.17em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: .83em;
}

.urgent {
	color: red;
	font-weight: bold;
}

@keyframes backgroundScroll {
	from {
		background-position: 0px 0px;
	}
	to {
		background-position: 20px 20px;
	}
}

@layer {
	button.skeumorph {
		all: unset;
	}
	.skeumorph.skeumorph {
		background-repeat: no-repeat; /* otherwise there is a sliver of the other end of the gradient visible on Firefox sometimes */
		background-image: linear-gradient(to bottom, hsl(var(--hue, 0), var(--sat, 100%), 50%) 25%, hsl(var(--hue, 0), var(--sat, 100%), 20%));
		border: 4px inset hsl(var(--hue, 0), var(--sat, 100%), 50%);
		font-weight: bold;
		color: var(--green-white);
		text-shadow: .15em .1em rgba(0, 0, 0, 0.5);
	}
	a.skeumorph {
		display: inline-block;
		position: relative;

		padding: 0 0.5em;
		text-decoration: none;
	}
	button.skeumorph, .skeuBtn {
		position: relative;
		border-radius: 1em;
		text-align: center;
		user-select: none;
		cursor: pointer;
		transition: scale .1s, filter .1s;
		filter: drop-shadow(.1em .1em .25em black);
		&:hover, &:focus {
			scale: 1.1;
			filter: drop-shadow(.3em .3em .35em black);
		}
		&:active {
			scale: 1;
			filter: drop-shadow(.1em .1em .25em black);
			background-image: linear-gradient(to top, hsl(var(--hue, 0), var(--sat, 100%), 50%) 25%, hsl(var(--hue, 0), var(--sat, 100%), 20%));
			border-style: outset;
		}
	}
}
.gridEffect {
	&::before {
		content: "";
		display: block;
		background-image: url(images/gridBG.png);
		width: calc(100% + 8px);
		height: calc(100% + 8px);
		position: absolute;
		top: -4px;
		left: -4px;
		opacity: 0;
		transition: opacity .5s;
		animation: backgroundScroll 2s linear infinite;
		pointer-events: none;
		border-radius: inherit;
	}
	&:hover::before {
		opacity: .75;
	}
}

/* All the display stuff is here to make the focus outline look good. */
.button {
	display: inline-block;
	img {
		display: block;
		image-rendering: pixelated;
	}
}

.rubySecret {
	color: var(--green-white);
	font-weight: bold;
	rp, rt {
		transition: opacity 1s;
		opacity: 0;
	}
	&:hover {
		rp, rt {
			opacity: 1;
		}
	}
}

.codeblock {
	display: block;
	text-align: left;
	tab-size: 4;
	white-space: pre-wrap;
	margin: 0 1em;
	padding: .6em 1em;
	background-color: rgba(0,0,0,.5);
	border-radius: .75em;
	tab-size: 2;
}

.outlined {
	border: 2px solid var(--accents);
	padding: 4px;
}

/* HEADER */
header {
	z-index: 100;
	position: sticky;
	top: 0;
	& > div {
		position: relative;
		a {
			text-decoration: none;
		}
		h1 {
			margin: 0;
			display: inline;
			padding-left: 1.35em;
		}
		img {
			position: absolute;
			height: 100%;
		}
	}
	&::after {
		display: block;
		content: "";
		height: 1em;
		width: 100%;
		background-image: linear-gradient(black, transparent);
		position: absolute;
		bottom: -1em;
		pointer-events: none;
		user-select: none;
	}
}

@media (orientation: landscape) {
	nav {
		position: fixed;
		left: 0;
		margin-top: 1.25em;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		font-size: 1.25em;
		gap: .25em;
		a.skeumorph { /* more specificity is needed to override border-left to none! */
			border-left: none;
			padding-left: .25em;
			border-radius: 0 1em 1em 0;
		}
	}
}
@media (orientation: portrait) {
	nav {
		display: flex;
		justify-content: safe center;
		padding: 1em 0 .5em; /* makes the scrollbar line up nicely with the top of the content if it's not a margin */
		gap: 1em;
		a {
			border-radius: 1em;
		}
		overflow-x: auto;
	}
}

#contentFilterLink {
	position: absolute;
	right: 1em;
	margin-top: 1em;
	font-size: .75em;
	opacity: 50%;
	z-index: 1;
}

/* MAIN AREA */

#centerArea {
	width: max(800px, 60%);
	margin: auto;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	padding-top: 1em;
}

@media (orientation: portrait) {
	#centerArea {
		width: 100%;
	}
}

/* FOOTER */

#footerSpacer {
	padding: 2.5em;
	align-content: center;
	clear: both; /* in case there is floats at the bottom of the content */
}
#footerQuoteAuthor {
	white-space: nowrap;
}

.atomuhr {
	width: 100%;
	border: none;
	overflow: hidden;
}

#boolChat {
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: center;
	a {
		font-size: 8px;
	}
	iframe {
		display: block;
		border: none;
	}
}

@media print {
	#boolChat {
		display: none;
	}
	nav {
		display: none;
	}
}