@charset="utf-8";

:root {
	--offwhite: #F3F3F3;
	--dark: #141414;


	--sidepadding-large: 7%;
	--sidepadding-small: 5%;

	--tinyletterspacing: 0.03rem;
	--tinyExtraLetterspacing: 0.01rem;

	--fontScaleMinSize : 2;
	--fontScaleMaxSize : 3;

	--midBreakpoint : 35rem;
	--maxBreakpoint : 70;

	--bp-medium-large : 70rem;
}

* {
  box-sizing: border-box;
  -webkit-font-variant-ligatures: common-ligatures;
          font-variant-ligatures: common-ligatures;
  /*border: solid red 1px;*/
}

::-moz-selection {
  background: #A282FF; /* WebKit/Blink Browsers */
}
::selection {
  background: #A282FF; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #A282FF; /* Gecko Browsers */
}

html[dir=ltr] {
	text-align: right;
}

html {
	background-color: var(--dark);
}

html,
body {
  padding: 0;
  margin: 0;
  color: var(--offwhite);
}

a:link, 
a:visited {
	text-decoration: none;
	color: #78E7FF;

	will-change: color, font-variation-settings;
	transition: color 0.1s linear, opacity 0.1s linear;
}
a:hover, a:focus, a:active {
	text-decoration: none;
	transition: color 0.1s linear, opacity 0.1s linear;
}


.circle {
	width: 3rem;
	height: 3rem;
	position: fixed;
	border-radius: 50%;
	z-index: -100;
}
.circle:nth-of-type(1) {
	background-color: #78E7FF;
	top: 15%;
	left: 10%;
}
.circle:nth-of-type(2) {
	background-color: #A282FF;
	top: 30%;
	right: 15%;
}
.circle:nth-of-type(3) {
	background-color: #FF7179;
	bottom: 15%;
	left: 35%;
}
.circle:nth-of-type(4) {
	background-color: #FF9C28;
	bottom: 25%;
	right: 30%;
}

.circle:hover {
	/*transform: scale(0.8);*/
}


/* Top */
.top {
	padding: var(--sidepadding-small) var(--sidepadding-small) 0 var(--sidepadding-small);
	width: 100%;
	display: block;
	z-index: 100;
	/*display: flex;*/
}
.title {
	/*height: 5rem;*/
}
.title svg {
	width: 100%;
}
.sub-title {
	margin: 1rem 0 1.5rem 0;
	font-size: 2rem;
	font-family: "KesslerSuperDisplay";
	text-transform: uppercase; 
}

.video {
	border-top: solid 1px var(--offwhite);
	margin: 0 var(--sidepadding-small);
	padding-top: 2rem;
	z-index: 1000;
}
.video video, .video .block {
	/*background-color: gray;*/
	/*height: 667px;*/
	width: 100%;
	max-width: 335px;
	background-color: #111111;
	border-radius: 0.5rem;
}
.block {
	border-top: solid 1px var(--offwhite);
	height: 1px;
}

h1 {
	margin: 0;
}
.text {
	border-top: solid 1px var(--offwhite);
	margin: 2rem var(--sidepadding-small) 2rem var(--sidepadding-small);
	padding: 1.55rem 0 2rem 0;
	font-family: "Lector";
	font-size: 1.1rem;
	z-index: 100;
	color: #EEE;
}
.download a {
	width: 10rem;
	display: block;
}
.download img {
	margin-top: 1.5rem;
	width: 10rem;
}
a:hover,
a:focus,
a:active {
	opacity: .2;
}

footer {
	margin: 3rem var(--sidepadding-small) 3.5rem var(--sidepadding-small);
	border-top: solid 1px #444;
	padding-top: 1rem;
	font-family: "Lector";
	font-size: 1rem;
	color: #AAAAAA;
}
footer span {
	font-variant: no-common-ligatures lining-nums;
}

@media (min-width: 40rem ) {
	.sub-title {
    	font-size: 3rem;
	}
	.text {
		font-size: 1.2rem;
	}
}

@media (min-width: 55rem ) {
	.top {
		display: flex;
		border: red;
		align-items: baseline;
	}
	.inline-block {
	  display: inline-block;
	}
	.title {
		height: 5rem;
		margin-right: 1.5rem;
	}
	.title svg {
		height: 100%;
		width: auto;
	}
	.sub-title {
    	font-size: 2.5rem;
		margin-top: -.4rem;
	}

	/* Columns */
	.col {
		display: flex;
	}
	.video {
		border-top: 0;
		padding-top: 0;
	}
	.video video, .video video, .video .block {
		width: 264px;
	}
	.text {
		margin: 0 var(--sidepadding-small) 0 0;
		font-size: 1.2rem;
	}
}

@media (min-width: 75rem ) {
	.top {
		display: flex;
		border: red;
		align-items: baseline;
		padding: var(--sidepadding-large) var(--sidepadding-large) 0 var(--sidepadding-large);
	}
	.inline-block {
	  display: inline-block;
	}
	.title {
		height: 10rem;
		margin-right: 3rem;
	}
	.title svg {
		height: 100%;
		width: auto;
	}
	.sub-title {
	    max-width: 30rem;
	    font-size: 3.05rem;
	}

	/* Columns */
	.col {
		display: flex;
	}
	.video {
		border-top: 0;
		padding-top: 2rem;
		margin: 0 4rem 8rem var(--sidepadding-large);
	}
	.video video, .video .block {
		width: 335px;
	}
	.text {
		padding-top: 3rem;
		margin: 2rem var(--sidepadding-large) 0 0;
		width: 100%;
	}
	.desc {
		max-width: 43rem;
		line-height: 1.6;
		font-size: 1.4rem;
	}
	.download img {
		margin-top: 1.8rem;
	}
	footer {
		margin: 3rem var(--sidepadding-large) 3.5rem var(--sidepadding-large);
	}
}

/* Accessibility styles */
@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

/* Allow toggling for light / dark mode */