/* #region backgrounds */
#background {
	position: fixed;
	z-index: -30;

	animation:
		background--breathe 30s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
		background--rotate 45s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
	background-image: url("/assets/backgrounds/darkwinter.webp");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
#background__dim {
	position: fixed;
	top: 0;
	z-index: -28;
	backdrop-filter: blur(1px);
	background: linear-gradient(
		to right,
		rgb(0 0 0 / 40%),
		transparent 10% 85%,
		rgb(0 0 0 / 40%)
	);
	width: 100vw;
	height: 100vh;
}

#snowholder {
	position: fixed;
	top: 0;
	z-index: -29;
	mask-image: linear-gradient(
		to right,
		transparent,
		black,
		black,
		transparent
	);
	width: 100vw;
	height: 100vh;
}
.snow {
	position: fixed;
	top: 0;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: snowscroll;
	margin: auto;
	width: 100vw;
	height: 100vh;
}
.snow1 {
	/* opacity: 0.9; */
	filter: blur(1.5px);
	animation-duration: 18s;
	background-image: url("/assets/backgrounds/snow1.png");
}
.snow2 {
	opacity: 0.8;
	filter: blur(2px);
	animation-duration: 28s;
	background-image: url("/assets/backgrounds/snow2.png");
}
.snow3 {
	opacity: 0.6;
	filter: blur(3px);
	animation-duration: 42s;
	background-image: url("/assets/backgrounds/snow3.png");
}
/* #endregion */

html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}
html:has(#overlay.active) {
	overflow: hidden;
}
body {
	margin: 0;
	background-color: black;
	overflow-anchor: none;
	color: var(--text-color);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5;
	font-family: Montserrat;
	text-shadow:
		1px 2px 2px black,
		-1px 2px 2px black;
	/* cursor: url('/assets/cursor.png'); */
}

/* #region headers and footers */
nav {
	display: flex;
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: solid var(--border-color) 2px;
	background-color: var(--nav-color);
	height: 60px;
	color: white;
}
nav a,
nav button {
	/* display: flex; */
	padding-right: 0.8em;
	padding-left: 0.8em;
	height: 62px;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	text-align: center;
	text-shadow: inherit;
}
nav button:hover {
	background-color: var(--border-color);
}
nav img {
	padding: 0.2em 1em;
	height: 90%;
}
nav svg {
	display: inline;
	vertical-align: center;
	margin-right: -0.3rem;
	margin-left: -0.4rem;
	height: 1.3rem;
	object-view-box: 0 0 24 24;
	color: white;
}

.navRight {
	right: 100px;
	margin-left: auto;
}

footer {
	display: flex;
	bottom: 0;
	z-index: 100;
	background-color: var(--nav-color);
	width: 100%;
	min-height: 10rem;
}
footer p {
	margin: auto;
	margin-top: 3rem;
	color: color-mix(in srgb, var(--border-color) 100%, white 20%);
	font-size: 0.9rem;
	text-shadow: 1px 1px 2px black;
}

/* #endregion */

/* #region social links */
.socials-wrap {
	display: flex;
	justify-content: center;
}
.socials-button {
	margin: 0 0.4em;
	width: 25%;
	max-width: 80px;
	height: 100%;
}
.socials-icon {
	filter: drop-shadow(0 4px 2px #000);
	width: 100%;
	height: auto;
}
.socials-button:hover .socials-icon {
	transform: translateY(-9px);
	transition: 0.15s cubic-bezier(0, 1.4, 0.5, 1.4);
}
/* #endregion */

/* #region musicBar */
#musicBar {
	display: flex;
	position: sticky;
	bottom: 0;
	flex-direction: row;
	z-index: 100;
	border-top: solid var(--border-color) 2px;
	background-color: var(--nav-color);
	width: 100%;
	height: 36px;
	min-height: unset;
	font-size: 0.75rem;
}

#musicBar button {
	width: 100px;
}

#musicBar svg {
	position: relative;
	left: 33px;
	width: 30px;
}

#musicBar img {
}

#musicbar__nameprog-container {
	position: relative;
	background-color: color-mix(
		in srgb,
		var(--nav-color) 100%,
		var(--border-color) 25%
	);
	width: calc(100% - 230px);
}

#musicBar__trackname {
	position: relative;
	z-index: 1;
	padding: 0.5rem 0.7rem;
	width: 100%;
}
#musicBar__trackname i {
	font-style: normal;
}
#musicBar__progress {
	position: absolute;
	top: 0;
	transform-origin: left;
	background-color: #2f2b68;
	width: 100%;
	height: 100%;
}

#musicBar__volume {
	width: 100px;
	/* -webkit-appearance: none; */
}
#musicBar__volume:hover {
	/* make scrolling adjust volume */
	min-width: 0;
}
/* .musicBar button {
	bottom: 32px;
	left: 0;
	border-radius: 40px;
	padding: 1px 4px 0;
	color: var(--text-color);
	font-weight: bold;
	font-size: 18px;
} */
#musicBar a {
	position: fixed;
	bottom: 9px;
	left: 55px;

	padding: 2px 10px;
	font-size: 12px;
}

/* #endregion musicBar */

/* #region common */
#centeredContent {
	position: relative;
	z-index: 10;
	margin: auto;
	box-shadow:
		rgb(0 0 0 / 70%) 1px 0 10px,
		rgb(0 0 0 / 70%) -1px 0 10px;
	width: 100%;
	max-width: 80rem;
}

#pageBody {
	backdrop-filter: blur(0.9rem);
	margin: auto;
	background-color: var(--page-color);
	min-height: calc(100vh - (64px + 10rem));
}

.container {
	margin: auto;
	padding: 3rem 16px;
	width: clamp(24rem, 50rem, 95%);
}
.container__text {
	/* margin: auto; */
	/* max-margin: auto; */
	/* width: 40em; */
	/* max-width: 95%; */
}

.gif img {
	border: color-mix(in srgb, var(--border-color) 100%, black 20%) ridge 3px;
	border-radius: 5px;
	width: 12rem;
}
/* #endregion */

@media (width <=900px) {
	/* body {
		font-size: 0.8rem;
	} */
	nav {
		position: unset;
		top: 0;
		width: 100%;
	}
	nav span {
		display: none;
	}
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}
	#centeredContent {
		width: 100%;
		overflow-x: hidden;
	}
	.container {
		width: calc(100% - 32px);
	}
}

@media (prefers-color-scheme: light) {
	#background {
		background-image: url("/assets/backgrounds/lightfall.webp");
	}
	body {
		background-color: white;
		text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
	}
	#pageBody {
		background-image: linear-gradient(
			to bottom,
			rgba(255, 234, 242, 0.7),
			rgba(253, 206, 224, 0.8)
		);
	}
}

@media (prefers-reduced-motion: reduce) {
	#background {
		animation: none;
		transition: none;
	}
}