:root {
	@media (width >=800px) {
		font-size: 22px;
	}

	@media (width < 800px) {
		font-size: 18px;
	}

	@media (width < 400px) {
		font-size: 12px;
	}

	@media (width >=650px) {
		--header-height: 3rem;
	}

	@media (width < 650px) {
		--header-height: 5.5rem;
	}
}

html {
	scroll-behavior: smooth;
}

header {
	z-index: 3;
	position: fixed;
	top: 0;
	width: 100%;
}

#gypaete-bar {
	padding-left: 0.5em;
	height: 2em;
	display: flex;
	color: #789;
	background-color: #123;

	.left,
	.center,
	.right {
		align-items: center;
		display: flex;
		gap: 1rem;
	}

	.left {
		flex: 1;
		justify-content: flex-start;
	}

	.center {
		flex: 0 0 auto;
		justify-content: center;
	}

	.right {
		flex: 1;
		justify-content: flex-end;
	}

	img {
		height: 2em;
		box-shadow: none;
		vertical-align: center;
	}

	a:hover {
		color: peru
	}

	button {
		cursor: pointer;
	}

	.when_connected {
		display: none;
	}

	.link_cms_connect {
		margin-right: 0.5em;
	}

	.repo_status_label,
	.user_status {
		font-style: italic;
	}

	.repo_status {
		position: relative;
		cursor: default;
	}

	.repo_status_tooltip {
		visibility: hidden;
		position: absolute;
		white-space: nowrap;
		z-index: 1;

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			margin: 0.2em;
		}
	}

	.repo_status:hover .repo_status_tooltip:not(:empty) {
		visibility: visible;
		padding: 0.5em;
		background-color: #456;
		color: #abc;
		border-radius: 0.5em;
		left: 0%;
		top: calc(100% + 1em);
	}

}

/* === html blocks === */

#nav-tabs {
	position: fixed;

	@media (width >=650px) {
		left: 8.25rem;
		right: 6.25rem;
	}

	@media (width <=650px) {
		width: 100vw;
	}

	ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0;
	}

	li {
		list-style-type: none;
		display: inline-block;
		margin: 0;
	}
}

#lang-switch {
	/* width = 2 * 0.75rem + 2 * 3/2 * 1.5rem = 6rem */
	padding: 0;
	z-index: 10;
	text-align: right;

	img {
		height: 1.5rem;
		margin: 0.75rem;
		margin-left: 0;
		box-shadow: 0px 0px 2px var(--col-shadow);
	}

	img:hover {
		filter: drop-shadow(3px 3px 4px var(--col-shadow));
	}
}

#lang-switch a.selected {
	pointer-events: none;
}

#lang-switch a:not(.selected) {
	img {
		filter: brightness(50%) contrast(50%);
	}
}

/* === shortcodes === */

.landing {
	background-color: var(--col-landing-background);
	width: 100vw;
	height: 100vh;

	img {
		width: 100%;
		max-height: calc(100vh - var(--header-height));
		object-fit: cover;
		margin-top: var(--landing-margin-top);

		@media (orientation: landscape) {
			object-position: 50% 0;
			margin-top: max(calc((100vh - 67vw) / 2), var(--header-height));
		}

		@media (orientation: portrait) {
			object-position: 50% 75%;
			margin-top: max(calc((100vh - 133vw) / 2), var(--header-height));
		}
	}
}

.music-sample {
	display: block;
	margin: 0.5em auto;
	width: 100%;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	vertical-align: middle;
	gap: 10px;

	img {
		vertical-align: middle;
	}
}

.profile {
	display: flex;
	align-items: center;

	@media (width < 650px) {
		flex-direction: column;
	}

	img {
		border-radius: 50%;

		@media (width >=650px) {
			margin-right: 1em;
		}
	}
}