* {
	font-family: "Outfit", sans-serif;
	scroll-behavior: smooth;
	overscroll-behavior: none;
}

html {
	overflow-x: hidden;
	font-size: 16px;
}

/* html.isMobile { */
	/* font-size: 30px; */
/* } */

body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: space-between;
	min-height: 100vh;
}

p[data-textId="categories"] {
	width: 100%;
	text-align: center;
	color: white;
	font-weight: bold;
	filter: drop-shadow(2px 2px 0px #403353);
}

#categoryArticles {
	position: relative;
}

#categoryArticles > div {
	top: 0;
	left: 0;
	transition: transform 1s ease;
}

#categories {
	width: 100%;
	display: flex;
	gap: 32px;
	justify-content: center;
	align-items: center;
	filter: url("#categoriesDisplacementFilter");
}

#categories > a > div {
	padding: 16px;
	margin: 0;
	border-radius: 48px;
	filter: drop-shadow(3px 3px 0px #403353) opacity(60%);
	transition: transform 0.5s ease, filter 0.5s ease;
	cursor: pointer;
	height: 115.2px;
}

#categories > a > div.selected,
#categories > a > div:hover {
	transform: scale(110%);
	filter: drop-shadow(3px 3px 0px #403353) opacity(100%);
}

@property --percentage {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false;
}

#categories > a > div:hover > div,
#categories > a > div.selected > div {
	--percentage: 100%;
}

#categoryCode > div {
	background-image: url("../images/categoryCode.svg"),
					  linear-gradient(90deg, white 0%, white var(--percentage), #fad6b8 var(--percentage), #fad6b8 100%);
}

#categoryArt > div {
	background-image: url("../images/categoryArt.svg"),
					  linear-gradient(90deg, white 0%, white var(--percentage), #fad6b8 var(--percentage), #fad6b8 100%);
}

#categoryCommunication > div {
	background-image: url("../images/categoryCommunication.svg"),
					  linear-gradient(90deg, white 0%, white var(--percentage), #fad6b8 var(--percentage), #fad6b8 100%);
}

#categories > a > div > div {
	background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
	position: relative;
	
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	
	transition: --percentage 1s ease, filter 0.5s ease;
	
	font-weight: 900;
	text-align: center;
	font-size: 2rem;
	margin: 0;
	line-height: 1.6rem;
	transform: scaleY(200%) translateY(25%);
}

.articleMedia {
	float: right;
	display: flex;
	flex-direction: column;
	align-items: center;
}

article:nth-of-type(2n) .articleMedia {
	float: left;
}

.articleMedia > div, .horizontalLayout > div {
	margin-left: 32px;
	margin-bottom: 32px;
	border-radius: 8px;
}

.articleMediaGap {
	height: 32px;
}

