@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

:root {
	--card-radius: 16px;
	--card-bg: #0008;
	--glass-blur: blur(4px);
}

html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.centered-flex {
	/*margin: 24 px 0;*/
	height: auto;
	width: clamp(320px, 40vw, 920px);

	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	gap: 12px;

	color: white;

	margin: auto;
	padding: clamp(16px, 2vw, 28px) 0;

}

.center-container {
	width: 100%;
	height: 100%;
	padding: 12px;

	perspective: 500px;
	perspective-origin: center;

	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;

	overflow-y: auto;
}

#embed {
	background: #fff5 url("logo.png") no-repeat center;
	background-size: auto 80%;
	background-blend-mode: exclusion;
	border-radius: var(--card-radius);
	overflow: hidden;
	backdrop-filter: var(--glass-blur);
}

#background-video {
	position: fixed;
	background-color: black;
	z-index: -100;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	object-position: center center;

	filter: brightness(0.5) blur(8px);
}

#flex-horizontal-divider {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	gap: 12px;
}

ul.small-link-container {
	backdrop-filter: var(--glass-blur);
	background-color: var(--card-bg);
	border: none;
	border-radius: var(--card-radius);
	padding: clamp(8px, 1vw, 12px);
	margin: 16px 0 16px 8px;
	list-style-type: none;
	flex: 0 0 auto;
	width: min-content;
	min-height: 100%;
	box-sizing: border-box;

	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
ul.small-link-container > li {
	font-size: clamp(2em, 2.5vw, 2.8em);
}

ul.small-link-container > li > * {
	text-decoration: none;
	color: white;
}

ul.small-link-container > li > a {
	transition: text-shadow 0.4s;
}

ul.small-link-container > li > a:hover {
	text-decoration: none;
	color: white;
	text-shadow: 0 0 7px #fff,
	0 0 5px var(--glow-color, #80f),
	0 0 10px var(--glow-color, #80f),
	0 0 20px var(--glow-color, #80f),
	0 0 40px var(--glow-color, #80f),
	0 0 80px var(--glow-color, #80f);
}

ul.link-container {
	backdrop-filter: var(--glass-blur);
	/*background-color: rgba(255, 255, 255, 0.07);*/
	border: none;
	border-radius: var(--card-radius);
	/*padding: 8px;*/
	padding: 0;
	margin: 16px 0;
	list-style-type: none;
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: stretch;
}

ul.link-container > li {
	background-color: var(--card-bg);
	border-radius: var(--card-radius);
}

ul.link-container > li:not(:last-child) {
	margin-bottom: 8px;
}

ul.link-container > li > a {
	font-size: min(8vw, 5vh);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	height: auto;
	width: 100%;
	padding: 0.3em 0.7em;
	box-sizing: border-box;
}

ul.link-container > li > a > img {
	height: min(2.5em, 12vw);
	width: auto;
	margin: 0 16px;
}

ul.link-container > li > * {
	text-decoration: none;

	white-space: nowrap;
	color: #fff;
}

ul.link-container > li > a > span{
	font-size: 0.7em;
}

ul.link-container > li > a > span > i{
	vertical-align: 0 !important;
}

[class^="bi-"]::before, [class*=" bi-"]::before {
}

ul.link-container > li > a > span {
	transition: text-shadow 0.4s;
}

ul.link-container > li > a:hover > span {
	white-space: nowrap;
	text-decoration: none;
	text-shadow: 0 0 7px #fff,
	0 0 5px var(--glow-color, #80f),
	0 0 10px var(--glow-color, #80f),
	0 0 20px var(--glow-color, #80f),
	0 0 40px var(--glow-color, #80f),
	0 0 80px var(--glow-color, #80f);
}

@media not screen and (min-aspect-ratio: 14/10) {
	.centered-flex {
		width: min(96vw, 760px);
	}

	#flex-horizontal-divider {
		flex-flow: column nowrap;
	}

	ul.small-link-container {
		flex-flow: row nowrap;
		justify-content: space-evenly;
		margin: 8px 0 0 0;
		width: 100%;
		min-height: auto;
	}

	ul.small-link-container > li {
		margin: 0 8px !important;
		font-size: clamp(1.8em, 6vw, 2.4em);
	}
}

.small-link {
	--glow-color: grey;
}

.grow {
	transition: all 0.2s ease-in-out;
}
.grow:hover {
	transform: scale(1.2);
}

.shrink {
	transition: all 0.2s ease-in-out;
}
.shrink:hover {
	transform: scale(0.975);
}