* {
	box-sizing: border-box;
}

:root {
	--animation-delay: 7000ms;

	--timer-date: "";
	--timer-hours: "";
	--timer-minutes: "";
	--timer-seconds: "";
}

html {
	background-color: var(--background-color);
	cursor: none;
	/* cursor: url("../images/cursor.png"), auto;	 */
}

.noise::before {
	content: "";
	background-image: url("../images/noise.gif");
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0.03;
	pointer-events: none;
	z-index: 1000;
}

body {
	overflow: hidden;
	overscroll-behavior-y: none;
}

main {
	color: var(--color);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* progress[value] {
	height: 2px;
	background-color: #828980;
}

progress[value]::-webkit-progress-bar {
	background-color: #828980;
	border-radius: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
	background-color: var(--color);
}

progress[value]::-moz-progress-bar {
	background-color: var(--color);
}

.progress-bar {
	align-self: center;
}

@media (max-width: 575.98px) {
	.progress-bar {
		order: 4;
	}
}

.progress-bar>div {
	position: absolute;
	bottom: 0;
	width: 6px;
	height: 8px;
	background-color: var(--background-color);
} */

.circle, .cursor {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.circle {
	width: 50px;
	height: 50px;
	border: solid 2px #FFFFFF;
	border-radius: 50%;
}

.cursor {
	transition: transform .3s ease-in-out;
}

.container {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
}

.container-row {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

.container-column {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.site-fade {
	position: relative;
	overflow: hidden;
}

.site-fade-in {
	opacity: 0;
	animation: site-fade-in 2s 1 var(--animation-delay) forwards;
}

.fade-in {
	opacity: 0;
	animation: site-fade-in 2s 1 forwards;
}

@keyframes site-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.site-fade::before {
	position: absolute;
	left: -20%;
	height: 100%;
	width: 120%;
	background-color: var(--background-color);
	color: transparent;
	animation: site-fade 1.5s 1 var(--animation-delay) forwards;
	content: '';
}

@keyframes site-fade {
	0% {
		left: -20%;
	}

	100% {
		left: 120%;
	}
}

.carousel {
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-x: auto;
	overflow-y: hidden;
	display: flex;
	flex: 1;
	height: 100vh;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.horizontal-scroll {
	position: unset !important;
}

.carousel-items {
	height: 100vh;
	width: auto;

	pointer-events: none;
}

@keyframes invert {
	from {
		filter: invert(0%);
	}

	to {
		filter: invert(100%);
	}
}

@keyframes invert-reset {
	from {
		filter: invert(100%);
	}

	to {
		filter: invert(0%);
	}
}

@keyframes un-opacify {
	from {
		opacity: 0.5;
	}

	to {
		opacity: 1;
	}
}

@keyframes opacify {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.5;
	}
}

@keyframes color {
	from {
		filter: grayscale(1);
	}

	to {
		filter: grayscale(0);
	}
}

@keyframes un-color {
	from {
		filter: grayscale(0);
	}

	to {
		filter: grayscale(1);
	}
}

a, a:hover, button, button:hover {
	cursor: none;
}

.inverted {
	mix-blend-mode: difference;
	transform: scale(12);
}

.display-none {
	display: none !important;
}

#ScrollHinter>span:first-child {
	font-size: 1.5rem;
	font-family: HelveticaNeue;
}

#SiteIcon {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 36px;
	padding-top: 24px;
	/* width: max-content; */
}

@media (max-width: 768px) {
	#SiteIcon {
		display: none;
	}
}

#SiteIcon img {
	width: 36px;
	height: 36px;
}

#ProjectDetails {
	position: absolute;
	bottom: 0;
	left: 0;
	padding-left: 36px;
	padding-bottom: 24px;
	display: flex;
	gap: 4px;
	width: max-content;
}

@media (max-width: 768px) {
	#ProjectDetails {
		position: absolute;
		bottom: calc(24px + 24px + 12px);
		left: 50%;
		transform: translate(-50%, 0%);
		padding: 0px;
	}
}

#ProjectDetails>span:first-of-type {
	font-size: var(--title-font-size);
	font-family: HelveticaNeue;
}

#ProjectScrollInfo {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0%);
	padding-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* @media (max-width: 768px) {
	#ProjectScrollInfo {}
} */

#Logo {
	display: none;
	position: fixed;
	top: 0;
	right: 0;

	max-width: 48px;
	max-height: 48px;

	margin-top: 12px;
	margin-right: 12px;
}

@media(max-width: 768px) {
	#Logo {
		display: unset;
	}
}

#About {
	position: fixed;
	right: 0;
	bottom: 0;
	padding-right: 36px;
	padding-bottom: 24px;
	display: flex;
	gap: 2px;
}

@media (max-width: 768px) {
	#About {
		display: none;
	}
}

#About>span {
	font-size: var(--title-font-size);
	font-family: HelveticaNeue;
}

/* About */

.about-developed>a {
	display: inline-block;
}

.about-clock {
	white-space: nowrap;
}

.clock-date:before {
	content: var(--timer-date);
}

.clock-hours:before {
	content: var(--timer-hours);
}

.clock-minutes:before {
	content: var(--timer-minutes);
}

.clock-seconds:before {
	content: var(--timer-seconds);
}