.gridLayout > div {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

article:nth-of-type(2n) .articleMedia > div,
article:nth-of-type(2n) .horizontalLayout > div {
	margin-left: 0;
	margin-right: 32px;
}

.articleMedia > div.horizontalLayout {
	margin: 0 !important;
}

.horizontalLayout {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

@media screen and (max-width: 1400px) {
	.horizontalLayout:not(.enforceWrap) {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

.fullscreenable {
	cursor: zoom-in;
	outline: 3px solid rgba(250, 214, 184, 0);
	transition: outline 0.5s ease;
	overflow: hidden;
	border-radius: 8px;
	width: fit-content;
	height: fit-content;
}

.fullscreenable img {
	transition: transform 0.5s ease;
	width: 500px;
	display: block;
}

.fullscreenable.thin img {
	width: 300px;
}

.articleMedia p {
	text-align: center;
	margin-bottom: 0;
	max-width: 500px;
}

.fullscreenable.thin + p {
	max-width: 300px;
}

.fullscreenable:hover {
	outline: 3px solid white;
}

.fullscreenable:hover img {
	transform: scale(105%);
}

#fullscreenImage {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 150;
	cursor: zoom-out;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	filter: opacity(0%);
	transition: filter 0.7s ease;
}

#fullscreenImage img {
	width: 95vw;
	height: auto;
	max-width: 95vw;
	max-height: 95vh;
	object-fit: contain;
	pointer-events: none;
}

#fullscreenImage p {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20px;
	color: white;
	background: rgba(0, 0, 0, 0.7);
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
}

.modelViewerWrapper {
	display: flex;
	overflow: hidden;
}

.modelViewerWrapper > div {
	background: #242234;
	height: 400px;
	width: 32px;
	position: relative;
	cursor: pointer;
	user-select: none;
	transition: background 0.35s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modelViewerWrapper > div:hover {
	background: #403353;
}

.modelViewerWrapper > div:active {
	background: white;
}

.modelViewerWrapper > div > p {
	font-size: 1.7rem;
	margin: 0;
}

.modelViewerWrapper > model-viewer {
	background: rgba(50, 50, 50, 0.35);
}

.emptyArticle {
	display: none;
}

.codeSnippet {
	font-family: "Inconsolata", monospace;
	background: rgb(50, 50, 50);
	border-radius: 4px;
	padding: 0 0.25rem;
}

#background {
	position: fixed;
	width: 120vw;
	height: 120vh;
	overflow: hidden;
	background-image: url("../images/stars.png");
	filter: brightness(70%);
	z-index: -2;
	pointer-events: none;
	image-rendering: pixelated;
}

#vignette {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	
	background: linear-gradient(0deg,  rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0) 100%),
				linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0) 100%),
				linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0) 100%),
				linear-gradient(270deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50px, rgba(0, 0, 0, 0) 100%);
	filter: opacity(40%);
	pointer-events: none;
	z-index: -1;
}

header {
	width: 100vw;
	height: 3rem;
	background: rgba(0, 0, 0, 1);
	z-index: 100;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	position: fixed;
	top: 0;
	left: 0;
}

#centeredLinks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

#linkPadding {
	width: 170px;
}

header a, header a > * {
	color: white !important;
}

#languageSwitch, #themeSwitch {
	position: absolute;
	cursor: pointer;
	height: 32px;
	width: 32px;
	right: 16px;
	top: calc(1.5rem - 16px);
	border-radius: 50%;
	transition: outline 0.5s ease, transform 0.25s ease;
	outline: 3px solid rgba(250, 214, 184, 0);
}

.isMobile #languageSwitch, .isMobile #themeSwitch {
	height: 48px;
	width: 48px;
	font-size: 48px;
}

#fontSizeChange {
	justify-self: end;
	font-size: 22px;
	margin-right: 64px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	height: 100%;
	padding-top: 18px;
}

.isMobile #fontSizeChange span {
	pointer-events: none;
	color: transparent !important;
}

#themeSwitch {
	right: auto;
	left: 16px;
	/* background: rgba(255, 255, 255, 0.3); */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

#languageSwitch:hover {
	outline: 3px solid white;
	transform: scale(115%) rotate(10deg);
}

#languageSwitch:active {
	transform: scale(100%) rotate(10deg);
}

#themeSwitch:hover {
	outline: 3px solid white;
	transform: scale(115%) rotate(-20deg);
}

#themeSwitch:active {
	transform: scale(100%) rotate(-20deg);
}


a:not(.unstyled), a:not(.unstyled) > * {
	color: #8f5ed6;
	transition: color 0.7s ease;
}

a {
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

a span {
	transition: color 0.7s ease;
}

a:hover span {
	color: #fad6b8 !important;
}

a span::after {
	content: "";
	background: #8f5ed6;
	height: 0.8px;
	width: 0;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: width 1s ease, background 0.7s ease;
}

header a span::after, .articleTitlePadding a span::after {
	background: white !important;
	z-index: 2;
}

a:hover span::after {
	width: 100%;
	background: #fad6b8 !important;
}

.noisyBox {
	width: min(60rem, 100%);
	height: 380px;
	color: white;
}

.noisyBox > * {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.noisyBox > svg {
	left: 47%;
	top: 47%;
}

#mainBoxAndArrow {
	position: fixed;
	width: 100vw;
	height: calc(100vh - 3rem);
}

.isMobile #mainBoxAndArrow {
	height: calc(50vh - 3rem);
}

