@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

html, body {
	overflow-x: hidden;
}

body {
	background-color: black;
	font-family: 'Alata', sans-serif;
	color: #fff;
	margin: 0;
}

a {
	color: rgb(223,40,83);
}










header {
	/* background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-dean-tim-kev-jay.jpg) no-repeat top / 100%; */
	/* background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-xl.jpg) no-repeat top / 100%; */
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-xl.jpg) no-repeat 50% 10% / cover;
	display: flex;
	flex-direction: column;
	justify-content: end;
	/* height: 100vh; */
	/* height: calc(100vh - 11rem); */
	height: calc(80vh - 11rem);
}
@media (min-width: 1501px) {
	header {
		max-width: 1500px;
		margin: auto;
	}
}
@media (max-width: 1500px) {
	header {
		/* aspect-ratio: 2048/1363; */
		/* height: auto; */
		/* background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-l.jpg) no-repeat top / 100%; */
		/* height: calc(100vh - 11rem); */
		height: calc(80vh - 11rem);
		background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-l.jpg) no-repeat top / cover;
	}
}
@media (max-width: 1000px) {
	header {
		/* background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-m.jpg) no-repeat top / 100%; */
		background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-m.jpg) no-repeat top / cover;
	}
}
@media (max-width: 600px) {
	header {
		aspect-ratio: 2048/1363;
		height: auto;
		background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%), url(/spacetripper-bg-s.jpg) no-repeat top / 100%;
	}
}

header h1 {
	mix-blend-mode: exclusion;
	transform: skewY(-4deg);
	padding-bottom: 3vw;
	margin: 0;
	animation: jittery 4s linear 5s infinite;
}
header h1 img {
	animation: logo 4s ease-out;
	animation-fill-mode: forwards;
	transform-origin: bottom;
}
@keyframes logo {
	0% {
		transform: scale(2);
		opacity: 0;
	}
	100% {
		transform: scale(1.02);
		opacity: 1;
	}
}

@keyframes jittery {
	1% {
		transform: translate(-2px, -3px) scale(1.005) skewY(-4deg);
	}
	2% {
		transform: translate(3px, 2px) scale(.995) skewY(-4deg);
	}
	3% {
		transform: translate(-4px, -5px) scale(1.005) skewY(-4deg);
	}
	4% {
		transform: translate(2px, 3px) scale(1, 1) skewY(-4deg);
	}
	5% {
		transform: translate(-1px, -2px) scale(1.005) skewY(-4deg);
	}
	6% {
		transform: translate(0px, 3px) scale(1.02, 1.02) skewY(-4deg);
	}
	7% {
		transform: translate(-2px, -4px) scale(1.005) skewY(-4deg);
	}
	8% {
		transform: translate(3px, 5px) scale(.99, .99) skewY(-4deg);
	}
	9% {
		transform: translate(-5px, -3px) scale(1.005) skewY(-4deg);
	}
	10% {
		transform: scale(1) skewY(-4deg);
	}
}











.vanny {
	background: black url(/vanfest-bg.jpg) no-repeat bottom center / cover;
}
.vanny2 {
	background: black url(/vanfest-bg2.jpg) no-repeat bottom center / cover;
}
.purple {
	background: black url(/bg.png) no-repeat bottom center / cover;
}
.gradient {
	background: linear-gradient(-45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,.12) 100%);
}
.negative {
	background-color: rgb(223,40,83);
}
.negative a {
	color: #000;
}

.special {
	background: linear-gradient(90deg,#1c8df7,#c31de8,#ff9500,#e81d78);
	background-size: 800%;
	animation: rainbow 6s linear infinite;
	animation-direction: alternate;
	border-color: #fff7;
	border-style: dashed;
}
.special p a {
	mix-blend-mode: overlay;
	color: white;
}

@keyframes rainbow { 
	0% { background-position-x: 0% }
	100% { background-position-x: 100% }
}


main, .griddy {
	/* display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 1.5rem; */
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
}
main > section,
.griddy > section {
	flex-basis: 300px;
	border-radius: .5rem;
	flex-grow: 1;
	padding: 1.25rem;
}


h2 {
	font-weight: 900;
	letter-spacing: -.04em;
	text-transform: uppercase;
}
h2 small {
	display: block;
	font-size: .75rem;
	text-transform: uppercase;
	opacity: .5;
	font-weight: normal;
	letter-spacing: .1em;
}


.pics {
	column-count: 3;
}
@media (max-width: 900px) {
	.pics {
		column-count: 2;
	}
}
.pics > * {
	display: block;

}
.pics img {
	display: block;
	width: 100%;
}


figure {
	margin: 0;
}
figure.album {
	display: flex;
	gap: 1em;
	align-items: center;
}
figure.album img {
	width: 20%;
	aspect-ratio: 1/1;
	border: 1px solid #fff2;
	flex-shrink: 0;
	/* flex-grow: 1; */
}



.button {
	display: inline-block;
	background: #0008;
	color: #fff !important;
	padding: .75em 1em .95em;
	text-decoration: none;
	line-height: 100%;
	border-radius: 5px;
	border: 1px solid #fff4;
}





.van {
	display: grid;
	place-items: center;
}
.van > * {
	grid-row: 1/-1;
	grid-column: 1/-1;
}
.van > img {
	height: 100%;
	max-height: 70vh;
	object-fit: cover;
	filter: brightness(75%);
	z-index: -1;
}
.van > h1, .van > h2 {
	font-size: 4rem;
	line-height: 100%;
	font-weight: bolder;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 0 .25em #000;
}
.van > h1 > small {
	display:block;
	font-size: .4em;
}