@import url("https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap");

:root {
	--scroll-percent: 0;
}

html {
	font-family: "Signika", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	font-variation-settings: "GRAD" 0;
}

p {
	font-weight: 300;
}

html,
body {
	margin: 0;
	height: 100%;
	scroll-snap-type: y proximity;
	overflow-y: scroll;
}

/* body {
	background-image: url("./assets/sky.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
} */

body::before {
	backdrop-filter: blur(2px) brightness(2);
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -10;
}

#site-bg {
	background-image: url("https://pinkinc.tawtaw.site/assets/sky.jpg");
	/* background-size: cover; */
	background-size: 300% 300%;
	background-attachment: fixed; /* Ensures background spans across sections */
	background-position: center calc(var(--scroll-percent) * 80 * 1%);
	background-repeat: no-repeat;
}

.page-wrap {
	position: relative;
	display: grid;
	max-width: 15rem;
}

.height-viewport {
	padding-inline: 1rem;
	min-height: 100vh;
	min-height: 100dvh;
	/* height: 100%; */
	display: grid;
	align-content: center;
	box-sizing: border-box;

	scroll-snap-align: start;
}

h1 {
	margin-bottom: 0;
}

.height-viewport > * {
	max-width: 15rem;
}

.cloudy-bg {
	position: relative;
}

.cloudy-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: hsla(197, 100%, 80%, 0.594);
	filter: blur(20px);
	z-index: -1;
}

.color-white {
	color: white;
}

/* .bg {
	z-index: -1;
	background-image: url("./assets/sky.jpg");
	background-size: cover;
	backdrop-filter: blur(5px);
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
} */

color-bands {
	position: fixed;
	top: 50%;
	left: 70%;
	z-index: -1;
}

/* width */
::-webkit-scrollbar {
	width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px transparent;
	border-radius: 10px;
	background-color: transparent;
	color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: skyblue;
	border-radius: 10px;
}