:root {

	--c-title: #fff;
	--c-light-text: #decdcd;
	--c-text: #c4aeae;
	--c-bg-darker: #0f0505;
	--c-bg-dark: #170909;
	--c-bg-nav: #170909dd;
	--c-bg: #231313;
	--c-bg-light: #351e1e;
	--c-bg-lighter: #402525;

	--site-width: 1200px;
	--site-padding: 40px;
	--nav-height: 78px;
	--radius: 10px;

	--img-transition1: url("https://data.enchant.cz/img/transition1.webp");
	--img-transition2: url("https://data.enchant.cz/img/transition2.webp");

	--c-brand1: #ee4c3c;
	--c-brand2: #e1254d;
	--color-gradient: linear-gradient(180deg, var(--c-brand1), var(--c-brand2));

	color-scheme: dark;

}

* {box-sizing: border-box;}

body {background: var(--c-bg); color: var(--c-text); font-family: Cantarell, sans-serif; font-size: 20px; line-height: 1.5; margin: 0;}

:is(section, nav, header) > .inner {margin: auto; max-width: var(--site-width); padding: 0 var(--site-padding);}

:is(section, footer, header) > .inner {margin-top: 50px; margin-bottom: 50px; width: 100%;}

@media screen and (max-width: 800px) {
	:root {
		--site-padding: 20px;
	}
	body {font-size: 18px;}
}

.head {position: relative; width: 100%; min-height: 600px; padding-top: 80px; padding-bottom: 110px; display: flex; justify-content: center; align-items: center; z-index: 3; background-color: var(--c-bg);}

.head .top-bg {background-image: url("https://data.enchant.cz/img/bg.webp"); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-position: bottom center; background-size: cover; opacity: .5;}

.head::after {content: ""; background-image: var(--img-transition2); background-size: auto 100%; background-position: center; display: block; left: 0; position: absolute; height: 100px; width: 100%; bottom: 0;}

.page {margin-top: 0px; background: var(--c-bg); position: relative;}
.page.mt {margin-top: 100px;}

.wrapper {display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; align-content: stretch;}

nav {

	& {user-select: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; font-size: 111%; font-weight: 700;}

	.inner {position: relative; display: grid; grid-template-columns: max-content 1fr max-content; grid-template-areas: "logo litems ritems"; gap: 20px; align-items: center; padding: 15px var(--site-padding) 15px !important; transition: margin .2s, border .2s, background 0.2s; margin: 0px auto !important; border: 1px solid transparent;}

	&.floating .inner {background: var(--c-bg-nav); border-bottom: 1px solid var(--c-bg-lighter); box-shadow: 0 2px 10px 0 #11060688; backdrop-filter: blur(10px);}

	a {text-decoration: none; color: var(--c-text); transition: all .1s;}
	a:hover, .active {color: var(--c-title); text-decoration: none;}

	.logo {grid-area: logo; display: flex; gap: 20px; align-items: center;}
	.logo img {width: 46px; height: 46px; border-radius: 50%;}
	.logo > div {color: var(--c-title); display: none;}

	.items {grid-area: litems; display: flex; gap: 20px;}
	.items.ritems {grid-area: ritems;}

	.menu {cursor: pointer; display: none; grid-area: menu; align-items: center;}
	.menu svg {height: 24px; width: 24px;}

	.social::before {content: ""; display: block; width: 1px; background-color: var(--c-text); height: 24px; opacity: .3;}

	@media screen and (min-width: 1200px) {
		.inner {border-radius: var(--radius);}
		&.floating .inner {margin: 10px auto !important; border: 1px solid var(--c-bg-lighter);}
	}

}

#menu-toggle {display: none;}

@media screen and (max-width: 850px) {

	nav {

		.inner {grid-template-columns: 1fr max-content; grid-template-rows: min-content min-content min-content; grid-template-areas: "logo menu" "litems litems" "ritems ritems"; overflow: hidden; height: var(--nav-height); transition: background .2s, height .2s;}
		.menu {display: flex;}

		.logo div {display: block; opacity: 0; transition: all .2s;}
		&.floating .logo div {opacity: 1;}

		.items {flex-direction: column; gap: 10px; height: auto; line-height: 35px; font-size: 120%; justify-content: flex-start;}
		.items :is(a, svg) {margin: 15px 0; transition: all .3s; opacity: 0;}

		.social {margin-top: 5px; font-size: 24px;}
		.social::before {display: none;}

	}
	#menu-toggle:checked + nav {

		.inner {height: 100vh; overflow-y: auto; background-color: var(--c-bg-dark);}
		.items :is(a, svg) {margin: 0px; opacity: 1;}

	}

}

.social {display: flex; gap: 20px; align-items: center;}
.social > * {display: flex;}

h1 {font-size: 300%; margin: 2.4rem 0 2rem;}
h2 {font-size: 220%; margin: 2.2rem 0 1.8rem;}
h3 {font-size: 180%; margin: 1.9rem 0 1.5rem;}
h4 {font-size: 110%; margin: 1.8rem 0 1.4rem;}

h1, h2, h3, h4, h5, h6 {color: var(--c-title); line-height: 1.2;}

.home-grid {text-align: left; display: grid; grid-template-columns: 1fr 250px; width: 100%; gap: 20px; align-items: center; grid-template-areas: "title logo";}
.home-grid img {width: 100%;}

@media screen and (max-width: 900px) {
	.home-grid {text-align: center; display: flex; flex-direction: column-reverse;}
	.home-grid img {max-width: 120px; margin: auto;}
	.head {min-height: 450px;}
}