#mainBox {
	position: absolute;
	left: 50%;
	top: 336px;
	transform : translate(-50%, -50%);
	height: 368px;
}

.isMobile #mainBox {
	height: 900px;
	top: 700px;
}

#mainBox > div::before, #mainBox > div::after {
	content: "";
	background-image: url("../images/ornamentStars.svg");
	background-size: 114px 141px;
	width: 114px;
	height: 141px;
	z-index: 10;
	position: absolute;
	image-rendering: pixelated;
	filter: drop-shadow(0px 0px 1vh rgba(255, 255, 255, 0.25));
}

#mainBox > div::before {
	transform: translate(-50%, -50%);
	left: 50px;
	top: 50px;
}

#mainBox > div::after {
	transform: translate(50%, 50%) rotate(180deg);
	right: 70px;
	bottom: 10px;
}

#mainBox > svg {
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

#mainBox > div {
	text-align: center;
	width: 70%;
}

#mainBox.alignLeft > div p, #mainBox.alignLeft > div h2 {
	max-width: calc(100% - 190px);
	margin-left: 80px;
}

#mainBox > div h2 {
	font-size: 2.5em;
	margin-bottom: 0;
}

#portfolioTitle {
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
	/* max-width: min(100%, 600px); */
	height: fit-content;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	image-rendering: pixelated;
	padding: 0;
	transform-origin: center;
}

#portfolioTitle > img {
	width: min(95vw, 1000px);
	padding: 0;
	margin: 0;
}

#portfolioTitle > div {
	background-image: url('../images/titleBg.png');
	image-rendering: pixelated;
	background-size: 4%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	mask-image: url("../images/portfolioMask.png");
	mask-size: min(95vw, 1000px) auto;
	mask-repeat: repeat-x;
	animation: 35s infinite linear backgroundScroll;
}

@keyframes backgroundScroll {
	0% { background-position: 0% 0%; }
	100% { background-position: 100% 500%; }
}

#dialogBox {
	display: flex;
	justify-content: center;
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
	width: min(100%, 700px);
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.isMobile #dialogBox {
	width: 95%;
}

#firstArrow {
	position: absolute;
	bottom: -7%;
	left: 50%;
	transform: translateX(-50%);
}

#dialogBox > img:first-of-type {
	width: 100%;
	image-rendering: pixelated;
}

#spaceBar, #resetDialog {
	image-rendering: pixelated;
	position: absolute;
	top: 7%;
	left: 0;
	width: 100%;
	z-index: 100;
	pointer-events: none;
}

#resetDialog {
	background-image: url('../images/reset.png');
	background-repeat: no-repeat;
	background-size: 100%;
	height: 100%;
	z-index: 20;
	image-rendering: pixelated;
}

#dialogBox:hover #resetDialog {
	background-image: url('../images/resetPressed.png');
}

#dialogBoxPortrait {
	position: absolute;
	background-image: url('../images/faces/smile.gif');
	background-size: cover;
	position: absolute;
	right: 23px;
	top: 35px;
	height: calc(100% - 70px);
	aspect-ratio: 1;
	/* border-radius: 40%; */
	image-rendering: pixelated;
}

#dialogBoxDialog {
	position: absolute;
	left: 35px;
	top: 35px;
	height: calc(100% - 75px);
	width: calc(68%);
}

#dialogBoxDialog p {
	color: white;
	margin: 0;
	overflow-y: scroll;
	max-height: 110%;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#dialogBoxDialog p, #dialogBoxDialog span {
	font-family: "Jersey 10", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.2rem;
}

.isMobile #dialogBoxDialog p, .isMobile #dialogBoxDialog span {
	font-size: 1.5rem;
}

.mainBoxSpacer {
	width: 10px;
	height: 100vh;
}

