@import 'normalise.css';
@import './fonts.css';
@import './utility.css';
@import 'style.css';

:root {
	--bold-font: ArchivoBlack-Regular;
	--font-second: Archivo;
	--font-out: 8-bitArcadeOut;
	--font-default: Play;
	--font-default-bold: Play-Bold;

	/* colors */
	--yellow: #e0f67a;
	--green: #5ea77a;
	--light-gray: #efeeee;
	--purple: #daa0f9;

	/* generell */
	--main-background-color: #2b5aa7;
	--main-font-color: #000000;
	--title-color: var(--light-gray);
	--sub-title-color: #000000;
	--nav-text-color: var(--light-gray);
	--nav-hover-color: #e0f67a;

	--img-border-color: #3b3b3b;

	--text-shadow: var(--yellow);

	/* concerts */
	--locale-color: #0c0a0a;
	--date-color: #000;

	--btn-background-color: var(--purple);
	--btn-background-color-hover: var(--yellow);
	--btn-border-color: #0c0a0a;
	--btn-text-color: #0c0a0a;
	--btn-text-color-hover: #0c0a0a;

	--release-border: #000000;

	/* contact */
	--card-background: #3b3b3b;
	--card-text-color: #ffffff;

	/* release */
	--release-background: rgb(38, 38, 38);
	--release-text: #ffffff;

	--border-standard: 3px solid black;
}

#app {
	max-width: 100%;
	padding: 1rem;
	margin: 0;
	font-weight: normal;
	/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
}

body {
	max-width: 100%;
	background-color: var(--main-background-color);
	margin: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-family: var(--font-default);
}

.border {
	border: var(--border-standard);
}

h1 {
	color: var(--title-color);
	font-family: var(--bold-font);
	font-size: 3rem;
	display: flex;
	justify-content: center;
}

/* .left, .right{
		margin: 1rem;
	} */
	a.active {
		color: var(--yellow);
	}
	.left,
	.right {
		border-bottom: 2px solid;
		line-height: initial;
	}

	.homelink {
		font-family: var(--bold-font);
		font-size: 0.9rem;
		justify-content: start;
		display: flex;
		position: absolute;
		bottom: 1rem;
		left: 1rem;
		background-color: #6fcc93;
		padding: 0.25rem 0.5rem;
		border: 3px solid black;
		color: black;
	}
	.homelink:hover {
		color: black;
		background-color: var(--yellow);
	}

	.header {
		max-width: 100%;
		margin-bottom: 1rem;
	}

	@media only screen and (min-width: 901px) {
		.header {
			display: flex;
			justify-content: space-between;
			/* padding-bottom: 5rem; */
			flex-direction: row-reverse;
			width: 50rem;
		}

		.header:not(:has(div.home)) {
			width: 60rem;
		}

		.nav-wrapper {
			display: flex;
			align-items: end;
		}

		.right {
			text-align: right;
		}
		.nav-wrapper {
			display: flex;
			justify-content: space-between;
			width: 100%;
			flex-direction: column;
		}

		.nav-wrapper.home {
			flex-direction: row;
		}

		.right {
			text-align: left;
		}
	}

	

	a:hover {
		color: var(--nav-hover-color);
	}

	.nav-wrapper {
		gap: 0.5rem;
	}

	@media only screen and (min-width: 901px) {
		a {
			font-size: 1.6rem;
		}

		.header {
			margin-top: 1rem;
		}
	}

	.title {
		align-items: center;
		display: flex;
		max-width: 20rem;
		justify-content: start;
	}

	@media only screen and (min-width: 901px) {
		.title {
			font-size: calc((100vw - 9rem) / 12);
		}

		.homelink {
			display: none;
		}
	}

	@media only screen and (max-width: 900px) {
		.header {
			width: 100%;
		}
		.title {
			display: none;
		}

		.nav-wrapper {
			display: flex;
			width: 100%;
			justify-content: space-between;
			flex-direction: row;
		}

		.right {
			text-align: right;
		}
	}

	@media only screen and (min-width: 430px) and (max-width: 900px) {
		.title {
			font-size: 4rem;
			justify-content: center;
		}
	}

	@media only screen and (max-width: 1400px) {
		.nav-wrapper.home {
			display: flex;
			width: 100%;
			justify-content: space-between;
			flex-direction: row;
		}
	}

	@media only screen and (max-width: 600px) {
		a {
			font-size: 1.2rem;
		}
	}

	.page-wrapper {
		padding: 1rem 1rem;
		display: flex;
		flex-direction: column;
		overflow: auto;
		height: 100dvh;
		align-items: center;
	}

	@media only screen and (min-width: 601px) {
		:global(body) {
			/* background-image: url('../bkg4.png'); */
			width: 100%;
			/* background-repeat: no-repeat;
			background-attachment: fixed; */
			height: 100%;
		}

		.content-wrapper {
			display: flex;
			flex-direction: column;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 80vh;
			width: 70vw;
			align-items: center;
		}
	}

	/* @media only screen and (min-width: 2085px) {
		:global(body) {
			background-image: url('../bkg.png');
		}
	}

	@media only screen and (max-width: 600px) {
		:global(body) {
			background-image: url('../bkg2.png');
		}
	} */