* {
	box-sizing: border-box;
	image-rendering: pixelated;
}

html {
	height: 100%;
	filter: g;
	/* filter: grayscale(1) contrast(1.5); */
}


body {
	line-height: 1 !important;
	background-color: #333;
	color: #fff;
	margin: 0 !important;
	background-position: 0px 0px;
	background-size: cover;
	font-family: 'Neue plak', sans-serif;

	--gap: 40px;
	/* perspective: 500px; */
}

#model {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 100vh;
	width: 50vw;
	pointer-events: none;
	--poster-color: transparent !important;
  }

@media(max-width: 768px) {
	#model {
		width: 100vw !important;
	}
}

a {
	background-color: transparent;
	color: #fff;
	text-decoration: underline;
}

a.soundboard-button {
	color: white;
	text-decoration: none;
	background: url(./soundboard/soundboard-icon.png);
	height: 300px;
	max-width: 400px;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-shadow: 2px 2px 0 #000, 1px 1px 0 #000;
}

a.soundboard-button:hover {
	text-shadow: 2px 2px 0 #000, 4px 4px 0 #000;
}




/* -------------------------------------------------------------------------- */
/*                                   Header                                   */
/* -------------------------------------------------------------------------- */
header.background-video {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	border-radius: 0px;
	image-rendering: pixelated;
}

.background-video video {
	position: absolute;
	height: 100vh;
	width: 100vw;
	object-fit: cover;
	/* mix-blend-mode: darken; */
}

.image {
	display: block;
	width: 200px;
	height: 200px;
	position: a;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	flex: 0 0 auto;
}

.center img {
	position: absolute;
	top: 0;
}

.click-4-sound img {
	transform: scale(1.9);
	transition: all .5s;
	animation: spin 10s infinite linear;
	/* mix-blend-mode: exclusion; */
	color: white;
	width: 100%;filter: invert(1);
}


.image.center {
	cursor: pointer;
}

.click-4-sound {
	transition: all .5s;
	transform-origin: center;
}

.click-4-sound.hidden {
	transform: scale(.9) !important;
	opacity: 0;
}

.lipje {
	/* animation: grow-shrink 5s infinite alternate; */
}

@keyframes grow-shrink {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}

@keyframes spin {
	from {
		transform: scale(1.9) rotateZ(0deg);
	}

	to {
		transform: scale(1.9) rotateZ(360deg);
	}
}


.link {
	font-family: 'Neue plak', sans-serif;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 1.7px;
	text-decoration: none;
	text-transform: uppercase;
}

.fat-video-link {
	position: relative;
	font-family: 'Neue plak compressed', sans-serif;
	font-size: 58px;
	z-index: 9999;
	font-weight: 900;
	text-shadow: 2px 2px 0 #000, 1px 1px 0 #000;
}

.fat-video-link:hover {
	color: #000;
	text-decoration: none;
	text-shadow: 2px 2px 0 #fff, 1px 1px 0 #fff;
}

.social-links {
	display: -ms-grid;
	display: grid;
	padding-bottom: 6vh;
	padding-left: 5vh;
	align-self: flex-start;

	order: 0;

	z-index: 1;flex: 0 auto;
	grid-auto-flow: row;
	grid-auto-columns: 1fr;
	grid-gap: 16px;
	grid-template-columns: auto auto auto auto auto;
}

.kp6-logo-container {
	display: flex;
	width: 100vw;
	justify-content: center;
	align-items: center;
	flex: 1;
	overflow-x: hidden;
	overflow-y: visible;
}

@media screen and (max-width: 991px) {
	.fat-video-link {
		padding-top: 10px;
	}

	.social-links {
		display: flex;
		flex-direction: column;
	}
}