.head {text-align: center; text-wrap: balance;}
.head .inner :is(h1, p, img) {filter: drop-shadow(0 0 10px #0009);}

.head h1 {margin: 0; font-size: 290%; font-weight: 800;}
.head p {font-size: 120%; font-weight: 700; margin: 10px 0 20px;}

:is(button, .btn) {background: transparent; color: var(--c-title); font-family: inherit; font-size: inherit; cursor: pointer; border: 0;}

.btn {

	& {background-color: var(--c-bg-lighter); border-radius: var(--radius); padding: 9px 16px; transition: all .1s; display: inline-block; line-height: 1.2; box-shadow: 0 2px 5px 0 #0004; position: relative; overflow: clip;}
	&:hover {background-color: color-mix(in srgb, var(--c-bg-lighter) 90%, #000); text-decoration: none;}
	&:active {transform: scale(.99);}
	&:focus-visible {outline: 2px solid var(--c-text);}

	&.btn-outline {
		& {background-color: transparent; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #fff5;}
		&:hover {background-color: #fff2;}
	}

	&.btn-primary {
		& {background: var(--color-gradient); text-shadow: 0 2px 5px #0003;}
		&:after {content: ""; position: absolute; inset: 0; margin: -1px; z-index: -1; background: #0002; opacity: 0; border-radius: var(--radius); transition: all .1s;}
		&:hover:after {opacity: 1;}
	}

	&:before {content: ""; position: absolute; left: -40px; top: 0; height: 100%; width: 40px; background-image: linear-gradient(-70deg, transparent 20%, #fff5, transparent 80%);}
	&:hover:before {animation: blade 2s infinite;}

	svg {width: 1.2em; height: 1.2em; float: left; margin-right: 7px;}

}

@keyframes blade {
	0% {left: -45%;}
	50% {left: 115%;}
	100% {left: 115%;}
}

.text-center {text-align: center;}

.text-gradient {background: var(--color-gradient); background-clip: text; -webkit-text-fill-color: transparent;}

.text-blob {margin: 20px auto; max-width: 700px; text-wrap: balance;}

.dark-zone {padding: 130px 0; position: relative; background: var(--c-bg-darker);}
.dark-zone::before, .dark-zone::after {content: ""; background-image: var(--img-transition1); background-position: center; background-size: auto 100%; display: block; left: 0; position: absolute; height: 100px; width: 100%; top: 0;}
.dark-zone::after {background-image: var(--img-transition2); top: auto; bottom: 0;}

.ul-centered {max-width: 450px; margin: auto; text-align: left;}

a {color: var(--c-title); text-decoration: none;}
a:hover {text-decoration: underline;}

strong {color: var(--c-light-text);}

.card {background: var(--c-bg-light); box-shadow: 0 0 10px 0 #0005; padding: 16px 20px; border-radius: var(--radius);}
.card .title {font-size: 23px; color: var(--c-title); font-weight: 700;}

a.card {text-decoration: none !important; color: var(--c-text);}

footer {

	& {user-select: none; background-image: linear-gradient(#351e1e55), url("https://data.enchant.cz/img/footer.webp"); background-size: auto 120%; background-position: top center; margin-top: 30px; padding-top: 90px; padding-bottom: 20px; background-color: #0005; box-shadow: 0 120px 100px 0px #0005; font-weight: 700; position: relative;}
	&::before {content: ""; background-image: var(--img-transition1); background-position: center; background-size: auto 100%; display: block; left: 0; position: absolute; height: 100px; width: 100%; top: -24px;}

	b {color: var(--c-title);}

	.logo {display: flex; margin-bottom: 10px; align-items: center; gap: 20px; justify-content: center; font-size: 22px;}
	img {max-width: 40px;}

}

.members h4 span {font-weight: 400; color: var(--c-text);}

.member-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
.member-grid > * {padding: 12px; display: grid; grid-template-columns: 1fr max-content; display: grid; gap: 15px; grid-template-columns: 1fr max-content;}
.member-grid > * > div {padding-left: 5px;}
.member-grid .nick {font-size: 23px; color: var(--c-title); font-weight: 700;}
.member-grid img {border-radius: 5px; height: 100%;}

@media screen and (max-width: 900px) {
	.member-grid {grid-template-columns: 1fr;}
}

.hidden {opacity: 0;}

.table {display: block; overflow-x: auto; text-align: left; margin: 0 -10px;}
.table table {min-width: 100%;}
.table * {white-space: nowrap;}
.table td {padding: 0 10px;}
.table table thead {font-weight: 700; color: var(--c-title);}
.table-end-right table td {text-align: right;}
.table-end-right table :is(tr, thead, tbody) td:nth-child(1) {text-align: left;}

.form-layout {

	& {background: linear-gradient(#0005), url("https://data.enchant.cz/img/bg.webp"); width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; display: grid; justify-content: center; align-items: center; overflow-y: auto;}

	.card {padding: 30px; max-width: 700px; background: var(--c-bg-dark); border-radius: var(--radius); box-shadow: 0 5px 10px #0007; border: 1px solid var(--c-bg-lighter); margin: 60px 10px;}

	img {width: 74.3px; height: 70px;}

	h4 {margin: 17px 0;}
	p {margin: 7px 0;}
	.btn {margin-top: 10px;}

	:is(input:not(.btn), textarea) {width: 100%; outline: none; font: inherit; font-size: inherit; padding: 10px 15px; color: var(--c-title); border-radius: var(--radius); border: 1px solid var(--c-bg-lighter); background-color: var(--c-bg);}
	textarea {resize: vertical; min-height: 120px;}

	form > div {margin: 15px 0;}

}