header.soulody {
	width: 100%;
	position: fixed;
	top: 16px;
	z-index: 999;
	height: 56px;
	max-height: 56px;

	@media screen and (max-width: 930px) {
		top: 4px;
	}

	> main {
		width: 923px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		@media screen and (max-width: 930px) {
			width: calc(100% - 24px);
			margin: 0 12px;
		}

		> section {
			width: 100%;
			max-width: 735px;
			padding: 8px;
			border-radius: 16px;
			background-color: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(12px);
			display: flex;
			align-items: center;
			position: relative;
			z-index: 10;

			@media screen and (max-width: 930px) {
				max-width: 100%;
			}

			> aside {
				padding: 12px;
				background-color: white;
				border-radius: 8px;
				height: 40px;
				display: flex;

				@media screen and (max-width: 930px) {
					background-color: transparent;
				}

				img {
					height: 15px;
				}
			}

			> div.spacer {
				content: '';
				height: 16px;
				border: 1px solid var(--grey-darken-1);
				margin-left: 8px;
				border-radius: 8px;
				box-sizing: content-box;
				flex-grow: 0;
				flex-shrink: 1;

				@media screen and (max-width: 930px) {
					border: none;
					flex-grow: 1;
					flex-shrink: 0;
				}
			}

			> nav {
				> a {
					color: black;
					text-decoration: none;
				}
			}

			> nav.desktop {
				display: flex;
				justify-content: space-evenly;
				width: 100%;

				@media screen and (max-width: 930px) {
					display: none;
				}
			}

			> nav.lang-switcher {
				display: flex;
				justify-content: center;
				flex-grow: 1;
				margin-right: 10px;
        margin-left: 20px;

				@media screen and (max-width: 930px) {
					justify-content: flex-end;
					margin-right: 16px;
				}
			}

			> nav.mobile {
				display: none;
				width: 40px;
				height: 40px;
				background-color: white;
				border-radius: 8px;
				padding: 8px;
				position: relative;
				font-size: 14px;
				line-height: 21px;

				@media screen and (max-width: 930px) {
					display: block;
				}

				iframe {
					border: none;
				}
			}
		}

		> a.login-button, > ul.mobile-menu > li > a.login-button {
			padding: 8px;
			border-radius: 16px;
			background-color: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(12px);
			display: flex;
			align-items: center;
			color: black;
			text-decoration: none;

			.soulody__header__content__kz__text {
				margin-left: 8px;
			}

			.soulody__header__content__kz__button {
				height: 40px;
				cursor: pointer;
				margin-left: 16px;
				padding: 8px;
				border-radius: 8px;
				background-color: var(--primary);
			}
		}

		> a.login-button {
			width: 180px;
			justify-content: space-between;

			> .soulody__header__content__kz__text {
				text-align: center;
				width: 100%;
			}
		}

		> ul.mobile-menu {
			visibility: hidden;
			opacity: 0;
			position: absolute;
			list-style-type: none;
			background-color: var(--background-secondary);
			padding: 16px;
			overflow: hidden;
			border-radius: 16px;
			transition: all .4s ease-in-out;
			display: flex;
			flex-direction: column;
			width: 100vw;
			height: 0;
			top: -8px;
			left: 0;
			z-index: 1;
			align-items: flex-end;
			justify-content: center;

			&.visible {
				@media screen and (max-width: 930px) {
					visibility: visible;
					opacity: 1;
					height: 100vh;
				}
			}

			> li {
				min-width: max-content;

				&:not(:first-child) {
					margin-top: 21px;
				}

				&:last-child {
					margin-top: 32px;
				}

				> a {
					color: black;
					text-decoration: none;
					margin-right: 8px;
				}
			}
		}

		> a.login-button {
			@media screen and (max-width: 930px) {
				display: none;
			}
		}
	}
}