@media screen and (max-width: 767px) {
	.background-video {
		object-fit: cover;
		object-position: 50% 50%;
	}

	.social-links {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: flex-start;
		grid-auto-flow: column dense;
		grid-auto-columns: 0.25fr;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.marquee {
		font-size: 20px;
	}
}

@media screen and (max-width: 600px) {
	.fat-video-link {
		padding-top: 0px;
		font-size: 58px;
	}

	.social-links {
		padding-left: 3vh;
	}
}




section, footer {
	padding-left: 40px;
	padding-right: 40px;
}

h2 {
	font-size: 32px;
	line-height: 36px;
	margin-top: 20px;
	text-transform: uppercase;
	opacity: .65;
	letter-spacing: .15em;
	font-family: Neue plak compressed;
}




/* -------------------------------------------------------------------------- */
/*                                    Fonts                                   */
/* -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Neue plak';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c99627957abf3c7a710_Neue%20Plak%20Black.ttf') format('truetype');
	font-weight: 900;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c99b54ed2074f5b7b38_Neue%20Plak%20Compressed%20Thin.ttf') format('truetype');
	font-weight: 100;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c9933a918aed0e8986c_Neue%20Plak%20Compressed%20Regular.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c9955bb23f1261510cc_Neue%20Plak%20Compressed%20Light.ttf') format('truetype');
	font-weight: 300;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c99646118853451f6bf_Neue%20Plak%20Compressed%20UltraLight.ttf') format('truetype');
	font-weight: 200;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c9986ab267e65239569_Neue%20Plak%20Compressed%20SemiBold.ttf') format('truetype');
	font-weight: 600;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c9922ec96609a83b04b_Neue%20Plak%20Compressed%20ExtraBlack.ttf') format('truetype'), url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c99b54ed24b2a5b7b4a_Neue%20Plak%20Compressed%20Black.ttf') format('truetype');
	font-weight: 900;
}

@font-face {
	font-family: 'Neue plak compressed';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c999f9e1dabdb595295_Neue%20Plak%20Compressed%20Bold.ttf') format('truetype');
	font-weight: 700;
}

@font-face {
	font-family: 'Neue plak';
	src: url('https://uploads-ssl.webflow.com/610beb0fe3db9d787f28f24f/610e6c9992065ebb0cf0958a_Neue%20Plak%20Bold.ttf') format('truetype');
	font-weight: 700;
}





/* -------------------------------------------------------------------------- */
/*                                   Marquee                                  */
/* -------------------------------------------------------------------------- */
.marquee {
	padding: .5rem 0;
	padding-top: .3rem;
	font-size: 20px;
	overflow: hidden;
	z-index: 1;
	line-height: 1;
	background: white;
}

.marquee--long {
	font-size: 1.25vw;
}

.marquee span {
	display: inline-block;
	white-space: nowrap;
	animation-play-state: running;
	color: #00112C;
	width: var(--tw);
	text-shadow: var(--tw) 0 currentColor,
		calc(var(--tw) * 2) 0 currentColor,
		calc(var(--tw) * 3) 0 currentColor,
		calc(var(--tw) * 4) 0 currentColor;
	will-change: transform;
	animation: marquee var(--ad) linear infinite;
	text-transform: uppercase;
	font-style: italic;
}

.marquee:hover span {

}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}




/* -------------------------------------------------------------------------- */
/*                                   Events                                   */
/* -------------------------------------------------------------------------- */
.events {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: var(--gap);
}

@media (min-width: 1000px) {
	.events {
		grid-template-columns: repeat(3, 1fr);
	}
}


