:root {

			--um-color: #192f59;
			--fhd: 16 / 9;


		}

		/* Box sizing rules */
		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		#main:fullscreen #fullscreen {
			display:none;
		}

		/* Prevent font size inflation */
		html {
			-moz-text-size-adjust: none;
			-webkit-text-size-adjust: none;
			text-size-adjust: none;
		}

		/* Remove default margin in favour of better control in authored CSS */
		body,
		h1,
		h2,
		h3,
		h4,
		p,
		figure,
		blockquote,
		dl,
		dd {
			margin-block-end: 0;
		}

		/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
		ul[role='list'],
		ol[role='list'] {
			list-style: none;
		}

		/* Set core body defaults */
		body {
			min-height: 100vh;
			line-height: 1.5;
		}

		/* Set shorter line heights on headings and interactive elements */
		h1,
		h2,
		h3,
		h4,
		button,
		input,
		label {
			line-height: 1.1;
		}

		/* Balance text wrapping on headings */
		h1,
		h2,
		h3,
		h4 {
			text-wrap: balance;
		}

		/* A elements that don't have a class get default styles */
		a:not([class]) {
			text-decoration-skip-ink: auto;
			color: currentColor;
		}

		/* Make images easier to work with */
		img,
		picture {
			max-width: 100%;
			display: block;
		}

		/* Inherit fonts for inputs and buttons */
		input,
		button,
		textarea,
		select {
			font-family: inherit;
			font-size: inherit;
		}

		/* Make sure textareas without a rows attribute are not tiny */
		textarea:not([rows]) {
			min-height: 10em;
		}

		/* Anything that has been anchored to should have extra scroll margin */
		:target {
			scroll-margin-block: 5ex;
		}

		body {
			position: relative;
			margin: 0;
			height: 100%;
			display: flex;
			/* overflow: hidden; */
			flex-direction: column;
		}

		.video-container {
			position: absolute;
			height: 100%;
			width: 100%;
		}

		.video-container video {
			visibility: hidden;
			position: absolute;
			display:none;
		}

		video {
			height: 100vh;
			width: 100%;
			z-index: 5;
			height: 100%;
		}
		
		#switchlang {
			text-transform:uppercase;
			white-space: nowrap;
		}
		
		#switchlang img {
			display:inline-block;
			vertical-align:middle;
		}
		#switchlang span {
			vertical-align:middle;
		}

		.buttons {
			aspect-ratio: 16 / 9;
			width: 100%;
			display: flex;
			flex-direction: row;
			margin: auto;
			justify-content: center;
			/* gap: 1rem; */
			gap: .3rem;
			font-size: 1.1rem;

			position: absolute;
			height: 100vh;
			align-self: anchor-center;
		}
		
		.buttons .left,
		.buttons .right {
			width:20vw;
		}
		
		.buttons .left {
			margin-right:auto;
			display:flex;
			gap:.3rem;
		}
		
		.buttons .right {
			margin-left:auto;
			text-align:right;
		}

		.clickable {
			cursor: pointer;
			z-index: 3;
		}

		.video-container {
			visibility: hidden;
		}

		.video-container.active {
			visibility: visible;
		}

		.video-container video.playing {
			visibility: visible;
			display:block;
			z-index: 6;
		}
		
		.video-container video.playing + video {
			visibility: visible;
			display:block;
			z-index: 5;
		}

		.button,
		button {
			position: relative;
			background: #0000007d;
			color: white;
			padding: .2rem .6rem;
			font-family: monospace;
			border: none;
			height: max-content;
			border-radius: 3px;
			z-index: 30;
			cursor: pointer;
			margin-top: 0.5rem;
		}

		.button:hover,
		button:hover {
			background: black;
		}

		.content {
			position: relative;
			height: 100vh;
			display: flex;
			flex-direction: column;

			aspect-ratio: 16 / 9;
		}

		.fhd-ratio {
			aspect-ratio: var(--fhd);
		}

		.overlay {
			background: rgb(0 0 0 / 71%);
			z-index: 199;
			height: 100vh;
			position: absolute;
			width: 100vw;
		}

		.loader {
			/* color: var(--um-color); */
			color: white;
			font-size: 10px;
			width: 1em;
			height: 1em;
			border-radius: 50%;
			position: absolute;
			animation: mulShdSpin 1.3s infinite linear;
			/* transform: translateZ(0); */
			left: 50%;
			top: 50%;
			/* top: 50vh; */
			z-index: 200;
			transform: translate(-50%, -50%);
		}

		#loader-container {
			position: relative;
			/* visibility: visible; */
			opacity: 1;
			transition: opacity 300ms ease 1s;
			z-index: 199;
			width: 100%;
			height: 100%;

		}
		
		.loadernum {
			position:absolute;
			left: 50%;
			top: 50%;
			z-index: 200;
			transform: translate(-50%, -50%);
			font-family: sans-serif;
			color: white;
		}

		#loader-container.hidden {
			opacity: 0;
			pointer-events: none;
		}

		.button-icon {
			width: 1.6rem;
		}

		#interact {
			z-index: 6;
			visibility:hidden;
			margin-left: auto;
			margin-right:1rem;
		}
		
		
		#homelink {
			margin-left:1rem;
			z-index: 200;
			height:fit-content;
			text-decoration: none;
		}

		.pulse {
			animation: pulse-animation 2s infinite;
		}

		@keyframes pulse-animation {
			0% {
				box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
			}

			100% {
				box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
			}
		}

		@keyframes mulShdSpin {

			0%,
			100% {
				box-shadow: 0 -3em 0 0.2em,
					2em -2em 0 0em, 3em 0 0 -1em,
					2em 2em 0 -1em, 0 3em 0 -1em,
					-2em 2em 0 -1em, -3em 0 0 -1em,
					-2em -2em 0 0;
			}

			12.5% {
				box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
					3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
					-2em 2em 0 -1em, -3em 0 0 -1em,
					-2em -2em 0 -1em;
			}

			25% {
				box-shadow: 0 -3em 0 -0.5em,
					2em -2em 0 0, 3em 0 0 0.2em,
					2em 2em 0 0, 0 3em 0 -1em,
					-2em 2em 0 -1em, -3em 0 0 -1em,
					-2em -2em 0 -1em;
			}

			37.5% {
				box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
					3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
					-2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
			}

			50% {
				box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
					3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
					-2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
			}

			62.5% {
				box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
					3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
					-2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
			}

			75% {
				box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
					3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
					-2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
			}

			87.5% {
				box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
					3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
					-2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
			}
		}