/* ====
Theme Name: Jeroenvanderwiel.com Theme
Theme URI: https://www.jeroenvanderwiel.com
Description: WP Theme voor jeroenvanderwiel.com
Version: 1.0
Author: Jeroen van der Wiel
Tags: webdesign,webdevelopment,wordpress

==== */

:root
{
  --red-lighter: #DB86A3;
  --red-regular: #8A173E;
  --red-darker: #4E061E;
}

*
{
  box-sizing: border-box;
}

body,html
{
	margin: 0;
	font-family: 'Roboto', 'Roboto', sans-serif;
	font-optical-sizing: auto;
	font-size: 112.5%;
	line-height: 1.25em;
	color: var(--red-darker);
}

nav
{
	display: flex;
	position: fixed;
	top: clamp(20px, 10dvh, 100px);
	padding-left: clamp(1rem, 10dvw, 1000px);
	padding-right: clamp(1rem, 10dvw, 1000px);
	width: 100%;
	align-items: center;
	z-index: 9001; /* It's over 9000! */
	justify-content: space-between;
	mix-blend-mode: screen;
	
	p
	{
		font-family: "Signika Negative", sans-serif;
		font-size: .75rem;
		user-select: none;
		pointer-events: none;
	}
}

h1,h2,h3,h4,h5
{
  text-transform: uppercase;
  line-height: 1em;
}

h1
{
	color: var(--red-regular);
	font-weight: 900;
	font-size: clamp(2rem, calc(1rem + 9.26dvh), 120px);
}

h2
{
	color: var(--red-darker);
	font-weight: 900;
	font-size: clamp(1.5rem, calc(1rem + 6.48dvh), 90px);
	line-height: 1em;
}

h3
{
	color: var(--red-darker);
	font-weight: 900;
	font-size: clamp(1rem, calc(1rem + 2.31dvh), 45px);
	line-height: 1em;
}

h4
{
  color: var(--red-regular);
  font-size: clamp(1rem, calc(1rem + .37dvh), 24px);
}

strong
{
  font-family: "Signika Negative", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 900;
}

main
{
	position: relative;

	section#title
	{
		min-height: 80dvh;
		display: flex;
		position: relative;
		align-items: center;
		padding-left: clamp(1rem, 10dvw, 1000px);
		padding-right: clamp(1rem, 10dvw, 1000px);
		
		#title-stripes
		{
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			
			svg
			{
				position: absolute;
				left: -1rem;
				right: -1rem;
			}
		}
	}
	
	section#work-cards
	{
		display: flex;
		align-items: center;
		position: relative;
		min-height: 90dvh;
		padding-left: clamp(1rem, 15dvw, 2000px);
		padding-right: clamp(1rem, 15dvw, 2000px);
		
		.work-card
		{
			flex: 1;
			position: relative;
			
			>*
			{
				position: relative;
				z-index: 8;
			}
		}
		
		.work-card::after
		{
			content: '';
			display: block;
			top: -2rem;
			left: 2rem;
			bottom: -2rem;
			right: 2rem;
			background: #FEB37A;
			position: absolute;
			transform: skewY(-2deg);
			transition: all 250ms ease-in-out;
		}
		
		.work-card:hover::after
		{
			right: 12rem;
		}
	}
	
	#about-stripes
	{
		display: block;
		position: relative;
		top: -15dvh;
		height: 15dvh;
		left: 0px;
		right: 0px;

		svg
		{
			position: absolute;
			left: -1rem;
			right: -1rem;
		}
	}
	
	svg#about_colourblock
	{
		transform: translateY(-7.5dvh);
		user-select: none;
		pointer-events: none;
		z-index: -1;
	}
	
	section#about
	{
		position: relative;
		transform: translateY(calc( -7.5dvh - 10px ));
		padding-left: clamp(1rem, 15dvw, 2000px);
		padding-right: clamp(1rem, 15dvw, 2000px);
		background: var(--red-regular);
		display: flex;
		gap: clamp(2rem, 5dvw, 200px);
		align-items: center;
		justify-content: space evenly;
		
		div.image-wrapper
		{
			flex-basis: 30rem;
			aspect-ratio: 3/4;
			position: relative;
			
			img
			{
				height: 100%;
				width: 100%;
				position: absolute;
				object-fit: cover;
				object-position: center;
				transform: skewY(-2deg);
			}
		}
		
		article
		{
			color: white;
		}
	}
	
	section#about::after
	{
		content: '';
		position: absolute;
		height: calc(7.5dvh + 20px);
		left: 0px;
		right: 0px;
		bottom: calc(-7.5dvh - 10px);
		width: 100%;
		background: var(--red-regular);
	}
	
	footer
	{
		display: flex;
		flex-direction: column;
		position: relative;
		background: var(--red-regular);

		#footer-stripes
		{
			display: block;
			position: absolute;
			top: -30dvh;
			left: 0px;
			right: 0px;
			
			svg
			{
				position: absolute;
				left: -1rem;
				right: -1rem;
			}
		}
		
		section#colophon
		{
			z-index: 5;
			padding: 2rem clamp(1rem, 10dvw, 1000px);
			margin-top: auto;
			
			a
			{
				text-align: center;
				color: white;
				font-family: "Signika Negative", sans-serif;
			}
		}
	}
}