@media (max-width: 900px) {
	
	/* index */
	
	.indexElement {
		margin: 0 25px 0 25px;
		line-height: 25px;
	}
	
	/* content */

	#content {
		padding: 0 25px 0 25px;
		margin: 0;
		width: 100%;
		max-width: none;
	}

	.smallImage {
		width: 100%;
		height: 400px;
		margin: 5px 0 0 0;
	}

	/* project head */

	#headTitle {
		font-size: var(--bigText);
		padding: 0 25px 0 25px;
	}

	/* showcase */

	#showcaseLineTop,
	#showcaseLineOverlay,
	#showcaseLineBottom {
		display: none;
	}

	#showcaseContainer {
		flex-direction: column;
		padding: 75px 0 25px 0;
		height: auto;
	}

	.showcaseSlice {
		border: none;
		border-top: dashed var(--highlight) 1px;
		padding: 0 25px 0 25px;
	}

	.showcaseSlice:last-of-type {
		border-bottom: dashed var(--highlight) 1px;
	}

	.showcaseLink {
		margin: 0;
		height: 75vh;
	}

	.showcaseTitleContainer {
		top: 40%;
	}

	.showcaseTypeContainer {
		top: calc(40% + 75px);
	}

	.showcaseTitle {
		font-size: var(--largeText);
	}

	/* footer */

	#footer {
		position: relative;
		width: 100%;
		height: 100px;
		background-color: var(--background);
		border-top: dashed var(--highlight) 1px;
		mix-blend-mode: normal;
		z-index: 1;
	}

	#footerContent {
		width: 100%;
		height: 100%;
		padding: 0 25px 0 25px;
		flex-direction: row;
		border: none;
		gap: 0;
		justify-content: space-between;
		align-items: center;
	}

	.footerText {
		transform: rotate(0deg);
  		width: auto;
		height: var(--tinyText);
		color: var(--text);
	}

	.footerText:hover {
		color: var(--highlight);
	}
}

@media (max-width: 650px) {
	
	/* header */

	#header {
		padding: 0 25px 0 25px;
		gap: 25px;
	}

	#logo {
		height: 14px;
	}

	#aboutLink,
	#indexLink {
		font-size: var(--smallText);
	}

	.headerSeparator {
		bottom: calc(5px / 2);
		margin: 0 10px 0 10px;
	}

	/* index */

	#index {
		width: 100%;
		right: -100%;
	}

	/* project head */

	#headTitle {
		font-size: var(--largeText);
	}

	#headTextContent {
		width: 100%;
		max-width: none;
		left: 0;
		transform: none;
		bottom: 25px;
		padding: 0 25px 25px 25px;
	}

	/* content */

	h1 {
		font-size: var(--largeText);
	}
}

@media (max-height: 600px) {

	/* project head */

	#headSpacer {
		display: none;
	}

	#headContainer {
		position: relative;
		height: 500px;
	}

	#headTitle {
		position: absolute;
		bottom: calc(25px * 12);
	}

	#headTextContent {
		position: absolute;
		bottom: 25px;
	}
}