@media (min-width: 1500px) {
	.events {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 700px) {
	.events {
		grid-template-columns: repeat(1, 1fr);
	}

	.event .placeholder {
		display: none;
	}
}


.event {
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	/* padding-top: 15px; */
	padding-bottom: 15px;
	text-decoration: none;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.event img {
	width: 100%;
	margin-bottom: 20px;
	aspect-ratio: 1;
	object-fit: cover;
	/* transform: perspective(500px) rotateX(25deg) rotateY(3deg); */
}

.event img.placeholder {
    mix-blend-mode: lighten;
    border: 2px solid rgba(255,255,255,.5);
}

.event .text {
	grid-template-columns: min-content auto;
	display: grid;
	grid-gap: 20px;
}

.event:hover {
	background: rgba(255, 255, 255, 0.05);
}


.event .title {
	font-size: 200%;
	padding: 5px 0;
	display: flex;
	width: 100%;
}

.event .date {
	width: 95px;
	flex-direction: column;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.event .date .day-of-month {
	font-size: 400%;
	line-height: .6;
}

.event .details {
	padding-top: 3px;
}

.event .date .month {
	/* line-height: 4; */
	position: relative;
	left: 4px;
	margin-top: 20px;
}

.event .date .time {
	position: relative;
    left: 4px;
    font-size: 150%;
    opacity: .8;
    /* line-height: 1.6; */
    /* position: relative; */
    margin-top: 10px
}


/* -------------------------------------------------------------------------- */
/*                                 Dictionary                                 */
/* -------------------------------------------------------------------------- */
dl {
	display: grid;
}

dt {
	
}

dd {
	font-weight: normal;
	break-inside: avoid;

	margin-bottom: 25px;
}



/* -------------------------------------------------------------------------- */
/*                               Youtube videos                               */
/* -------------------------------------------------------------------------- */
 .videos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-flow: row;
	grid-gap: 40px;
	padding-top: 20px;
}

.video {
	display: flex;
	grid-gap: 15px;
	flex-direction: column;
	text-decoration: none;
	min-width: 0;
}

.video img {
	border: 2px solid transparent;
}

.video .title {
	opacity: 0.75;
	text-decoration: none;
}

.video:hover img {
	border: 2px solid white;
}

.video:hover .title {
	opacity: 1;
}


@media (max-width: 1024px) {
	.videos {
		grid-template-columns: repeat(4, 1fr);
	}

	section, footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	footer .grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.videos {
		grid-template-columns: repeat(3, 1fr);
	}

	footer .grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


@media (max-width: 500px) {
	dl {
		columns: 2;
	}

	.videos {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
	}

	footer .grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 300px) {
	.videos {
		grid-template-columns: repeat(1, 1fr);
	}
}


/* -------------------------------------------------------------------------- */
/*                              This is klokpack                              */
/* -------------------------------------------------------------------------- */
section#this-is-klokpack {
	margin: 100px 0;
	margin-bottom: 20px;
}


section h3, footer h3 {
	text-align: center !important;
	margin-bottom: 50px;
	opacity: .6;
	letter-spacing: 2px;
}



/* -------------------------------------------------------------------------- */
/*                                    Card                                    */
/* -------------------------------------------------------------------------- */
.card {
	transition: box-shadow 0.5s, transform .5s;
	max-width: 100%;
	max-height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
	width: 400px;
	height: 400px;
	margin: auto;
	display: flex;
	/* padding: 50px; */
	aspect-ratio: 1;
}

.card:hover {
}

.card:not(:hover) img {
	transition: all .3s;
}

.card img {
	position: absolute;
	/* width: 100%; */
	transition: background-color .5s;
	/* height: 100%; */
	max-width: 100%;
	max-height: 100%;
	transform: scale(1.05);
	transform-style: preserve-3d;
	z-index: 3;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: drop-shadow .3s;

	box-shadow:
		1.1px 0.7px 1.5px rgba(0, 0, 0, 0.039),
		2.5px 1.8px 3.6px rgba(0, 0, 0, 0.057),
		4.8px 3.4px 6.8px rgba(0, 0, 0, 0.07),
		8.5px 6px 12.1px rgba(0, 0, 0, 0.083),
		15.9px 11.3px 22.6px rgba(0, 0, 0, 0.101),
		38px 27px 54px rgba(0, 0, 0, 0.14)
		;
}

.card:hover img:not(.lifted) {
	transition: all .15s;
}

.card:hover img {
	box-shadow:
		0 2.8px 2.2px rgba(0, 0, 0, 0.034),
		0 6.7px 5.3px rgba(0, 0, 0, 0.048),
		0 12.5px 10px rgba(0, 0, 0, 0.06),
		0 22.3px 17.9px rgba(0, 0, 0, 0.072),
		0 41.8px 33.4px rgba(0, 0, 0, 0.086),
		0 100px 80px rgba(0, 0, 0, 0.12)
		;
}




/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
footer {
    border-top: 1px solid #ffffff3b;
    padding-top: 100px;
	margin-top: 50px;
}

footer .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
	grid-gap: 25px;
}

footer a {
    opacity: .4;
	display: flex;
}

footer a:hover {
	opacity: .9;
}

footer img {
    width: 55%;
    margin: auto;
    filter: invert();
}




/* 
           ____
       _.-'78o `"`--._
   ,o888o.  .o888o,   ''-.
 ,88888P  `78888P..______.]
/_..__..----""        __.'
`-._       /""| _..-''
    "`-----\  `\
            |   ;.-""--..
            | ,8o.  o88. `.
            `;888P  `788P  :
      .o""-.|`-._         ./
     J88 _.-/    ";"-P----'
     `--'\`|     /  /
         | /     |  |
         \|     /   |akn

------------------------------------
	Trip mode                                
-------------------------------------------------------------------------- */

body.trip-mode {
	/* in grams */
	--mushroom-dosage: 0;

	--accent1:
	rgb(255,0,230);
    --accent2:
	rgb(0,255,0);
    --accent3: #B466FF;
    --color:
	rgb(0,0,255);
	transition: var(--mushroom-dosage) 2s;
}


.trip-mode .event, 
.trip-mode model-viewer,
.trip-mode .video img {
    animation: shift-hue 10s infinite !important;
}


@keyframes shift-hue {
  0% {
    filter: saturate(calc(var(--mushroom-dosage) + 1)) hue-rotate(0deg);
  }
  
  50% {
    filter: saturate(calc(var(--mushroom-dosage) + 1)) hue-rotate(360deg);
  }
  
  100% {
    filter: saturate(calc(var(--mushroom-dosage) + 1)) hue-rotate(0deg);
  }
}


canvas#color-field {
    position: fixed;
    height: 100vh;
    top: 0px;
    z-index: -1;
    mix-blend-mode: color-dodge;
    opacity: calc(var(--mushroom-dosage) / 5);
}



