body {
			background: #0b0d0c;
			color: #97c1bb;
			font-family: "Inter", system-ui;
			font-optical-sizing: auto;
			font-weight: <weight>;
			font-style: normal;
			display: flex;
			align-content: center;
			justify-content: center;
			flex-flow: column;
			align-items: center;
			margin: 80px 0;
		}

			::-moz-selection {
			    background: #97c1bb;
			    color: #0b0d0c;
			    text-shadow: none;
			}

			::selection {
			    background: #97c1bb;
			    color: #0b0d0c;
			    text-shadow: none;
			}

		h1, h2, p {
			max-width: 720px;
			text-align: left;
		}

		h1, h2 {
			color: #afdcd4;
			margin: 32px 0 8px 0;
		}

		h1 {
			font-size: 48px;
		}

		h2 {
			font-size: 36px;
		}

		p {
			font-size: 18px;
			font-weight: 300;
			line-height: 145%;
			margin: 4px 0 12px 0;
		}

		p.intro {
			font-size: 21px;
		}

		p.before-ul {
			margin-bottom: 4px;
		}

			li{
				margin-bottom: 4px;
			}

		a {
			color: #afdcd4;
			text-decoration: underline;
			text-shadow: 0 0 1px #afdcd4;
  			transition: all 0.25s ease-out;
		}

			a:hover {
				text-decoration: none;
				text-shadow: 0 0 1.5px #afdcd4;
				transition: all 0.25s ease-out;
			}

			a.image {
				text-shadow: none;
				text-decoration: none;
			}

		img {
			max-width: 1440px;
			border-radius: 16px;
			margin: 40px 0;
		}

		img.space {
			width: calc(100% - 16px);
		}

		img.smaller {
			max-width: 1280px;
		}

		video {
			border-radius: 16px;
			width: 100%;
			max-width: 1280px;
		  	height: auto;
		  	margin: 32px 0;
		}

		.container {
			width: 100%;
			max-width: 720px;
			display: flex;
			justify-content: center;
			flex-flow: column;
			padding: 0 16px;
		}

		.button {
			width: 240px;
			height: 48px;
			background: url("img/button.png");
			background-size: 240px 96px;
		}

			.button:hover {
				background-position: 0 100%;
			}



		.cd-image-container {
		  position: relative;
		  max-width: 1920px;
		  margin: 40px 0;
		}
		.cd-image-container img {
		  display: block;
		  margin: 0;
		  width: 100%;
		}

		.cd-image-label {
		  position: absolute;
		  bottom: 0;
		  right: 0;
		  color: #ffffff;
		  padding: 1em;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  opacity: 0;
		  -webkit-transform: translateY(20px);
		  -moz-transform: translateY(20px);
		  -ms-transform: translateY(20px);
		  -o-transform: translateY(20px);
		  transform: translateY(20px);
		  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
		  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
		  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
		}
		.cd-image-label.is-hidden {
		  visibility: hidden;
		}
		.is-visible .cd-image-label {
		  opacity: 1;
		  -webkit-transform: translateY(0);
		  -moz-transform: translateY(0);
		  -ms-transform: translateY(0);
		  -o-transform: translateY(0);
		  transform: translateY(0);
		}

		.cd-resize-img {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 0;
		  height: 100%;
		  overflow: hidden;
		  /* Force Hardware Acceleration in WebKit */
		  -webkit-transform: translateZ(0);
		  -moz-transform: translateZ(0);
		  -ms-transform: translateZ(0);
		  -o-transform: translateZ(0);
		  transform: translateZ(0);
		  -webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
		  border-right: 2px solid rgba(255, 255, 255, 0.5);
		}
		.cd-resize-img img {
		  position: absolute;
		  left: 0;
		  top: 0;
		  display: block;
		  height: 100%;
		  width: auto;
		  max-width: none;
		}
		.cd-resize-img .cd-image-label {
		  right: auto;
		  left: 0;
		}
		.is-visible .cd-resize-img {
		  width: 50%;
		  /* bounce in animation of the modified image */
		  -webkit-animation: cd-bounce-in 0.7s;
		  -moz-animation: cd-bounce-in 0.7s;
		  animation: cd-bounce-in 0.7s;
		}

		@-webkit-keyframes cd-bounce-in {
		  0% {
		    width: 0;
		  }
		  60% {
		    width: 55%;
		  }
		  100% {
		    width: 50%;
		  }
		}
		@-moz-keyframes cd-bounce-in {
		  0% {
		    width: 0;
		  }
		  60% {
		    width: 55%;
		  }
		  100% {
		    width: 50%;
		  }
		}
		@keyframes cd-bounce-in {
		  0% {
		    width: 0;
		  }
		  60% {
		    width: 55%;
		  }
		  100% {
		    width: 50%;
		  }
		}
		.cd-handle {
		  position: absolute;
		  height: 44px;
		  width: 44px;
		  /* center the element */
		  left: 50%;
		  top: 50%;
		  margin-left: -22px;
		  margin-top: -22px;
		  border-radius: 50%;
		  background: #97c1bb url("../img/cd-arrows.svg") no-repeat center center;
		  cursor: move;
		  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
		  opacity: 0;
		  -webkit-transform: translate3d(0, 0, 0) scale(0);
		  -moz-transform: translate3d(0, 0, 0) scale(0);
		  -ms-transform: translate3d(0, 0, 0) scale(0);
		  -o-transform: translate3d(0, 0, 0) scale(0);
		  transform: translate3d(0, 0, 0) scale(0);
		}
		.cd-handle.draggable {
		  /* change background color when element is active */
		  background-color: #445b7c;
		}
		.is-visible .cd-handle {
		  opacity: 1;
		  -webkit-transform: translate3d(0, 0, 0) scale(1);
		  -moz-transform: translate3d(0, 0, 0) scale(1);
		  -ms-transform: translate3d(0, 0, 0) scale(1);
		  -o-transform: translate3d(0, 0, 0) scale(1);
		  transform: translate3d(0, 0, 0) scale(1);
		  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
		  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
		  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
		}

		.backlight {
			background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/800px-Firefox_logo%2C_2019.svg.png') no-repeat;
			height:800px;
			width:800px;
			background-size:cover;
			position:relative;
		}

		.backlight:after {
			content:'';
			width:100%;
			height:100%;
			top:0;
			position:absolute;
			background:inherit;
			filter: blur(16px);
			z-index:-2;
		}

		.filter-blur {
			filter: url(#blur-and-scale)
		}

.tv {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 64px 0;
	max-width: 1280px;
}

	.tv img, .tv video {
		margin: 0;
	}

.tv video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.tv-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*object-fit: cover;*/
	pointer-events: none;
	border-radius: 0;
}

	#lightbox[open] {
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		border: none;
		padding: 0;
		margin: 0;
		display: grid;
		justify-content: center;
		align-content: center;
		background: hsl(40deg 40% 10% / 80%);
	}

	#lightbox img {
		display: block;
		max-width: 100vw;
		max-height: 100vh;
		outline: 0.02em solid white;
	}

	#lightbox-close-button {
		position: absolute;
		inset: 1em 1em auto auto;
		font: inherit;
		text-transform: inherit;
		letter-spacing: inherit;
		border: transparent;
		background: transparent;
		color: white;
	}

	#lightbox-close-button::before {
		content: '✕ ';
		content: '✕ ' / '';
		font-weight: 800;
	}


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

			body {
				padding: 0 16px;
			}

			h1 {
				font-size: 36px;
			}

			h2 {
				font-size: 24px;
			}

			p {
				font-size: 16px;
			}

			img {
				margin: 24px 0;
			}

			.tv {
				width: 100%;
				height: auto;
				margin: 24px 0;
			}

			.tv video {
				position: relative;
				transform: translateX(0);
			}

		}