@import url("./Theme.variables.css");
@import url("../Stylesheets/Window.css");
@import url("./Window.css");
@import url("../Stylesheets/Footer.css");
@import url("./Footer.css");
@import url("../Fonts/patua-one.css");
@import url("../Fonts/viaoda-libre.css");

/* ********************* */
/* Global for this theme */
/* ********************* */
body {
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(142,166,204,1) 20%, rgba(95,141,211,1) 22%, rgba(164,179,201,1) 100%)
}

/*
/*  Alerts
 */
.alert {
	border-radius: 0;
	border: 0;
	margin: 20px 0 20px 0;
}

.alert-danger {
	color: var(--clr-white);
	background-color: hsl(var(--h-red) var(--s-red) var(--l-red));
}

.alert-success {
	color: var(--clr-white);
	background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
}

/*
/*  Buttons
 */
.btn-success {
	--l-green: 40%;
	border-radius: 0;
	border: 0;
	background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
}

.btn-success[disabled] {
	--l-green: 60%;
	background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
}

.btn-success:hover {
	--l-green: 30%;
	background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
}

.btn-success:focus,
.btn-success:focus-visible,
.btn-success:focus-visible {
	outline: 2px solid hsl(var(--h-green) var(--s-green) calc(var(--l-green) - 10%));
	background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
}

#snow-container {
	background-size: cover;
}

/* ***************** */
/*      Headline     */
/* ***************** */
.ak-headline {
	margin-top: 4rem;
	font-family: var(--ak-font-family-heading);
	text-align: center;
	color: var(--ak-color-heading);
	filter: drop-shadow(var(--shadow) var(--clr-black));
}

@media screen and (max-width: 320px) {
	.ak-headline {
		font-size: 3rem;
	}
}
@media screen and (min-width: 547px) {
	.ak-headline {
		font-size: 5rem;
	}
}

.ak-sub-headline {
	margin-top: 0;
	font-family: var(--ak-font-family-heading);
	text-align: center;
	color: var(--ak-color-heading);
	filter: drop-shadow(var(--shadow) var(--clr-black));
}

