@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:opsz,wght@10..72,100..900&display=swap');



html {
  height: 100%;
  overflow: hidden;
}

body{ 
	background-color: crimson;
	background-attachment: fixed;
	background-repeat: no-repeat;
  background-position: 50%;
  background-image: 
  	url(images/logo.svg),
  	linear-gradient(
	    -20deg,
	    hsl(0deg 100% 7%) 0%,
	    hsl(351deg 79% 14%) 19%,
	    hsl(348deg 84% 20%) 31%,
	    hsl(347deg 90% 26%) 40%,
	    hsl(345deg 97% 32%) 49%,
	    hsl(354deg 75% 41%) 58%,
	    hsl(8deg 69% 47%) 66%,
	    hsl(18deg 76% 48%) 75%,
	    hsl(27deg 85% 48%) 84%,
	    hsl(35deg 100% 46%) 100%
	  );
	background-size: 80%, 100%;
	perspective: 1px;
	transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-family: Georgia;
	}



h1 {
   font-size: 250%
}

p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}

.logo-bg {
	position: absolute;
}

.slide {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
	transform-style: inherit;
}

/* this can be used but needs a class selector to not break other things inadvertantly 
img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
*/


.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
	}

.slide, .slide:before {
  background: 50% 50% / cover;  
}

.word {
	color: #fff;
	font-size: 9rem;
	text-align: center;
  font-family: "Big Shoulders Stencil", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
	}

	@media (min-width: 768px) { .word { font-size: 15rem; } }
	@media (min-width: 992px) { .word { font-size: 20rem; } }
	@media (min-width: 1400px) { .word { font-size: 30rem; } }



.bg-3 {
  background-image: url("images/test3.webp");
  z-index:2;
	}

.bg-4:before {
  background-image: url("images/test4.webp");
  transform: translateZ(-1px) scale(2);
	}

.bg-5 {
  background-image: url("images/test5.webp");
  z-index: 2;
	}

.bg-6:before {
  background-image: url("images/test6.webp");
  transform: translateZ(-1px) scale(2);
	}

.bg-7:before {
  background-image: url("images/test7.webp");
  transform: translateZ(-1px) scale(2);
	}


.bg-8:before {
  background-image: url("images/test8.webp");
  transform: translateZ(-1px) scale(2);
	}


#lastslide {
  background: #000;
  background: linear-gradient(0deg, rgba(0,0,0,1) 67%, rgba(0,0,0,.8) 100%);;
}

#lastslide::before { display: none; }







/* SAMPLER */


.sampler-image {
	width: 320px;
	height: 415px;
	z-index: 5;
	position: absolute;
	}

.sampler-cover {
	xz-index: 10;
	}


@media (max-width: 768px) {


.sampler { min-height: 300px; }
.sampler-image { width: 30% }
.sampler-cover { left: 0; top: 0; }
.sampler-09 { left: 35%; top: 0; }
.sampler-13 { right: 0; top: 0; }
.sampler-14 { left: 0; top: 50%; }
.sampler-15 { left: 35%; top: 50%; }
.sampler-17 { right: 0; top: 50%; }

}


@media (min-width: 768px) {

.sampler-image {
	width: 320px;
	height: 415px;
	left: 0;
	top: 0;
	z-index: 5;
	position: absolute;
	}

	.sampler-image img {
		box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
	}

.sampler-cover {
	z-index: 10;
	}

.sampler * {
	transition: all .75s ease;
	}

.sampler-cover {
	transform: rotate(-1deg);
	}

.sampler:hover .sampler-image {
	padding: 1rem;
}

.sampler:hover .sampler-cover {
	transform:
		translate(-240px,0)
		rotate(-10deg)
		scale(.75);
	}


.sampler-09 {
	transform: rotate(-2deg);
	transition-duration: .9s;
	}

.sampler:hover .sampler-09 {
	transform: 
		translate(-150px,-150px)
		rotate(-10deg)
		scale(.75);
	}

.sampler:hover .sampler-13 {
	transform: 
		translate(0,-200px)
		rotate(3deg)
		scale(.75);
	}

.sampler-14 {
	transform: rotate(2deg);
	transition-duration: 1.1s;
	}

.sampler:hover .sampler-14 {
	transform: 
		translate(190px,-170px)
		rotate(10deg)
		scale(.75);
	}

.sampler-15 {
	transform: rotate(5deg);
	transition-duration: .6s;
	}

.sampler:hover .sampler-15 {
	transform: 
		translate(220px,-10px)
		rotate(15deg)
		scale(.75);
	}

.sampler-17 {
	transform: rotate(4deg);
	transition-duration: 1s;
	}

.sampler:hover .sampler-17 {
	transform: 
		translate(180px,200px)
		rotate(-8deg)
		scale(.75);
	}

.sampler-21 {
	transform: rotate(3deg);
	transition-duration: .9s;
	}

.sampler:hover .sampler-21 {
	transform: 
		translate(0,220px)
		rotate(3deg)
		scale(.75);
	}

.sampler-26 {
	transform: rotate(-3deg);
	transition-duration: 1.3s;
	}

.sampler:hover .sampler-26 {
	transform: 
		translate(-175px,150px)
		rotate(-11deg)
		scale(.75);
	}

.sampler-27 {
	transform: rotate(-6deg);
	transition-duration: 1s;
	}

.sampler:hover .sampler-27 {
	transform: 
		translate(10px,10px)
		rotate(-2deg)
		scale(.75);
	}


}







.dl {
	display: inline-block;
  width: 300px;
  height: 50px;
  line-height: 50px;
  background: #222;
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: all .2s ease;
  background-image: 
  	url(images/test7.webp),
  	linear-gradient(
	    -20deg,
	    hsl(0deg 100% 7%) 0%,
	    hsl(351deg 79% 14%) 19%,
	    hsl(348deg 84% 20%) 31%,
	    hsl(347deg 90% 26%) 40%,
	    hsl(345deg 97% 32%) 49%,
	    hsl(354deg 75% 41%) 58%,
	    hsl(8deg 69% 47%) 66%,
	    hsl(18deg 76% 48%) 75%,
	    hsl(27deg 85% 48%) 84%,
	    hsl(35deg 100% 46%) 100%
	  );
  background-size: cover;
  border: 1px solid #444;
	}

.dl * { transition: all 2s ease; }

.dl::before {
	content: "";
	display: block;
	position: absolute;
	width: 302px;
	height: 52px;
	background-color: #000;
	opacity: 0;
	filter: blur(30px);
	transition: all 2s ease;
	top: -1px;
	left: -1px;
	}	

	.dl:hover::before {
		opacity: 1;
		filter: blur(0);
		}

		.dl .dl-text {
			position: relative;
			z-index: 5;
			display: inline-block;
			}

			.dl:hover .dl-text {
				color: #fff;
				letter-spacing: 1.5px;
				}


#filters { display: none; }


#tagline {
  position: relative;
  width: 400px;
  height: 150px;
  filter: url(#threshold) blur(0.1px);
	}

#text1,
#text2 {
  position: absolute;
  width: 100%;
  display: inline-block;
  font-family: "Big Shoulders Stencil", sans-serif;
  font-size: 100px;
  text-align: left;
  color: #555;
  user-select: none;
	}