@font-face {
	font-family: Suisse Intl Regular;
	src: url(./fonts/SuisseIntl-Regular-WebXL.woff2) format("woff2");
}



html {
	background-color: black;
	overflow: hidden;
	height: 100%;

	--border-radius: 0px;
	--outline: 1px solid white;
	--background-color: black;
}

:root {
	--color-1: #e1b4c8;
	--color-2: #d8d8d8;
}

body {
	font-family: "Suisse Intl Regular";
	background-color: black;
	color: white;
	font-size: 16px;
	line-height: 18px;
	margin: 0;
	letter-spacing: -1px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	user-select: none;
}

.ui {
	outline-offset: -.5px;
	box-sizing: border-box;
	height: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	transition: background-color 400ms ease, color 20ms ease 80ms;
	user-select: none;

	background-color: var(--background-color);
	margin: 0;
	border-radius: var(--border-radius);
	outline: var(--outline);
}


.container {
	width: auto;
	height: 100%;
	z-index: 3;
	position: absolute;
	left: 20px;
	top: 20px;
	right: 20px;
	user-select: none;
	transition: all 1000ms ease;
	opacity: 1;
}

.container.hidden {
	transition: opacity 1000ms ease;
	opacity: 0;
}

p {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

.particle-container {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	padding: 0;
	z-index: 0;
	user-select: none;
	opacity: 0;
	transition: opacity 4000ms ease 100ms;
}

.particle-container.is-visible {
	opacity: 1;
}

.noise-preview {
	display: flex;
	align-items: center;
	border-radius: 1vw;
	width: 100%;
	height: 100%;
	background-color: black;
	border: solid white 1px;
	overflow: hidden;
}

.noise-preview canvas {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	image-rendering: pixelated;
}

.ui[data-close]:hover,
.ui[data-close-fullscreen]:hover,
.ui[data-project="archiveProject"]:hover {
	background-color: white;
	color: black;
}

.ui.expand-off,
.ui.expand-on {
	padding: 0;
	margin: 0;
	display: block;
}

.button-off>.plusMinus::before {
	content: "+";
}

.button-on>.plusMinus::before {
	content: "–";
}

.right {
	justify-content: flex-end;
	text-align: right;
}

.centered {
	justify-content: center;
	text-align: center;
}

.menu-container {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	width: 100%;
	transition: all 200ms ease;
}

.portfolio-row {
	display: grid;
	grid-template-columns: 5fr 5fr 1fr;
	width: 100%;
}

.portfolio-row:not(:first-child):hover .ui {
	background-color: white;
	color: black;
	border-radius: var(--border-radius)
}

.portfolio-row-item {
	min-width: 80px;
}

.portfolio-row-item:nth-child(3) {
	font-variant-numeric: tabular-nums;
}

.contact-container {
	display: grid;
	grid-template-columns: 1fr 9fr;
}

.slider-container {
	display: grid;
	grid-template-columns: 5fr 1fr;
	user-select: none;
}

.color-container {
	display: grid;
	grid-template-columns: 5fr 1fr;
	z-index: 5;
}

.project-information-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.project-information-item:nth-child(3) {
	grid-column: 2;
	width: 100%;
	justify-self: end;
	text-align: right;
}

.project-information-item:nth-child(4) {
	grid-column: 2;
	width: 100%;
	justify-self: end;
	text-align: right;
}

.project-information-item:nth-child(5) {
	grid-column: 2;
	width: 100%;
	justify-self: end;
	text-align: right;
}

.project-title {
	color: black;
	background-color: white;
}

.expand-off {
	height: 0;
	visibility: hidden;
}

.expand-on {
	height: auto;
	visibility: visible;
}

.expand-off,
.expand-on {
	transition: height 300ms ease;
}

.portfolio-preview {
	width: calc(100% * 5 / 11);
}

.portfolio-preview-off {
	display: none
}

.portfolio-preview-on {
	display: block
}

.project-description {
	height: auto;
	padding: 5px 10px;
}

.about-container>.ui:first-child,
.portfolio-container>.ui:first-child,
.visual-container>.ui:first-child {
	cursor: pointer;
	user-select: none;
}


.button-on {
	background-color: white;
	color: black;
}

@keyframes blinkBW {

	0%,
	100% {
		background-color: var(--background-color);
		color: white;
	}

	50% {
		background-color: white;
		color: black;
		border-color: white;
	}
}

.blink-tryit {
	animation: blinkBW 1s infinite ease-in-out;
}

.slider-container .slider-container-item:first-child {
	position: relative;
	user-select: none;
	touch-action: none;
	isolation: isolate;
}

.slider-container .slider-container-item:last-child {
	justify-content: flex-end;
	text-align: right;
}

.moreInfo-container {
	position: absolute;
	width: calc(100% * 1 / 5);
	z-index: 16;
}

.ui.description {
	height: auto;
	padding: 5px 10px;
}

.project-image-container {
	position: relative;
	width: 100%;
	height: 90vh;
}

.ui.project-image-container {
	padding: 0;
}

.project-image-container img,
.project-image-container svg,
.project-image-container video {
	height: auto;
	width: auto;
	margin: auto;
	max-width: calc(100% - 1px);
	max-height: 90%;
}

.project-image-container img.full,
.project-image-container svg.full,
.project-image-container video.full {
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	max-height: calc(100% - 1px);
	object-fit: cover;
	display: block;
}

.project-image-container img.half,
.project-image-container svg.half,
.project-image-container video.half {
	width: auto
}

model-viewer {
	width: 100%;
	height: 100%;
}

effect-composer {
	width: 100%;
	height: 100%;
}

.slideshowControl-container {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	width: 100%;
}

.slideshowProgress-container {
	display: flex;
}

.slideshowProgress-container>.ui {
	flex: 1
}

.visual-container>.button-on::before,
.visual-container>.button-off::before {
	content: "Control Visual";
}

.playbutton-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.playbutton-container img {
	height: 16px;
}

.playbutton img,
.shuffle img {
	z-index: 15;
	mix-blend-mode: difference;
}

.shuffle:active {
	background-color: white;
	color: black;
}

.misc-container img {
	height: 16px;
	z-index: 15;
	mix-blend-mode: difference;
}

.moreInfo::before {
	content: "More Information";
}

.project-container {
	position: absolute;
	left: 20px;
	top: 20px;
	width: calc(100vw - 40px);
	z-index: 10;
	transform-origin: center center;
	will-change: transform, opacity, visibility;
	background-color: black;
}

.window-off {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.85);
}