@media screen and (max-width: 320px) {
	.ak-sub-headline {
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 547px) {
	.ak-sub-headline {
		font-size: 3rem;
	}
}

/* ***************** */
/*      Windows      */
/* ***************** */
.ak-windows {
	margin-top: 4rem;
	background-color: hsl(var(--h-red) var(--s-red) calc(var(--l-red) - 35%));
	box-shadow: 40px 40px 30px hsl(0 0% 10% / 0.5), 15px 15px 15px hsl(0 0% 10% / 0.5);
}
.ak-windows > div {
	transition: var(--tr-bg-clr), var(--tr-open);
}

/* Blue Window */
.ak-windows > div:nth-child(4n+1) {
	background-color: hsl(var(--h-blue) var(--s-blue) var(--l-blue));
}
.ak-windows > div:nth-child(4n+1):hover {
	--l-blue: 40%;
	transform: var(--open-door);
	transform-origin: right;
	z-index: 1;
}
.ak-windows > div:nth-child(4n+1):hover .ak-window-day {
	--l-red: 40%;
}

/* Green Window */
.ak-windows > div:nth-child(4n+2) {
	background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
}
.ak-windows > div:nth-child(4n+2):hover {
	--l-green: 40%;
	transform: var(--open-door);
	transform-origin: right;
	z-index: 1;
}
.ak-windows > div:nth-child(4n+2):hover .ak-window-day {
	--l-red: 40%;
}

/* Orange Window */
.ak-windows > div:nth-child(4n+3) {
	background-color: hsl(var(--h-orange) var(--s-orange) var(--l-orange));
}
.ak-windows > div:nth-child(4n+3):hover {
	--l-orange: 60%;
	transform: var(--open-door);
	transform-origin: right;
	z-index: 1;
}
.ak-windows > div:nth-child(4n+3):hover .ak-window-day {
	--l-red: 40%;
}

/* Red Window */
.ak-windows > div:nth-child(4n+4) {
	background-color: hsl(var(--h-red) var(--s-red) var(--l-red));
}
.ak-windows > div:nth-child(4n+4):hover {
	--l-red: 40%;
	transform: var(--open-door);
	transform-origin: right;
	z-index: 1;
}
.ak-windows > div:nth-child(4n+4):hover .ak-window-day {
	--l-red: 40%;
}

/* Windows shuffle colors on 4 columns */
@media (min-width: 481px) and (max-width: 767px) {
	/* Blue */
	.ak-windows > div:nth-child(1),
	.ak-windows > div:nth-child(7),
	.ak-windows > div:nth-child(15),
	.ak-windows > div:nth-child(23) {
		background-color: hsl(var(--h-blue) var(--s-blue) var(--l-blue));
	}
	.ak-windows > div:nth-child(1):hover,
	.ak-windows > div:nth-child(7):hover,
	.ak-windows > div:nth-child(15):hover,
	.ak-windows > div:nth-child(23):hover {
		--l-blue: 40%;
	}
	/* Green */
	.ak-windows > div:nth-child(2),
	.ak-windows > div:nth-child(8),
	.ak-windows > div:nth-child(16),
	.ak-windows > div:nth-child(24) {
		background-color: hsl(var(--h-green) var(--s-green) var(--l-green));
	}
	.ak-windows > div:nth-child(2):hover,
	.ak-windows > div:nth-child(8):hover,
	.ak-windows > div:nth-child(16):hover,
	.ak-windows > div:nth-child(24):hover {
		--l-green: 30%;
	}

	/* Orange */
	.ak-windows > div:nth-child(3),
	.ak-windows > div:nth-child(5),
	.ak-windows > div:nth-child(14),
	.ak-windows > div:nth-child(21) {
		background-color: hsl(var(--h-orange) var(--s-orange) var(--l-orange));
	}
	.ak-windows > div:nth-child(3):hover,
	.ak-windows > div:nth-child(5):hover,
	.ak-windows > div:nth-child(14):hover,
	.ak-windows > div:nth-child(21):hover {
		--l-orange: 30%;
	}
	.ak-windows > div:nth-child(3):hover .ak-window-day {
		--l-red: 30%;
	}
	/* Red */
	.ak-windows > div:nth-child(4),
	.ak-windows > div:nth-child(6),
	.ak-windows > div:nth-child(13),
	.ak-windows > div:nth-child(22) {
		background-color: hsl(var(--h-red) var(--s-red) var(--l-red));
	}
	.ak-windows > div:nth-child(4):hover,
	.ak-windows > div:nth-child(6):hover,
	.ak-windows > div:nth-child(13):hover,
	.ak-windows > div:nth-child(22):hover {
		--l-red: 30%;
	}
}

/* ***************** */
/*       Window      */
/* ***************** */
.ak-window {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
	border-radius: 50%;
	background-color: var(--ak-window-background);
	aspect-ratio: 1 / 1;
	box-shadow: var(--inset-shadow);
}

.ak-window a {
	flex: 1;
}

.ak-window a:hover {
	text-decoration: none;
}

.ak-window-day {
	display: flex;
	justify-content: center;
	font-family: var(--ff-display);
	color: hsl(var(--h-red) var(--s-red) var(--l-red) / var(--a));
	transition: var(--tr-clr);
}

.ak-window-past .ak-window-day {
	--l-red: 90%;
}

@media (max-width: 480px) {
	.ak-windows > div {
		width: 33.3333333333%;
	}
	.ak-window-day {
		font-size: 22vw;
	}
}
@media (min-width: 481px) and (max-width: 767px) {
	.ak-windows > div {
		width: 25%;
	}
	.ak-window-day {
		font-size: 14vw;
	}
}
@media (min-width: 768px) and (max-width: 992px){
	.ak-window-day {
		font-size: 7rem;
	}
}
@media (min-width: 992px) and (max-width: 1199px){
	.ak-window-day {
		font-size: 10rem;
	}
}
@media (min-width: 1200px) {
	.ak-window-day {
		font-size: 12rem;
	}
}

/* ***************** */
/* Lightbox/Fancybox */
/* ***************** */
@media (min-width: 768px) {
	.ak-window-content {
		max-width: 500px;
	}
}

.tx-adventskalender.lightbox {
	height: min-content;
	min-height: min-content;
	background-color: hsl(var(--h-green) var(--s-green) calc(var(--l-green) + 30%));
}

.ak-window-content h2,
.ak-window-content h3 {
	font-family: var(--ak-font-family-heading);
	text-align: center;
}

.ak-window-content .header h2 {
	margin-top: 0;
	margin-bottom: 2rem;
}

.ak-window-content header h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.ak-window-content header h3 {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

/*
/*  Input fields
 */
.ak-lottery-participation-email input {
	border-radius: 0;
}

.ak-lottery-participation-email input:focus {
	box-shadow: none;
	border: 2px solid hsl(var(--h-green) var(--s-green) calc(var(--l-green) - 10%));
}

.ak-lottery-participation-email a {
	text-decoration: underline;
}

ul:has(li.text-center) {
	list-style-position: inside;
	text-align: center;
}