#portrait, #mainBox > div > img:not(#phoneNumber) {
	margin: 16px;
	margin-right: 32px;
	width: 176px;
	height: 176px;
	float: inline-end;
	/* border-radius: 40%; */
	image-rendering: pixelated;
	filter: drop-shadow(0 4px 0 #242234) drop-shadow(4px 0 0 #242234) drop-shadow(0 -4px 0 #242234) drop-shadow(-4px 0 0 #242234);
	/* background-image: linear-gradient(0deg,rgba(255, 174, 107, 1) 0%, rgba(250, 214, 184, 1) 100%); */
}
	
#portrait {
	background-image: url('../images/faces/smile.png'),
					  linear-gradient(0deg,rgba(255, 174, 107, 1) 0%, rgba(250, 214, 184, 1) 100%);
	background-size: cover;
	margin-top: 32px;
	position: relative;
}

#dialogBoxPortrait:hover {
	background-image: url('../images/faces/wink.png');
}

#portrait:hover {
	background-image: url('../images/faces/wink.png'),
					  linear-gradient(0deg,rgba(255, 174, 107, 1) 0%, rgba(250, 214, 184, 1) 100%);
}

#portrait div, #dialogBoxPortrait div {
	position: absolute;
	filter: opacity(0%);
}

#portrait:hover div, #dialogBoxPortrait[style=""]:hover div {
	animation: winkStarPosition 2s ease-out 1 forwards;
}

#portrait img, #dialogBoxPortrait img {
	width: 16px;
	transform-origin: 3.2px 3.2px;
}

#portrait:hover img, #dialogBoxPortrait[style=""]:hover img {
	animation: winkStarRotation 2s linear 1 forwards;
}

@keyframes winkStarPosition {
	0%   { top: 38%; left: 60%; filter: opacity(100%); }
	25% { top: 20%; left: 90%; filter: opacity(100%); }
	80% { top: 20%; left: 90%; filter: opacity(100%); }
	100% { top: 20%; left: 90%; filter: opacity(0%); }
}

@keyframes winkStarRotation {
	0%   { transform: rotate(0deg) }
	100%   { transform: rotate(-360deg) }
}

.arrow {
	width: fit-content;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	transition: filter 0.25s ease;
}

.arrow svg {
	width: 48px;
	animation: bobble 0.8s ease-in-out infinite;
	animation-play-state: paused;
	fill: #ffdaba;
	transition: fill 0.25s ease;
}

.arrow:hover svg {
	animation-play-state: running;
}

.arrow mask > rect {
	transform: scaleY(0%);
	transition: transform 0.5s ease;
}

.arrow:hover mask > rect {
	transform: scaleY(100%);
}

.arrow use:last-of-type {
	stroke: #ffdaba;
	stroke-width: 8px;
	transition: stroke 0.25s ease;
}

@keyframes bobble {
	0%   { transform: translateY(0) }
	50%  { transform: translateY(16px) }
	100% { transform: translateY(0) }
}

.spacer {
	height: 160px;
}

.halfSpacer {
	height: 80px;
}

article {
	width: 100vw;
	color: white;
}

article > div:first-of-type {
	display: flex;
	white-space: nowrap;
	overflow: visible;
	gap: 0;
}

article:nth-of-type(2n) > div:first-of-type {
	flex-direction: row-reverse;
}

article > div:first-of-type > img {
	height: 3rem;
	z-index: -1;
	filter: opacity(70%);
	/* backdrop-filter: blur(3px); */
}

article:nth-of-type(2n) > div:first-of-type > img {
	transform: scaleX(-100%);
}

.articleTitlePadding {
	height: 3rem;
	width: 30vw;
	min-width: 384px;
	background: rgba(0, 0, 0, 0.7);
	/* backdrop-filter: blur(3px); */
	padding-left: 160px;
	display: flex;
	flex-direction: column;
}

article:nth-of-type(2n) .articleTitlePadding {
	padding-left: 0;
	padding-right: 160px;
	align-items: flex-end;
}

.articleTitlePadding h2, .articleTitlePadding h3 {
	z-index: 15;
	margin-bottom: 0;
}

