* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--sky-blue: #0e85b5;
	--dark: #181818;
	--transparent-dark: #181818ee;
	--green: #45ff45;
	--red: #ff0000;
}

body, #container {
	display: grid;
	font-family: 'Silkscreen', sans-serif;
	color: white;
	background: var(--dark);
	justify-items: center;
	user-select: none;
}

a {
	color: #fff;
}

.r1c1 {
	grid-column: 1;
	grid-row: 1;
}

.coverscreen {
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
}

.fullscreen {
	width: 100%;
	height: 100vh;
	height: 100dvh;
}

.noclick {
	pointer-events: none;
}

.nodisplay {
	display: none !important;
}

.hidden {
	display: none;
	visibility: hidden;
	opacity: 0;
}

.center-text {
	text-align: center;
}

.left-text {
	text-align: left;
}

.center-grid {
	display: grid;
	justify-content: stretch;
	align-content: center;
	grid-gap: 4rem;
	position: relative;
}

.bottom-line {
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 0.1rem solid white;
}

button, label {
	font-family: 'Silkscreen', sans-serif;
	font-size: 1rem;
	padding: 1.5rem 3rem;
	color: var(--dark);
	background: white;
	border: 0.1rem solid white;
	cursor: pointer;
	text-shadow: 0 0 2rem #0002;
	transition: transform 0.12s;
	transform: translateY(0) scale(1);
	justify-self: center;
	border-radius: 4rem;
}
button:active, label:active {
	transform: scale(0.94);
}
button:disabled, button[disabled] {
	filter: opacity(50%);
	cursor: auto;
}
button:disabled:active, button[disabled]:active {
	transform: none;
}

button.outline {
	background: var(--dark);
	color: white;
	border: 0.15rem solid white;
}

button.cancel-measurement {
	display: grid;
	background: none;
	border: none;
	padding: 1rem;
	position: absolute;
	top: 0;
	right: 0;
}
button.cancel-measurement img {
	height: 2rem;
}

#start-container {
	z-index: 4;
	color: white;
	background: var(--sky-blue);
	text-shadow: 0 0 2rem #0002;
}

#start-container .fade-slide {
	grid-gap: 0;
	padding: 3rem 0;
}

#start-container button {
	color: var(--sky-blue);
}

#start-container img.logo {
	justify-self: center;
	width: 20rem;
	max-width: 60vw;
}

#start-container img#contrails {
	margin-top: 1rem;
	border-top: 0.1rem solid white;
	padding-top: 1rem;
	width: 100%;
	max-width: 100vw;
	max-height: 50vh;
	min-height: 40vh;
	object-fit: cover;
}

#start-container #text-padding {
	margin-top: 1rem;
	padding: 0 2rem;
	padding-top: 3rem;
	display: grid;
	grid-gap: 2rem;
	background: var(--sky-blue);
	border-radius: 2rem;
	margin-top: -2rem;
}

.card {
	margin-top: 1rem;
	border: 0.1rem solid white;
	border-radius: 2rem;
	justify-self: center;
	padding: 2rem;
	display: grid;
	grid-gap: 0.5rem;
	max-width: 40rem;
}

#start-container #bottom-logos {
	display: grid;
	justify-self: center;
	grid-gap: 2.5rem;
	margin-top: 3rem;
	padding: 0 2rem;
}
#start-container #bottom-logos img.logo {
	width: 15rem;
}


@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.fade-out {
	animation: fadeOut 1s linear forwards;
	pointer-events: none;
}
@keyframes slideUp {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-2.4rem);
	}
}
.fade-out > .fade-slide {
	animation: slideUp 1.5s ease-in-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.fade-in {
	animation: fadeIn 1s linear forwards;
}
.fade-in.card {
	animation: fadeIn 0.22s linear forwards;
}
.fade-in > .fade-slide {
	transform: translateY(0);
}

.fade-slide {
	padding: 2rem;
}

#callibrate-container {
	transition: background 1s;
}

#callibrate-container img#figure-eight {
	justify-self: center;	
	height: 9rem;
	max-width: 80vw;
}

#actions-container {
	display: grid;
	justify-items: center;
	align-items: center;
	justify-content: center;
	background: white;
}

#locate-container {
	display: grid;
	justify-items: center;
}

video, #screenshot-img {
    vertical-align: middle;
	object-fit: cover;
	z-index: 1;
}

button.green {
	background: var(--green);
}
button.green img {
	filter: invert(100);
}

#locate-ui, #direction-ui {
	display: grid;
	z-index: 3;
}
#direction-ui {
	touch-action: none;
}

img#crosshairs, img#long-crosshairs {
	z-index: 2;
	mix-blend-mode: difference;
	width: min(10rem, 40vmin);
	justify-self: center;
	align-self: center;
}

#long-crosshairs-holder {
	position: relative;
	overflow: hidden;
	display: grid;
	place-content: center;
}

