:root {

	--c-title: #fff;
	--c-light-text: #decdcd;
	--c-text: #c4aeae;
	--c-bg-darker: #0007;
	--c-bg: #181218;
	--c-bg-light: #272127;
	--c-bg-lighter: #312B31;

	--site-width: 1200px;
	--site-padding: 40px;
	--nav-height: 80px;
	--radius: 5px;

	--img-transition1: url("../img/transition.png");
	--img-transition2: url("../img/transition2.png");

	--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: 100px; padding-bottom: 110px; display: flex; justify-content: center; align-items: center; z-index: 3;}

.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;}

.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 .8s;}

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

}

.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: 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;}