.window-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
}

.videoControl-container {
	display: grid;
	grid-template-columns: 25px 2fr 20fr 25px;
	width: 100%;
}

.videoControl-container img {
	mix-blend-mode: difference;
	position: relative;
	z-index: 15;
	width: auto;
	height: 16px !important;
	display: block;
	color: #fff;
	margin: auto;
}

.videoControl-container>.ui:nth-child(1),
.videoControl-container>.ui:nth-child(4) {
	padding: 0;
}

.archive-title {
	display: grid;
	grid-template-columns: 1fr 4fr;
}

.archive-scroll {
	height: 90vh;
	overflow-y: scroll;
	padding: 0;
	align-items: start;
}

.archive-container {
	display: block;
	gap: 0;
	column-count: 5;
}

.archive-container-item {
	display: inline-block;
}

.archive-container-item>.ui {
	height: auto;
	padding: 5px 10px;
}

.archive-image-container>.ui {
	height: auto;
	padding: 10px;
	display: block;
}

.archive-image-container>.ui>img,
.archive-image-container>.ui>video {
	width: 100%;
}

.horizontal {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.archive-fullscreen-container {
	position: absolute;
	left: 20px;
	top: 20px;
	width: calc(100vw - 40px);
	z-index: 10;
	transform-origin: center center;
	will-change: transform, opacity, visibility;
	background-color: black;
}

.archive-fullscreen-image-container {
	height: 90vh;
}

.archive-fullscreen-image-container img:nth-child(1),
.archive-fullscreen-image-container video:nth-child(1) {
	max-height: 90%;
	margin: auto;
	max-width: 100%;
}

.archive-fullscreen-image-container>.videoControl-container {
	position: absolute;
	bottom: 0;
	left: 0;
}

.window-off,
.window-on {
	transition:
		transform 220ms cubic-bezier(.2, .8, .2, 1),
		opacity 180ms ease;
}

/* PERSISTENT STATES */
.window-on {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.window-off {
	opacity: 0;
	transform: scale(.96);
	pointer-events: none;
	/* prevents stray clicks while hidden */
}

/* your keyframes stay */
@keyframes popIn {
	0% {
		transform: scale(0.6);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes popOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(.96);
		opacity: 0;
	}
}

.window-pop {
	animation: popIn 240ms cubic-bezier(.2, .8, .2, 1);
}

.window-pop-out {
	animation: popOut 200ms cubic-bezier(.2, .8, .2, 1);
}

.slider-fill {
	position: absolute;
	left: .5px;
	top: .5px;
	bottom: .5px;
	width: 0%;
	background: white;
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 0;
	border-radius: var(--border-radius);
}



.color-1 {
	background-color: var(--color-1);
}

.color-2 {
	background-color: var(--color-2);
}

.ui.hue-1,
.ui.saturation-1,
.ui.brightness-1,
.ui.hue-2,
.ui.saturation-2,
.ui.brightness-2 {
	position: relative;
	cursor: ew-resize;
	user-select: none;
	touch-action: none;
	isolation: isolate;
}

.picker-text {
	display: none;
}

.picker-handle {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: white;
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
}

.color-container .color-1,
.color-container .color-2 {
	cursor: pointer;
}

.no-anim {
	transition: none !important;
}

.ui-noise {
	display: block;
}

@media (max-width: 3000px) {
	.ui-about {
		height: calc(25px*5);
	}

	.ui-noise {
		height: calc(25px*13);
		padding: 10px;
	}
}

@media (max-width: 1600px) {
	.ui-about {
		height: calc(25px*6);
	}

	.ui-noise {
		height: calc(25px*12);
	}

	.archive-container {
		columns: 4;
	}
}

@media (max-width: 1450px) {
	.ui-about {
		height: calc(25px*7);
	}

	.ui-noise {
		height: calc(25px*11);
	}
}

@media (max-width: 1300px) {
	.ui-about {
		height: calc(25px*8);
	}

	.ui-noise {
		height: calc(25px9);
	}

	.archive-container {
		columns: 3;
	}
}

@media (max-width: 1200px) {
	.ui-about {
		padding: 10px;
		height: auto;
	}

	.ui-noise {
		padding: 10px;
		height: auto;
	}

	.about-container,
	.portfolio-container,
	.visual-container {
		position: relative;
	}

	.visual-container>.button-on::before,
	.visual-container>.button-off::before {
		content: "Visual";
	}

	.about-container>.expand-on,
	.about-container>.expand-off {
		position: absolute;
		left: 0;
	}

	.visual-container>.expand-on,
	.visual-container>.expand-off {
		position: absolute;
		right: 0;
	}

	.portfolio-container>.expand-on,
	.portfolio-container>.expand-off {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.about-container>.expand-on {
		width: 340px;
		max-width: 71vw;
	}

	.portfolio-container>.expand-on {
		width: calc(100vw - 20px);
		max-width: calc(100vw - 20px)
	}

	.visual-container>.expand-on {
		width: 340px;
		max-width: 71vw;
	}

	.portfolio-container>.button-on,
	.portfolio-container>.button-off {
		min-width: none;
	}

	.project-image-container {
		padding: 10px;
	}

	.project-image-container img,
	.project-image-container svg,
	.project-image-container video {
		width: auto;
		max-width: 95%;
		height: auto;
	}

	.project-image-container img.full,
	.project-image-container svg.full,
	.project-image-container video.full {
		width: 100%;
		height: auto;
	}

	.project-image-container img.half,
	.project-image-container svg.half,
	.project-image-container video.half {
		width: 50%;
		height: auto;
	}

	.about-container>.button-on,
	.about-container>.button-off,
	.visual-container>.button-on,
	.visual-container>.button-off {
		width: auto;
	}

	.container,
	.project-container,
	.archive-container,
	.archive-fullscreen-container {
		left: 10px;
		right: 10px;
		top: 10px;
		width: auto;
	}

	.moreInfo-container.expand-on {
		width: 66vw;
		position: absolute;
		right: 0;
	}

	.project-image-container,
	.archive-scroll,
	.archive-fullscreen-image-container {
		position: relative;
		width: 100%;
		height: 80vh;
	}


	.moreInfo::before {
		content: "Info";
	}
}

@media (max-width: 1000px) {

	.portfolio-preview-on,
	.portfolio-preview {
		display: none;
	}

	.archive-container {
		columns: 2;
	}
}

@media (max-width: 600px) {
	.portfolio-row-item:nth-child(3) {
		display: none;
	}

	.portfolio-row {
		grid-template-columns: 2fr 1fr;
	}
}




.settings-container {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 19.5vw;
	z-index: 1000;
}