.ui-top {
	display: grid;
	margin-top: min(3rem, 5vh);
	height: min-content;
	text-shadow: 0 0 0.25rem rgba(0,0,0,1), 0 0 3rem rgba(0,0,0,1), 0 0 5rem rgba(0,0,0,1), 0.1rem 0 var(--dark), -0.1rem 0 var(--dark), 0 0.1rem var(--dark), 0 -0.1rem var(--dark);
	color: white;
	justify-items: center;
	border-radius: 5rem;
	text-align: center;
	align-self: start;
}

#title {
	font-size: 2rem;
}

.ui-bottom {
	display: grid;
	height: min-content;
	margin-bottom: min(3rem, 5vh);
	text-shadow: 0 0 0.25rem rgba(0,0,0,1), 0 0 3rem rgba(0,0,0,1), 0 0 5rem rgba(0,0,0,1), 0.1rem 0 var(--dark), -0.1rem 0 var(--dark), 0 0.1rem var(--dark), 0 -0.1rem var(--dark);
	justify-items: center;
	justify-self: center;
	align-self: end;
	z-index: 3;
}
@media (min-aspect-ratio: 8/5) and (max-height: 50rem) {
	.ui-bottom {
		justify-self: end;
		align-self: center;
		margin-right: min(4rem, 10vw);
		margin-bottom: 0;
	}
}

#check-button {
	padding: 1.5rem;
	border-radius: 4rem;
}
#check-button img {
	width: 2rem;
	display: grid;
}

.checkbox-holder {
	font-family: 'Silkscreen', sans-serif;
	font-size: 1rem;
	padding: none;
	color: white;
	background: none;
	border: none;
	cursor: pointer;
	text-shadow: 0.1rem 0 var(--dark), -0.1rem 0 var(--dark), 0 0.1rem var(--dark), 0 -0.1rem var(--dark);
	transition: transform 0.12s;
	transform: translateY(0) scale(1);
	justify-self: center;
	border-radius: none;
}

#direction-container {
	height: 100vh;
}

#analyse-container div.center-grid {
	grid-gap: 2rem;
	justify-content: center;
	max-width: 100vw;
	padding: 4rem 2rem;
}

#analyse-container p {
	text-shadow: 0.1rem 0 var(--dark), -0.1rem 0 var(--dark), 0 0.1rem var(--dark), 0 -0.1rem var(--dark);
}
.unused {
	-webkit-text-stroke: 3rem var(--transparent-dark);
	paint-order: stroke fill;
}

#analyse-container .show-at-end.hide {
	display: none;
}

#model-predictions, #measurement-details {
	width: min( 90vw, 40rem );
	border: 0.1rem solid white;
	border-radius: 2rem;
	justify-self: center;
	padding: 2rem;
	display: grid;
	grid-gap: 0.5rem;
}
#model-predictions.hidden,
#measurement-details.hidden {
	display: none;
}

#measurement-details #flightaware-link {
	text-align: right;
}

.results-grid {
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: 1fr min-content;
	text-align: left;
	grid-column-gap: 1rem;
}

.results-grid .result {
	text-align: right;
	white-space: nowrap;
	display: grid;
	justify-items: right;
	align-items: center;
}

.results-grid .result-wrap {
	text-align: right;
	display: grid;
	justify-items: right;
	align-items: center;
}

#success-message {
	margin-top: 1rem;
}

button.success {
	color: white;
	background: var(--green);
}

svg#trails-svg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100vh;
}

svg#trails-svg path {
	stroke: #ffffff08;
	stroke-width: 0.01;
	fill: none;
}
svg#trails-svg path.target {
	stroke: #ffffff44;
	stroke-width: 0.01;
	stroke-dasharray: 0.05 0.05;
}
svg#trails-svg path.best {
	stroke: #45ff4566;
}

svg#trails-svg path.template {
	display: none;
}

#fatal-error-container {
	background: #761100;
}
#fatal-error-container div.r1c1 {
	grid-gap: 2rem;
}

#privacy-container img {
	justify-self: center;
	width: 20rem;
	max-width: 60vw;
}

#add-to-home-container .fade-slide {
	grid-gap: 1.5rem;
}

#add-to-home-container #logo {
	justify-self: center;
	width: 20rem;
	max-width: 60vw;
	margin-bottom: 2rem;
}


.loader {
	transform: rotateZ(45deg);
	perspective: 1000px;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	color: white;
	justify-self: center;
}
.loader:before,
.loader:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	transform: rotateX(70deg);
	animation: 1s spin linear infinite;
}
.loader:after {
	color: var(--sky-blue);
	transform: rotateY(70deg);
	animation-delay: .4s;
}

@keyframes rotate {
0% {
  transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
  transform: translate(-50%, -50%) rotateZ(360deg);
}
}

@keyframes rotateccw {
0% {
  transform: translate(-50%, -50%) rotate(0deg);
}
100% {
  transform: translate(-50%, -50%) rotate(-360deg);
}
}

@keyframes spin {
0%,
100% {
  box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
  box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
  box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
  box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
  box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
  box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
  box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
  box-shadow: .2em -.2em 0 0 currentcolor;
}
}