@font-face {
    font-family: "NoirPro";
    font-weight: 300;
    src: url('../fonts/NoirPro-Light.otf') format('opentype');
}
@font-face {
    font-family: "NoirPro";
    font-weight: 500;
    src: url('../fonts/NoirPro-Medium.otf') format('opentype');
}
@font-face {
    font-family: "NoirPro";
    font-weight: 600;
    src: url('../fonts/NoirPro-SemiBold.otf') format('opentype');
}

:root {
    --primary-color: #ddf4ff;
    --invert-color: #220b00;
}

.video {
	/*animation: fade-in 4s .5s linear;*/
	/*animation-fill-mode: both;*/
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: -1;
	object-fit: fill;
	object-position: 75% 80%;
/*	inset: 0;*/
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video img,
.video video {
	width: min(200vmax, 2560px);
	height: auto;
	transform: translate(-50%, -65%);
	position: absolute;
	left: 50%;
	top: 50%;
}

body {
	background: #000;
/*    background: #f00 url(bg_916_comingsoon_bonusz2025.jpg) no-repeat 0 55%;*/
/*    background-size: 80vw auto;*/
/*    backdrop-filter: blur(0.5px) brightness(1.2);*/
    color: var(--primary-color);
    display: grid;
    /*font-family: "Space Grotesk", sans-serif;*/
    /*font-optical-sizing: auto;*/
    font-family: "Space Mono", monospace;
    align-items: end;
    justify-content: center;
    /*display: grid;*/
    margin: 0;
    min-height: calc(100dvh - 1rem);
}

.spacer {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;	
}

.main {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1rem;
	margin-bottom: 1rem;
	/*animation: fade-in 2s .25s ease-in;*/
	/*animation-fill-mode: both;*/
	filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .75)) drop-shadow(0 0 .75rem rgba(0, 0, 0, .75));
	/*display: grid;*/
	/*margin-block: 1rem;*/
	/*place-items: center;*/
}

.logo {
	margin-top: 1em;
	width: min(60vw, 256px);
}

.counter {
    display: block;
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    /*font-size: min(9vw, 1.3125rem);*/
    font-size: min(calc(1vw + .6rem), 1.375rem);
    font-style: normal;
    font-variation-settings: "ROND" 0;
    font-weight: 700;
    padding-left: .0125em;
    /*text-align: center;*/
    text-transform: uppercase;
}

#venue.counter {
	/*font-size: min(10vw, 1.475rem);*/
	font-size: min(calc(1.15vw + .65rem), 1.525rem);
}

.footer {
    background: rgba(0, 0, 0, .864);
    border-radius: .25rem .25rem 0 0;
	box-shadow: 0 0 1rem 1rem rgba(0, 0, 0, .864);
	max-width: 1280px;
	margin: auto;
	align-self: end;
	/*animation: fade-in 2s .75s linear;*/
	/*animation-fill-mode: both;*/
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: .25rem;
    position: sticky; position: -webkit-sticky; bottom: 0;
    text-transform: uppercase;
    /*backdrop-filter: blur(16px);*/
    /*-webkit-backdrop-filter: blur(16px);*/
}

.footer a {
    /*background: rgba(0, 0, 0, .975);*/
    border-radius: 0 .0625rem 0 .0625rem;
    color: var(--primary-color);
    display: inline-block;
    line-height: 1;
    margin: .25rem;
    padding: .5rem;
/*    padding-block-end: .325rem;*/
    text-decoration: none;
    transition: background .125s linear, filter .125s linear;
}

.footer a:first-child {
	background: #75F9FC;
	color: black;
}
.footer a:first-child:hover {
	color: var(--primary-color);
}
.footer a span {
    display: inline-block;
    padding: .25rem;
    padding-block-end: 0;
}

.footer a:hover {
	background: var(--invert-color);
	filter: invert(100%);
}

@keyframes fade-in {
	from {
		opacity: 0;
	} 
	to {
		opacity: 1;
	}
}

/*#B2FFF5*/

.artists {
	font-size: min(calc(1.25vw + .75rem), 2.125rem);
	font-weight: 700;
	line-height: 1;
	/*margin-block: 2rem;*/
	margin: .2em;
	text-transform: uppercase;
}

.day time {
	font-size: .5em;
	font-family: "Doto", sans-serif;
	position: absolute;
	transform: rotate(180deg) translateZ(0) translate(100%);
	writing-mode: vertical-lr;
	padding: 0 0 0 .125em;
}

.stages {
	margin: 1rem 0;
	border-left: 2px solid var(--primary-color);
}

.stage {
	margin-top: .75em;
}

.artists .stage div {
	display: flex;
	gap: 0 1.375em;
	flex-wrap: wrap;
}

.artists .stage .stage-name {
	display: flex;
    font-family: "Doto", sans-serif;
	font-size: .5em;
	margin: 0;
}

.artists .stage .stage-logo {
	height: 1em;
	padding: .5em;
}

.artists .stage .stage-name.stage-verknipt {
	background: var(--primary-color) url("./logos/verknipt.png") no-repeat center;
	background-size: calc(100% - 1em) auto;
	width: 104px;
}

.artists .stage .stage-name.stage-hyperspace {
	background: var(--primary-color) url("./logos/hyperspace.png") no-repeat center;
	background-size: calc(100% - 1em) auto;
	width: 160px;
}

.artists .stage .stage-name.stage-logo span {
	display: none;
}

.artists .stage .stage-name span {
	background: var(--primary-color);
	color: #000;
	padding: .5em;
}

.artists .stage div > span {
	word-spacing: -.5ch;
}

.av {
	font-weight: 400;
	vertical-align: .123em;
}

.artists p {
	margin: .25rem 0;
}

.artists c {
	font-size: .5em;
}

.font-doto {
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
}

.partenope {
	display: inline-grid;
	/*display: none;*/
	font-size: .35em;
	font-family: "Doto", sans-serif;
	font-weight: 400;
	vertical-align: 1.25em;
	/*margin-block-start: .125rem;*/
	/*margin-inline-start: .5rem;*/
	/*position: absolute;*/
	/*text-align: initial;*/
}

.partenope .font-doto {
	margin-left: .2rem;
	vertical-align: -.125rem;
}

.text-xs {
	font-size: .25em;
	margin-block-start: .25rem;
}

.text-sm {
	font-size: .325em;
}

.text-md {
	font-size: .75em;
}

.text-pl {
	font-size: 1.25em;
}

@media screen and (width > 56rem) {
	.main, .footer {
		padding-inline: 3rem;
	}
}

@media screen and (width > 64rem) {
	.main, .footer {
		padding-inline: 6rem;
	}
}

@media screen and (width > 72rem) {
	.main, .footer {
		padding-inline: 8rem;
	}
}

@media screen and (min-width > 80rem) {
	.main, .footer {
		padding-inline: 9rem;
	}
}