.articleTitlePadding h2 {
	display: inline-block;
	color: white;
}

.articleTitlePadding h3 {
	margin-top: 0;
	font-weight: 250;
	color: gray;
	font-size: 1.15rem;
}

.articleTitlePadding a {
	width: fit-content;
}

article > div:last-of-type {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(2px);
	padding: 48px 160px 0 160px;
	overflow: hidden;
}

article > div:last-of-type li {
	margin-bottom: 1rem;
}

.logos {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	min-width: 64px;
}

.logos > div {
	position: relative;
}

.logos img {
	height: 64px;
	filter: drop-shadow(0 0 0 rgba(250, 214, 184, 0))
			drop-shadow(0 0 0 rgba(250, 214, 184, 0))
			drop-shadow(0 0 0 rgba(250, 214, 184, 0))
			drop-shadow(0 0 0 rgba(250, 214, 184, 0))
			drop-shadow(0 0 0 rgba(250, 214, 184, 0))
			drop-shadow(0 0 0 rgba(250, 214, 184, 0))
			drop-shadow(0 0 0 rgba(250, 214, 184, 0));
	transition: filter 0.5s ease, transform 0.25s ease;
	cursor: help;
	/* image-rendering: pixelated; */
}

.logos img:hover {
	filter: drop-shadow(1px 0px 0 white)
			drop-shadow(1px 1px 0 white)
			drop-shadow(0px 1px 0 white)
			drop-shadow(-1px 1px 0 white)
			drop-shadow(-1px 0px 0 white)
			drop-shadow(-1px -1px 0 white)
			drop-shadow(0px -1px 0 white)
			drop-shadow(1px -1px 0 white);
	transform: scale(115%) rotate(-5deg);
}

.logos > div > div {
	z-index: 17;
	position: absolute;
	top: 80px;
	right: 50%;
	transform: translateX(50%);
	font-size: 1rem;
	background: rgba(0, 0, 0, 1);
	outline: 4px double white;
	filter: opacity(0%);
	border-radius: 8px;
	padding: 8px;
	transition: filter 0.35s ease;
	pointer-events: none;
	width: 160px;
	text-align: center;
}

.logos img:hover + div {
	filter: opacity(100%);
}

@media screen and (max-width: 1000px) {
	.articleTitlePadding {
		padding-left: 48px;
	}

	article:nth-of-type(2n) .articleTitlePadding {
		padding-left: 0;
		padding-right: 48px;
	}

	article > div:last-of-type {
		padding: 48px 48px 0 48px;
	}
}

@media screen and (max-width: 800px) {
	.articleMedia {
		float: none;
		width: 100%;
	}
	
	.horizontalLayout {
		justify-content: center;
	}
}

.isMobile footer img, .isMobile footer > div:last-of-type {
	display: none;
}

.iframeWrapper {
	overflow: hidden;
	position: relative;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
}

iframe {
	box-sizing: border-box;
	z-index: 50;
	border: none;
	transform: scale(101%);
	display: block;
}

.iframeWithBackground {
	background: white;
}

.instructions {
	position: absolute;
	bottom: 38px;
	right: 45px;
	z-index: 60;
	background: #1eaed3;
	width: 38px;
	height: 38px;
	font-size: 28.8px;
	text-align: center;
	cursor: help;
	color: white;
}

.instructions div {
	position: absolute;
	bottom: 45px;
	right: -40px;
	z-index: 65;
	font-size: 1rem;
	background: rgba(0.5, 0.5, 0.5, 0.75);
	filter: opacity(0%);
	border-radius: 8px;
	padding: 0.5rem;
	transition: filter 0.35s ease;
	pointer-events: none;
	width: 15rem;
}

.instructions:hover div {
	filter: opacity(100%);
}

