@charset "UTF-8";

@charset "UTF-8";
*, *:before, *:after { -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
/*:root { font-size: calc(12px + (24 - 12) * ((100vw - 100px) / (1140 - 100))); }*/
:root {
	--light: #F3F3F3;
	--bg: #333;
	--color1a: #eeefef;
	--white: #FFFFFF;
	--color: rgb(37, 41, 57);
	--btn-bg: #369;
	--btn-txt: #FFF;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol , ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

html { height: 100%; font-size: clamp(5px, 2vw, 16px); }
body { min-height: 100vh; background: var(--bg); margin: 0; padding: 1rem 0; 

	background-color: #592464;
  background-size: cover;
  box-shadow: inset 0 0 6em rgba(0, 0, 0, 0.75);

}

h1 { font-size: 3rem; color: #FFF; font-family: 'Signatie'; }

.airbrush-effect {
  background-image: var(--this-img);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
  .airbrush-effect {
    position: relative;
    overflow: hidden;
  }
  .airbrush-effect:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
    mix-blend-mode: multiply;
  }
}


/* .bubble containers: add the texture above a solid background */
.bubble { 
	display: none;
  max-width: 500px;
  margin: 1rem 1.5rem;
  padding: 0.2rem 1.25rem;
  text-align: center;
  font-family: "Dekko", cursive;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  position: relative;
  box-shadow: 6px 3px 0 2px #FFF, 16px 16px 0 6px #000;
  background: #369;
}

section { 
	display: block;
	position: relative;
	width: 90%;
	height: 100rem;
	margin: 0 auto;
	padding: 0;
	/*background: var(--background-fill-color);*/
	overflow: hidden;
	/*max-width: 1140px;*/
	max-width: 960px;
}

figure { position: absolute; margin: 0; padding: 0; background-color: #666; background-position: center center; background-repeat: no-repeat; background-size: cover; }
figure::before { display: none; content: attr(id); color: #FFF; font-size: 2rem; position: absolute; top: 50%; left: 50%; padding: 0.25rem 0.5rem; background: #369; color: #FFF; transform: translate(-50%, -50%); z-index: 1000; }

/* 	clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%); */

figure:nth-of-type(1) {
	top: 0;
	left: 0;
	width: 28rem;
	height: 20rem;
	clip-path: polygon(
		0 0,
		28rem 0,
		28rem 12rem,
		0 20rem
	);
}

figure:nth-of-type(2) {
	top: 0;
	left: 29rem;
	width: 43rem;
	height: 15rem;
	clip-path: polygon(
		0 0,
		43rem 0,
		43rem 15rem,
		0 12rem
	);
}

figure:nth-of-type(3) {
	top: 13rem;
	left: 0;
	width: 28rem;
	height: 36rem;
	clip-path: polygon(
		0 8rem,
		28rem 0,
		29rem 36rem,
		0 36rem
	);
}

figure:nth-of-type(4) {
	top: 13rem;
	left: 29rem;
	width: 43rem;
	height: 21rem;
	clip-path: polygon(
		0 0,
		43rem 3rem,
		43rem 22rem,
		0rem 22rem
	);
}

figure:nth-of-type(5) {
	top: 35rem;
	left: 29rem;
	width: 42rem;
	height: 25rem;
	clip-path: polygon(
		0 0,
		42rem 0,
		42rem 25rem,
		0 14rem
	);
}

figure:nth-of-type(6) {
	top: 50rem;
	left: 0;
	width: 28rem;
	height: 37rem;
	clip-path: polygon(
		0 0,
		28rem 0,
		28rem 29rem,
		0 29rem
	);
}

figure:nth-of-type(7) {
	top: 50rem;
	left: 29rem;
	width: 42rem;
	height: 44rem;
	clip-path: polygon(
		0 0,
		43rem 11rem,
		43rem 29rem,
		0 29rem
	);
}

figure:nth-of-type(8) {
	top: 80rem;
	left: 0;
	width: 43rem;
	height: 20rem;
	clip-path: polygon(
		0 0,
		43rem 0,
		36rem 20rem,
		0 20rem
	);
}

figure:nth-of-type(9) {
	top: 80rem;
	left: 34rem;
	width: 37rem;
	height: 20rem;
	clip-path: polygon(
		10rem 0,
		70rem 0,
		70rem 40rem,
		-4rem 40rem
	);
}

/*figure:nth-of-type(10) {
	top: 82.75em;
	left: 0;
	width: 70em;
	height: 37em;
	clip-path: polygon(
		0 0.25em,
		70em 13.25em,
		70em 37em,
		0 37em
	);
}*/

#logo { 
	position: absolute;
	top: 2rem;
	left: 5rem;
	width: 16rem;
	height: 10rem;
	transform: rotate(-7deg);
	z-index: 1000;
}
#logo h1:nth-child(1) { 
	position: absolute;
	top: -1.75rem;
	left: 0;
}
#logo h1:nth-child(2) { 
	position: absolute;
	top: 2.5rem;
	left: 2rem;
}

#grid--overlay { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-image: url(./grid_square.png);
	background-size: 1em 1em;
	opacity: 1;
	transition: opacity 0.25s;*/
  background-image:
		repeating-linear-gradient(to right, #080 0rem, #080 calc(0rem + 1px), transparent, calc(0rem - 1px), transparent 1rem),
		repeating-linear-gradient(to bottom, #080 0rem, #080 calc(0rem + 1px), transparent, calc(0rem + 1px), transparent 1rem);
  /*background-position: 1em 0, 0 0;*/
  /*border-right: calc(0em + 1px) solid transparent;*/
  z-index: 100;
  display: none;
}

.hidden { opacity: 0; }

@-webkit-keyframes shine {
  0% {
    background-position: 110% 0%, 0 0;
  }
  100% {
    background-position: -10% 0%, 0 0;
  }
}
@keyframes shine {
  0% {
    background-position: 110% 0%, 0 0;
  }
  100% {
    background-position: -10% 0%, 0 0;
  }
}

h1 { position: relative; display: block; font-weight: 800; font-size: 6vw; margin: 0; }

[data-gold] { color: #ac733c; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  [data-gold] { color: transparent; background-image: linear-gradient(to right, transparent 0%, transparent 45%, white 50%, transparent 55%, transparent 100%), linear-gradient(90deg, #c78c48, #cf9147 9.4%, #cf9348 9.4%, #b2763e 33.6%, #ad743c 35.7%, #ac723d 46.9%, #b0773d 51.7%, #b0793e 52.1%, #c4914c 64.6%, #c99750 68.5%, #ce9e54 73.2%, #f4d188); background-position: 110% 0%, 0 0; background-size: 200% auto, auto; -webkit-background-clip: text; background-clip: text; -webkit-animation: shine 2s ease-in-out 2 alternate 2s; animation: shine 2s ease-in-out 2 alternate 2s; }
	}
	[data-gold]:before { content: attr(data-gold); color: #f0d8a9; position: absolute; z-index: -1; top: -0.08vw; left: 0px; text-shadow: black 0px 0.08vw 12px; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  [data-gold]:after {
    content: attr(data-gold);
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, transparent 0%, transparent 48%, rgba(98, 16, 0, 0.5) 50%, transparent 75%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

[data-silver] {
  color: #858585;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  [data-silver] {
    color: transparent;
    background-image: linear-gradient(to right, transparent 0%, transparent 45%, white 50%, transparent 55%, transparent 100%), linear-gradient(270deg, #8c8c8c 1.3%, #999 15%, #868686 29.6%, #828282 29.6%, #7d7d7d 31.8%, #797979 31.8%, #6a6a6a 38.9%, #d3d3d3);
    background-position: 110% 0%, 0 0;
    background-size: 200% auto, auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 2s ease-in-out 2 alternate-reverse 2s;
  }
}
[data-silver]:before {
  content: attr(data-silver);
  color: #fff;
  position: absolute;
  z-index: -1;
  top: -0.08vw;
  left: 0px;
  text-shadow: black 0px 0.08vw 12px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  [data-silver]:after {
    content: attr(data-silver);
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, transparent 0%, transparent 48%, rgba(17, 17, 17, 0.5) 50%, transparent 75%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* LARGE screen stuff */
@media (min-width: 1025px) {
	/*html { font-size: 16px;*/ }
}
/* MEDIUM screen stuff */
@media (min-width: 601px) and (max-width: 1024px) {
	/*html { font-size: 12px; }*/
}
/* SMALL screen stuff */
@media (max-width: 600px) {
	/*html { font-size: 5px;*/ }
}