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

:root {
    --primary-color: #ffd;
    --invert-color: #002;
}

.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: left 80%;
/*	inset: 0;*/
	width: 100%;
	height: 100%;
}

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);
    font-family: "NoirPro";
    align-items: end;
    justify-content: center;
    display: grid;
    margin: 0;
    min-height: calc(100dvh - 1rem);
}

.main {
	animation: fade-in 2s .25s ease-in;
	animation-fill-mode: both;
/*	filter: drop-shadow(0 0 1rem rgba(0, 0, 0, .75));*/
	display: grid;
	place-items: center;
    pointer-events: none;
    z-index: 1;
}

.logo {
	max-width: 75vw;
}

.counter {
    display: block;
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-size: min(9vw, 3rem);
    font-style: normal;
    font-variation-settings: "ROND"0;
    font-weight: 100;
    padding-left: .0125em;
    text-align: center;
    text-transform: uppercase;
}

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

.buttons a {
    background: rgba(0, 0, 0, .5);
    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;
}

.buttons a span {
    display: inline-block;
    padding: .25rem;
    padding-block-end: 0;
}

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

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

/*
html, body {
	height: 100%;
}

body {
	align-items: center;
/*	background: #000 url(cover.jpg) no-repeat 50% 50% / 100% auto;* /
	background: #000 url(bg.jpg) no-repeat 50% 50% / cover;
	color: var(--primary-color);
	display: flex;
	flex-direction: column;
	font-family: "NoirPro";
	margin: 0;
	text-transform: uppercase;
}

body:after {
	background: linear-gradient(to bottom, #0000 0%, #0000 20%, #0006 100%);
	content: "";
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -1;
}

.font-light {
	font-weight: 300;
}

.header {
	margin-block-start: 5rem;
}

.logo {
/*	visibility: hidden;* /
	filter: drop-shadow(0 0 3rem #000c);
/*	margin: auto;* /
	margin-bottom: 1.5rem;
	max-width: 380px;
	width: 100%;
/*	transform: scale(.9);* /
}

.logo-data {
	border-top: 1px solid #fff;
	color: #fff;
	font-size: 1.525rem;
	margin: 0 13.5% 0;
	padding: .5rem 0 1rem;
	text-transform: uppercase;
	text-align: center;
}

.artists {
	box-sizing: border-box;
	color:;
	display: flex;
	filter: drop-shadow(0 0 3rem #0009);
	flex-direction: column;
	flex-wrap: wrap;
	font-size: 1.25rem;
	gap: .5rem;
	justify-content: center;
	padding: 0 3rem;
	text-align: center;
	width: 100%;
}

.artists sup,
.artists .visual {
	font-size: .625em;
	vertical-align: .375em;
}

.info {
	color: #d2ceff;
	text-align: center;
	text-transform: uppercase;
	font-size: min(5vw, 1.25rem);
	margin: 2rem 0 1.5rem;
}

.date {
	font-size: 1.2em;
}

.venue {
	font-size:1.35em;
}

.buttons {
	background: rgba(0, 0, 0, .875);
	border-radius: .25rem .25rem 0 0;
	display: flex;
	margin: 0;
	padding: .25rem;
	position: sticky; position: -webkit-sticky; bottom: 0;
	text-transform: uppercase;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.buttons a {
	background: rgba(0, 0, 0, .25);
	border-radius: 0 .0625rem 0 .0625rem;
	color: #d2ceff;
	display: inline-block;
	line-height: 1;
	margin: .25rem;
	padding: .5rem;
	padding-block-end: .325rem;
	text-decoration: none;
	transition: background .125s linear, filter .125s linear;
}
.buttons a span {
	display: inline-block;
	padding: .25rem;
	padding-block-end: 0;
}

@media screen and (min-aspect-ratio: 2311/1300) {
	body { background-size: cover; }
	body { background-position: 50% 77%; }
}

.buttons a:hover {
	background: #2d3100;
	filter: invert(100%);
}

@media screen and (min-width: 640px) {
	body {
		justify-content: center;
	}
	.header {
		margin-block-start: auto;
	}
	.artists {
		flex-direction: row;
		font-size: min(3vw, 1.75rem);
		gap: .125rem 1.5rem;
		max-width: 1100px;
	}
	.artists .visual {
		flex-basis: 100%;
	}
	.buttons {
		margin-block-end: auto;
	}
}

@media screen and (max-width: 425px) {
	.logo-data {
		font-size: 1.45rem;
	}
	.info {
		padding-bottom: 5rem;
	}
	.buttons {
		transform: scale(.9);
		transform-origin: bottom;
	}
}
@media screen and (max-width: 412px) {
	.logo-data {
		font-size: 1.25rem;
	}
}
@media screen and (max-width: 374px) {
	.logo-data {
		font-size: 1.075rem;
	}
}

/*#B2FFF5*/