body {
	/* background-color: white; */
	/* cursor: crosshair; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.parent {
	width: 100%;
	height: 100%;
	transform: scaleX(0.94) scaleY(0.89);
	margin-top: 5px;
	transition: filter 3s ease-in-out;
}

/* Define CSS variables for common values */
:root {
    --transition-fast: 0.4s ease-in-out;
    --transition-slow: 1s ease-out;
    --transition-medium: 0.5s;
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-gray-1: rgb(216, 216, 216);
    --color-gray-2: rgb(204, 204, 204);
    --color-gray-3: rgb(187, 187, 187);
    --color-gray-4: rgb(156, 156, 156);
}

/* Combine similar classes with variables */
.blauw, .geel, .rood, .paars, .paarss {
    display: block;
    white-space: nowrap;
    float: left;
    transition: var(--transition-fast);
    background-size: cover;
    background-repeat: no-repeat;
    /* ...existing code... */
}

.blauw {
    background: var(--color-gray-1);
	background-image: url(img/waves.svg);
	background-position: left;
}

.blauw:hover {
	background-position: right;
}

.geel {
    background: var(--color-gray-2);
	background-image: url(img/berg.svg);
	background-position: right;
}

.geel:hover {
	background-position: left;
}

.rood {
    background: var(--color-gray-3);
	background-image: url(img/map.svg);
	background-position: top;
}

.rood:hover {
	background-position: bottom;
}

.paars {
	background: var(--color-white);
	background-image: url(img/rec.svg);
	background-position: top;
}

.paars:hover, .paarss:hover {
	background-position: bottom;
    /* ...existing code... */
}

.paarss {
	background: var(--color-gray-4);
	background-image: url(img/id.svg);
	background-position: center;
}

/* Remove common element styles */

/* h1 {
    margin: 63vh 0 0 52vw;
    font: 2em "scandia-line-web", sans-serif;
    font-weight: 500;
    position: absolute;
    z-index: 1;
    color: #ffffff;
    transition: 0.2s;
}

h1:hover {
    color: var(--color-white);
}

p {
    font-family: "scandia-line-web", sans-serif;
    font-weight: 900;
    font-size: 2.2vw;
    max-width: 30vw;
    word-wrap: break-word;
    z-index: 5;
}

mark {
    background-color: var(--color-white);
    color: var(--color-black);
    transition: 0.2s;
}

mark:hover {
    background-color: var(--color-black);
    color: var(--color-white);
} */

.quote {
	width: 30vw;
	margin: 2vw;
	display: block;
	word-wrap: break-word;
	z-index: 2;
}

#een p {
	font-family: "scandia-line-web",sans-serif;
	font-weight: 900;
	font-size: 2.2vw;
	max-width: 30vw;
	word-wrap: break-word;
	z-index: 5;
}

#een {
	width: 34vw; 
	height: 50vh;
	max-width: 34vw;
	display: block;
}

#twee {
	width: 34vw; 
	height: 20vh; 
	margin-top: 50vh; 
	position: absolute;
}

#een:hover {
	height: 10vh;
	filter: blur(0px);
}

#een:hover + #twee{
	height: 70vh;
	margin-top: 10vh;
}

#twee:hover {
	height: 70vh;
	margin-top: 10vh;
}

#drie {
	width: 26vw;
    height: 35vh;
    position: absolute;
    margin-left: 42vw;
}

#vier {
	width: 30vw;
    height: 35vh;
    position: absolute;
    margin-left: 56vw;
	margin-right: 14vw;
}

#drie:hover {
	width: 26vw;
}

#drie:hover + #vier{
	width: 19vw;
	margin-left: 68vw;
}

#vier:hover {
	width: 18vw;
	margin-left: 68vw;
}

#vier:hover + #drie{
	width: 26vw;
}


#vijf {
	width: 42vw; 
	height: 32vh;
	transition: 0.5s;
	z-index: 1;
}

#zes {
	width: 0vw; 
	height: 32vh;
	transition: 0.5s;
	position: absolute;
	margin-left: 84vw;
	margin-top: 50vh;
	z-index: 1;
}

#vijf:hover {
	width: 30vw;
}

#vijf:hover + #zes {
	width: 12vw;
	margin-left: 72vw;
}

#zes:hover {
	width: 12vw;
	margin-left: 72vw;
}

#zes:hover + #vijf {
	width: 30vw;
}

#zeven {
	width: 25vw; 
	height: 32vh; 
	position: absolute; 
	margin-top: 68vh;
}

