:root {
  --purple-dark: #711c91;
  --purple-bright: #ea00d9;
  --teal: #0abdc6;
  --teal-light: #86F9FF;
  --blue-dark: #133e7c;
  --blue-darker: #13274b;
  --blue-darkest: #091833;
  --above-blue: #0014c6;
}

	body {
		font-family: "Inter", sans-serif;
  	color: #fff;
  	word-wrap: break-word;
  	margin: 0;
  	padding: 0;
  	background: #0b1939;
	}

	header {
	}

	main {
		overflow: hidden;
	}

	section {
		width: 100%;
	}

	#logo {
		position: relative;
		height: 380px;
		margin-top: 80px;
		max-width: 100%;
		overflow: hidden;
		color: var(--teal-light);
		font-family: "Exo 2", sans-serif;
	}

	#logo-ctrl, #logo-c, #logo-v {
		position: absolute;
		font-size: 40px;
		border: 2px solid var(--purple-bright);
		height: 96px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#logo-ctrl {
		right: calc(50% + 86px);
    top: 126px;
    width: 150px;
	}

	#logo-c {
		left: calc(50% + 20px);
    top: 23px;
		width: 96px;
	}

	#logo-v {
		left: calc(50% + 132px);
		top: 23px;
		width: 96px;
	}

	#logo-ctrl:hover, #logo-c:hover, #logo-v:hover {
		animation: glow 1s ease-in-out infinite alternate-reverse;
	}

	#heading-left, #heading-right {
		position: absolute;
		font-size: 80px;
	}

	#heading-left {
		right: calc(50% + 40px);	
	}

	#heading-right {
		left: calc(50% - 10px);
    top: 138px;
	}

	.scroll-animated-text {
		  transition: letter-spacing 0.1s linear, filter 0.1s linear;
		}

	#section-program {
		background: linear-gradient(128deg,rgba(9, 24, 51, 0.4) 18%, rgba(10, 189, 198, 0.4) 20%, rgba(9, 24, 51, 0.4) 29%, rgba(9, 24, 51, 0.4) 75%, rgba(234, 0, 217, 0.4) 84%, rgba(9, 24, 51, 0.4) 85%);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.container {
		max-width: 1120px;
		margin: 0px auto;
		padding: 32px 16px;
	}

	footer {
		margin: 64px 32px;
		text-align: center;
	}

	h1, h2, h3, h4 {
		margin-top:	0;
		font-family: "Exo 2", sans-serif;
	}


	h1 {
		color: var(--teal-light);
		font-size: 48px;
		margin-bottom: 0;
	}

	h2 {
		font-size: 32px;
		margin-bottom: 0.2em;
	}

	h3 {
		font-size: 24px;
	}

	p {
		font-size: 1em;
		line-height: 1.6em;
		color: #fff;
		font-family: "Inter", sans-serif;
	}

	* {
		box-sizing: border-box;
	}

	.ingress {
		font-size: 1.2em;
		text-align: center;
		max-width: 720px;
		margin: 32px auto;
		padding: 0 16px;
	}

	.focus-text {
		font-weight: 600;
		color: var(--teal-light);
	}

	.button-container {
		display: flex;
		justify-content: center;
		margin-bottom: 16px;
	}

	.button-style {
		color: var(--teal-light);
		font-size: 24px;
		padding: 16px 32px;
		text-decoration: none;
		transition: 200ms;
		font-family: "Exo 2", sans-serif;
		cursor: pointer;
		text-align: center;
		font-style: italic;
		border: 2px solid var(--purple-bright);
	}

	.button-style:hover {
		animation: glow 1s ease-in-out infinite alternate-reverse;
		text-shadow: 0 0 25px var(--teal-light);
	}

	.button-style-secondary {
		color: var(--teal);
		font-size: 24px;
		padding: 16px 32px;
		text-decoration-line: underline;
  	text-decoration-style: solid;
  	text-underline-offset: 3px;
  	text-decoration-thickness: 2px;
		transition: 200ms;
		font-family: "Exo 2", sans-serif;
		cursor: pointer;
		text-align: center;
		font-style: italic;
		background: none;
		border: none;
	}

	.button-style-secondary:hover {
		text-shadow: 0 0 25px var(--teal-light);
		text-decoration-thickness: 3px;
		text-underline-offset: 6px;
	}

	.program-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.program-list li {
		width: 100%;
		margin-bottom: 32px;
	}

	.program-list img {
		width: 100%;
		height: auto;
	}

	.program-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.program-info {
		padding: 24px 24px 16px 24px;
		background: var(--blue-darker);
		width: calc(50% - 16px);
	}

	.info-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		opacity: 0.7;
	}

	.info-tid {
		background-image: url("bilder/Clock.svg");
		padding-left: 28px;
		background-repeat: no-repeat;
		min-height: 24px;
		line-height: 24px;
		width: fit-content;
		margin: 32px auto;
		font-size: 20px;
		color: var(--teal-light);
	}

	.info-sted, .info-hvem {
		padding-left: 28px;
		background-repeat: no-repeat;
		min-height: 24px;
		line-height: 24px;
		margin: 8px 16px 0px 0px;
	}

	.info-sted {
		background-image: url("bilder/LocationPin.svg");
	}

	.info-hvem {
		background-image: url("bilder/SlayDude.svg");
	}


	@keyframes glow {
		0% {box-shadow: 0 0 15px 5px var(--purple-bright);}
		100% {box-shadow: 0 0 0px 0px var(--purple-bright);}
	}

	#video-background-left, #video-background-right {
		position: fixed;
		z-index: -2;
		transform: translateY(-50%);
		top: 50%;
		max-width: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#video-background-left {
		left: 0;
	}

	#video-background-right {
		right: 0;
	}

	#aboveit-logo path {
		fill: var(--purple-dark);
	}

	@keyframes warpAway {
	  0% {
	    transform: perspective(80px) rotateX(0deg) scale(1);
	    filter: blur(0px);
	    opacity: 1;
	  }
	  20% {
	    transform: perspective(80px) rotateX(8deg) scale(4);
	    filter: blur(20px);
	    opacity: 0;
	  }
	  90% {
	    transform: perspective(80px) rotateX(10deg) scale(0.1);
	    filter: blur(20px);
	    opacity: 0;
	  }
	  96% {
	    transform: perspective(80px) rotateX(0deg) scale(1.1);
	    filter: blur(3px);
	    opacity: 1;
	  }
	  98% {
	    transform: perspective(80px) rotateX(0deg) scale(0.9);
	    filter: blur(3px);
	    opacity: 1;
	  }
	  100% {
	    transform: perspective(80px) rotateX(0deg) scale(1);
	    filter: blur(0);
	    opacity: 1;
	  }


	}

	.takeoff {
		animation: warpAway 5s ease-in-out forwards;
		transform-origin: bottom center;
		transform-style: preserve-3d;
	}


	@media only screen and (max-width: 768px) {

		#logo {
			position: relative;
			height: 220px;
			margin-top: 60px;
		}

		#logo-ctrl, #logo-c, #logo-v {
			position: absolute;
			font-size: 28px;
			border: 2px solid var(--purple-bright);
			height: 64px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#logo-ctrl {
			right: calc(50% + 42px);
	    top: 86px;
	    width: 102px;
		}

		#logo-c {
			left: calc(50% + 0px);
	    top: 13px;
			width: 64px;
		}

		#logo-v {
			left: calc(50% + 76px);
			top: 13px;
			width: 64px;
		}

		#heading-left, #heading-right {
			position: absolute;
			font-size: 50px;
		}

		#heading-left {
			right: calc(50% + 22px);	
		}

		#heading-right {
			left: calc(50% - 10px);
	    top: 98px;
		}

		.program-content {
    	flex-direction: column;
  	}

		.program-info {
			width: 100%;
			margin-bottom: 24px;
		}

		#video-background-left {
			left: -30px;
		}

		#video-background-right {
			right: -30px;
		}

		#section-program {
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
		}
	  

	}