footer {
	width: 100vw;
	height: 6rem;
	background: rgba(0, 0, 0, 1);
	border-top: 3.2px solid black;
	z-index: 90;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	position: relative;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

footer p {
	margin: 8px;
}

footer > div {
	display: flex;
	column-gap: 64px;
	row-gap: 0;
	line-height: 0;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: center;
}

footer img {
	position: absolute;
	height: 100%;
	left: 0;
	bottom: 0;
	/* padding: 8px 0; */
	box-sizing: border-box;
	filter: invert(100%) drop-shadow(4px 0 0 #00000066) drop-shadow(4px 0 0 #00000022);
}

footer img:last-of-type {
	left: auto;
	right: 0;
}

footer > div:last-of-type {
	content: "";
	position: absolute;
	top: 0;
	left: 5.5rem;
	width: calc(100% - 6.7rem);
	height: 0.3rem;
	background: white;
}

#pageTitle {
	font-size: 2em;
	color: white;
	position: absolute;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(3px 3px 0px #403353);
	z-index: 5;
}

#timeline {
	overflow: hidden;
	position: relative;
	color: white;
	height: max(100vh, 1120px);
	width: min(640px, 100vw);
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
}

#timeline > svg {
	transform: scale(105%);
	filter: drop-shadow(1px 1px 0px #403353)
			drop-shadow(1px 1px 0px #403353)
			drop-shadow(1px 1px 0px #403353);
}

#timeline > svg path {
  animation: dashmove 4s linear infinite;
}

@keyframes dashmove {
  to {
    stroke-dashoffset: -70;
  }
}

#timeline > div {
	position: absolute;
	transform-origin: bottom center;
	width: 320px;
}

.isMobile #timeline > div {
	width: 640px;
}

#timeline > div:nth-of-type(2n-1) {
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
	filter: drop-shadow(3px 3px 0px #403353);
}

.accentColor {
	color: #fad6b8;
}

#timeline > div:nth-of-type(2n) {
	background: rgba(0, 0, 0, 0.7);
	border-radius: 8px;
	padding: 1rem;
	transform: translateX(-50%);
}

#timeline ul {
	padding: 0 0 0 1rem;
	margin: 0;
}

#timeline > div:nth-of-type(1) {
	transform: translate(-50%, -100%) rotate(-18deg);
	top: 26%;
	left: calc(50% - 16%);
}

#timeline > div:nth-of-type(2) {
	top: 28.5%;
	left: calc(50% - 32%);
}

#timeline > div:nth-of-type(3) {
	transform: translate(-50%, -100%) rotate(18deg);
	top: 52%;
	left: calc(50% + 16%);
}

#timeline > div:nth-of-type(4) {
	top: 55.5%;
	left: calc(50% + 32%);
}

#timeline > div:nth-of-type(5) {
	transform: translate(-50%, -100%) rotate(-18deg);
	top: 78%;
	left: calc(50% - 16%);
}

#timeline > div:nth-of-type(6) {
	top: 82%;
	left: calc(50% - 32%);
}

#timeline > div img {
	position: absolute;
	width: 112px;
	left: 0%;
	top: 0%;
}

#timeline > div > p {
	margin: 0;
}

#phoneNumber {
	display: inline;
	height: 0.75rem;
	margin-left: 0.2rem;
}

@media only screen and (hover: none) and (pointer: coarse) {
	.noisyBox {
		margin-top: 128px;
		height: 50rem;
	}
	
	.mainBoxSpacer {
		height: 848px;
	}
	
	#portrait, #mainBox > div > img:not(#phoneNumber) {
		float: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	#mainBox > div {
		width: 60vw;
	}
	
	#mainBox > div p, #mainBox > div h2 {
		max-width: 100% !important;
		width: 100%;
		margin-left: 0 !important;
		text-align: center;
	}
	
	#categories {
		gap: 0;
	}
	
	#categories > a > div > div {
		font-size: 1.4rem;
		line-height: 1.2rem;
	}
	
	.instructions {
		display: none;
	}
	
	#timeline > div:nth-of-type(2n) {
		left: 50% !important;
	}
	
	footer p {
		transform: translateX(1rem);
	}
}

.transparent {
	color: rgba(0, 0, 0, 0);
	pointer-events: none;
}