#acht {
	width: 21vw; 
	height: 32vh; 
	position: absolute; 
	margin-top: 68vh; 
	margin-left: 25vw;
	z-index: 3;
}

#zeven:hover {
	width: 6vw;
}

#zeven:hover + #acht{
	width: 40vw;
	margin-left: 6vw;
}

#acht:hover {
	width: 40vw;
	margin-left: 6vw;
}

#acht:hover + #zeven{
	width: 6vw;
}

#negen {
	pointer-events: none;
	position: absolute;
	z-index: 5;
	height: 100vh;
	width: 0vw;
	transition: 0.2s;
}

#tien {
	width: 22vw; 
	height: 18vh; 
	position: absolute; 
	margin-top: 82vh;
	margin-left: 46vw;
}

#elf {
	width: 26vw; 
	height: 18vh; 
	position: absolute; 
	margin-top: 82vh;
	margin-left: 58vw;
	z-index: 0;
}

#tien:hover {
	width: 22vw;
}

#tien:hover + #elf{
	width: 16vw;
	margin-left: 68vw;
}

#elf:hover {
	width: 16vw;
	margin-left: 68vw;
}

#elf:hover + #tien{
	width: 22vw;
}

#twaalf {
	width: 16vw; 
	height: 13vh; 
	position: absolute; 
	margin-top: 85vh; 
	margin-left: 84vw
}

#dert {
	width: 16vw; 
	height: 5vh; 
	position: absolute; 
	margin-top: 95vh; 
	margin-left: 84vw
}

#twaalf:hover {
	height: 13vh;
}

#twaalf:hover + #dert{
	height: 12vh;
	margin-top: 88vh;
}

#dert:hover {
	height: 12vh;
	margin-top: 88vh;
}

#dert:hover + #twaalf{
	height: 13vh;
}

.click:active + #negen {
	width: 100vw;
}

#aboutp {
	position: absolute;
	pointer-events: none;
	width: calc(178px*1.2);
	transition: width 0.1s;
	z-index: 5;
}

#workp {
	position: absolute;
	pointer-events: none;
	width: calc(113px*1.2);
	transition: width 0.1s;
	z-index: 5;
}

#contactp {
	position: absolute;
	pointer-events: none;
	width: calc(110px*1.2);
	transition: width 0.1s;
	z-index: 5;
}

#vijf:hover ~ #aboutp{
	width: calc(178px*1.2);
	animation-name: bonst;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#zes:hover ~ #aboutp{
	width: calc(178px*1.2);
	animation-name: bonst;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#drie:hover ~ #workp{
	width: calc(113px*1.2);
	animation-name: bonst;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#vier:hover ~ #workp{
	width: calc(113px*1.2);
	animation-name: bonst;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#zeven:hover ~ #contactp{
	width: calc(110px*1.2);
	animation-name: bonst;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

#acht:hover ~ #contactp{
	width: calc(110px*1.2);
	animation-name: bonst;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

/* Cursor met geheugen (JS): .is-live volgt de cursor in de zone,
   .is-locked blijft staan waar hij is achtergelaten. */
#aboutp.is-live, #aboutp.is-locked {
	width: calc(178px*1.2);
}

#workp.is-live, #workp.is-locked {
	width: calc(113px*1.2);
}

#contactp.is-live, #contactp.is-locked {
	width: calc(110px*1.2);
}

/* Consolidate cursor properties using variables */
#drie, #vier, #zeven, #acht, #vijf, #zes, h1,
#aboutp, #workp, #contactp {
    cursor: none !important;
}

@keyframes bonst {
	0% {filter: blur(0px);}
	30% {filter: blur(0px);}
	50% {filter: blur(2px);}
	52% {filter: blur(1.5px);}
	54% {filter: blur(3px);}
	58% {filter: blur(1.5px);}
	70% {filter: blur(0.5px);}
	100% {filter: blur(0px);}
}

/* Reintroduce common element styles */
h1 {
    margin: 63vh 0 0 52vw;
    font: 2em "scandia-line-web", sans-serif;
    font-weight: 500;
    position: absolute;
    z-index: 1;
    color: #ffffff;
    transition: 0.2s;
}

h1:hover {
    color: var(--color-white);
}

p {
    font-family: "scandia-line-web", sans-serif;
    font-weight: 900;
    font-size: 2.2vw;
    max-width: 30vw;
    word-wrap: break-word;
    z-index: 5;
}

mark {
    background-color: var(--color-white);
    color: var(--color-black);
    transition: 0.2s;
}

mark:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}