.trip-mode .title, 
.trip-mode .event .date, 
.trip-mode .event .details, 
.trip-mode .event .month, 
.trip-mode .event .time, 
.trip-mode h3, 
.trip-mode h2
{
    background: url('./assets/hippie-trippy-psychedelic-rainbow-achtergrond-verkleurd-behang-abstracte-hypnotische-illusie-retro-textuur-glitch-en-disco-229500197.jpg');
    background-size: 600% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 100s linear infinite;
    text-decoration: none;
    /* mix-blend-mode: color; */
}


@keyframes shine {
    to {
        background-position: 200% center;
		background-size: 400% center;
    }
}

.trip-mode .background-video video {
	mix-blend-mode: darken;
}

.trip-mode .click-4-sound img {
	mix-blend-mode: plus-lighter;
}

.trip-mode .center img {
    mix-blend-mode: luminosity;
}

.trip-mode a.marquee span {}

.trip-mode .card {
    mix-blend-mode: hard-light;
}

.trip-mode a.soundboard-button {
    mix-blend-mode: darken;
}

.trip-mode footer img {
    filter: none;
    mix-blend-mode: multiply;
    opacity: 1;
}

.trip-mode footer a {
    mix-blend-mode: initial;
    opacity: .7;
}

.trip-mode .social-links a {}

img#mushroom {}

img#mushroom {
    position: relative;
    top: 100px;
    margin: auto;
    width: 150px;
    /* display: flex; */
    object-position: 10px 10px;
    animation: mushroom 10s infinite;
	cursor: pointer;;
    /* filter: invert() saturate(calc(var(--mushroom-dosage) + 1)) hue-rotate(0deg) drop-shadow(0px 0px 10px gray); */
}

@keyframes mushroom {
	0% {
	  filter: invert() saturate(2) hue-rotate(0deg) drop-shadow(0px 0px 10px gray);
	}
	
	50% {
	  filter: invert() saturate(2) hue-rotate(180deg) drop-shadow(0px 0px 10px gray);
	}
	
	100% {
	  filter: invert() saturate(2) hue-rotate(0deg) drop-shadow(0px 0px 10px gray);
	}
  }





/* -------------------------------------------------------------------------- */
/*                                    Gorepack                                    */
/* -------------------------------------------------------------------------- */
/* 
body {
	background: rgb(18, 18, 18) !important;;
}

video, canvas, model-viewer, img:not(.blood) {
	filter: grayscale(1) contrast(2.5);
}

.event {
	position: relative;
}
.event img.blood {
	position: absolute;
	top: 0;
	mix-blend-mode: multiply;
}

.blood.side {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 3;
}

.blood.top {
	position: fixed;
	top: 0;
	z-index: -1;;
	width: 100%;
	height: 100%;
	mix-blend-mode: lighten;
}


footer {
}


footer .grid a {
	opacity: 1 !important;
}
footer .grid img {
	filter: invert(1);
}

#mushroom {
	display: none;
}

img#bones {
	height: 200px;
	object-fit: contain;
    margin: auto;
    display: flex;
    margin-top: 200px;
    filter: grayscale(1) brightness(.7) contrast(9);
}

.click-4-sound {
	filter: invert();
} */