@font-face {
	font-family: "din condensed bold";
	src: url("/src/fonts/din-condensed-bold.ttf");
}

:root {
	--color-1: #d8332c;
	--color-2: #e4adcf;
	--color-3: #3b64ad;
	--color-4: #499f52;
	--color-5: #ea6a2f;
	--color-6: #f1c649;
	--color-7: #fef3dd;

	cursor: url("/src/images/cursor/SmileyNormaalZwart.png") 17 11, default;
	overflow-x: hidden;
}

#container {
	overflow-x: hidden;
}

body {
	background-color: var(--color-7);
	margin: 0;

	font-family: "din condensed bold";
}

a:hover,
button {
	cursor: url("/src/images/cursor/SmileyKnipoogZwart.png") 17 11, default;
}

#title {
	color: #444444;
	font-size: 60px;
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
}

#credits {
	color: #888888;
	font-size: 20px;
	text-align: center;
}

#work-main-div {
	width: 65vw;
	left: 17.5vw;

	position: sticky;
}

.work-p {
	color: #888888;
	text-align: center;
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 2.5vw;
}

#buttons {
	width: 65vw;
	margin-top: 2.5vw;

	margin-bottom: 30px;

	text-align: right;
}

#buttons button {
	font-family: "din condensed bold";
	font-size: 20px;
	color: var(--color-7);

	min-width: fit-content;
	width: 8vw;

	text-align: center;
	background-color: var(--color-1);

	border: none;
	border-radius: 50%;

	margin: 0;
	padding: 10px;
}

#prev {
	left: 0;
	position: absolute;
}

#work-video {
	width: 65vw;
	margin-bottom: 2.5vw;

	cursor: url("/src/images/cursor/SmileyKnipoogZwart.png") 17 11, default;
}

#work-split-div {
	width: 65vw;

	display: grid;
	grid-template-areas: "img p";
	grid-column-gap: 2.5vw;

	margin-bottom: 2.5vw;
}

#work-split-div img {
	width: 31.25vw;
	grid-area: img;
}

#work-split-div p {
	grid-area: p;
}

#about-main-div {
	width: 45vw;
	left: 27.5vw;

	position: sticky;
}

#about-split-div {
	width: 45vw;

	display: grid;
	grid-template-areas: "img p";
	grid-column-gap: 2.5vw;

	margin-bottom: 2.5vw;
}

#contact-main-div {
	width: 50vw;
	left: 25vw;

	position: sticky;
}

.big-image {
	width: 65vw;
	margin-bottom: 2.5vw;
}

#about-split-div img {
	width: 22.5vw;
	grid-area: img;
}

@media screen and (max-width: 700px) {
	#work-main-div {
		width: 90vw;
		left: 5vw;

		position: sticky;
	}

	#buttons {
		width: 65vw;
		margin-top: 2.5vw;

		margin-bottom: 10vh;

		text-align: right;
	}

	#buttons button {
		font-family: "din condensed bold";
		font-size: 20px;
		color: var(--color-7);

		min-width: fit-content;
		width: 8vw;

		text-align: center;
		background-color: var(--color-1);

		border: none;
		border-radius: 50%;

		margin: 0;
		padding: 10px;
	}

	#prev {
		left: 0;
		position: absolute;
	}

	#next {
		right: 0;
		position: absolute;
	}

	#work-video {
		width: 90vw;
		margin-bottom: 2.5vw;

		cursor: url("/src/images/cursor/SmileyKnipoogZwart.png") 17 11, default;
	}

	#work-split-div {
		width: 90vw;

		display: grid;
		grid-template-areas: "img p";
		grid-column-gap: 2.5vw;

		margin-bottom: 2.5vw;
	}

	#work-split-div img {
		width: 44vw;
		grid-area: img;
	}

	#about-main-div {
		width: 90vw;
		left: 5vw;

		position: sticky;
	}

	#about-split-div {
		width: 90vw;

		display: grid;
		grid-template-areas:
			"p"
			"img";
		grid-column-gap: 2.5vw;

		margin-bottom: 2.5vw;
	}

	#contact-main-div {
		width: 90vw;
		left: 5vw;

		position: sticky;
	}

	.big-image {
		width: 90vw;
		margin-bottom: 2.5vw;
	}

	#about-split-div img {
		width: 90vw;
	}
}