@font-face {font-family: Montserrat; src: url("../fonts/Montserrat.otf"); } 
@font-face {font-family: Montserrat; font-weight: light; src: url("../fonts/Montserrat-Light.otf");}
@font-face {font-family: Montserrat; font-weight: bold; src: url("../fonts/Montserrat-Bold.otf");}


:root {
	--accentcolor: #E6007D;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}
html {
	--button-width: 12vh;
	--button-height: 12vh;
	--button-padding: 3vh;
	background: url(../imgs/background.jpg) center/cover no-repeat;
}
html.portrait {
	--button-width: 6.5vh;
	--button-height: 6.5vh;
	--button-padding: 1.75vh;
}
* {
	font-family: Montserrat, sans-serif;
}
a, button {
	background: unset;
	border: unset;
	cursor: pointer;
	text-decoration: unset;
}
a {
	color: var(--accentcolor);
}
#controls {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
}
.controls_button {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: var(--button-width);
	pointer-events: all;
	transition: all .2s;
}
.controls_button:hover {
	width: calc(50vw + var(--button-width));
	z-index: 2;
}
.portrait .controls_button:hover {
	width: 100vw;
}
#impressum_button {
	left: 0;
	flex-direction: row-reverse;
}
#dates_button {
	--button-width: 32vh;
	--button-padding: 2.5vh;
	right: 0;
}
.portrait #dates_button {
	--button-width: 13vh;
	--button-padding: 1vh;
}
.controls_button_inner {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,.7);
	backdrop-filter: blur(5px);
	color: #FFF;
	padding: var(--button-padding);
	transition: all .2s;
}
.controls_button:hover .controls_button_inner {
	background: rgba(0,0,0,.9);
}
#impressum_button .controls_button_inner {
	border-radius: 0 0 1vh 0;
}
#dates_button .controls_button_inner {
	border-radius: 0 0 0 1vh;
}
.controls_button_label {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: 550;
	text-transform: uppercase;
	white-space: pre-wrap;
	overflow: hidden;
}
.controls_button_label,
.controls_button_inner svg {
	width: calc(var(--button-width) - calc(var(--button-padding) * 2));
	height: calc(var(--button-height) - calc(var(--button-padding) * 2));
}
#dates_button .controls_button_label {
	font-size: 4vh;
}
.portrait #dates_button .controls_button_label {
	font-size: 1.6vh;
}
.sidebar {
	position: absolute;
	top: 0;
	background: rgba(0,0,0,.7);
	backdrop-filter: blur(5px);
	color: #FFF;
	width: 0;
	height: 100vh;
	overflow: hidden;
	transition: all .2s;
}
.controls_button:hover .sidebar {
	background: rgba(0,0,0,.9);
	width: 50vw;
}
.portrait .controls_button:hover .sidebar {
	width: calc(100vw - var(--button-width));
}
#impressum {
	left: 0;
}
#dates {
	right: 0;
}
.sidebar_inner {
	width: 50vw;
	height: calc(96vh - 3vh - var(--button-padding));
	margin: var(--button-padding) 1vw 1vh 1vw;
	padding: 1vh 1vw 1vh 1vw;
	overflow-x: hidden;
	overflow-y: scroll;
	text-align: left;
	font-size: 80%;
}
.portrait .sidebar_inner {
	width: calc(100vw - var(--button-width));
	font-size: 100%;
}
.portrait.mobile .sidebar_inner {
	font-size: 175%;
}
.sidebar_inner h1 {
	margin-top: 0;
}
#wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 100%;
}
.portrait #wrapper {
	flex-direction: column;
	width: 100%;
	height: calc(100% - 2vh - var(--button-height));
	margin-top: calc(2vh + var(--button-height));
}
#flyer {
	flex: 0 0 50%;
	display: flex;
	justify-content: flex-end;
	height: 90%;
	max-height: 90%;
}
.portrait #flyer {
	flex: 1 1 auto;
	justify-content: center;
	max-width: 90%;
	min-height: 0;
	height: unset;
	margin-bottom: 2vh;
}
#flyer img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 1vh;
	overflow: hidden;
	object-fit: contain;
}
#buttons {
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	margin-left: 3vh;
	width: 100%;
}
.portrait #buttons {
	flex-direction: row;
	justify-content: center;
	margin: 0;
}
#buttons a {
	display: flex;
	align-items: center;
	padding: 3vh;
	background: rgba(0,0,0,.7);
	backdrop-filter: blur(5px);
	color: #FFF;
	border: 0;
	border-radius: 2.5vh 0 0 2.5vh;
	overflow: visible;
	transition: all .2s;
	transform: translateX(3vh);
}
#buttons a:hover {
	background: var(--accentcolor);
	transform: translateX(0) !important;
}
.portrait #buttons a {
	flex-direction: column;
	border-radius: 2.5vh 2.5vh 0 0;
	transform: translateX(0);
}
#buttons a + a {
	margin-top: 3vh;
}
.portrait #buttons a + a {
	margin-top: 0;
	margin-left: 2.5vh;
}
#buttons a .icon {
	height: 5.5vh;
	width: 5.5vh;
}
#buttons a .label {
	margin-left: 2vh;
	font-size: 5vh;
	font-weight: bold;
	text-transform: uppercase;
}
.portrait #buttons a .label {
	margin-left: 0;
	margin-top: 1.5vh;
	font-size: 1.8vh;
	font-weight: 550;
}
@media (min-aspect-ratio: 2/1) {
	html:not(.portrait) .sidebar_inner {
		height: 80vh;
	}
	html:not(.portrait) #flyer {
		flex: 0 0 40%;
	}
	html:not(.portrait) #buttons {
		margin-left: 6vh;
	}
	html:not(.portrait) #buttons a {
		transform: translateX(6vh);
	}
}
*::-webkit-scrollbar {
	width: 2vw;
	height: 2vw;
}
*::-webkit-scrollbar-track {
	border-color: transparent;
	background-color: transparent;
	border: .5vw solid transparent;
}
*::-webkit-scrollbar-thumb {
	background-clip: padding-box;
	border: .5vw solid transparent;
	border-radius: 1vw;
	background-color: var(--accentcolor);
}
*::-webkit-scrollbar-corner {
	background-color: transparent;
}