/* Theme */

html.light {
	--tertiary-background-light: hsla(75, 95%, 15%, .1);
	--tertiary-background-light-solid: hsl(75, 15%, 90%);
	--box-background: hsl(0, 100%, 100%);
	--box-background-light: hsla(0, 100%, 100%, .25);
	--box-background-focus: hsl(0, 100%, 100%);
	--box-feature-background: hsl(195, 15%, 96%);
	--box-feature-background-focus: hsl(195, 15%, 96%);
	--box-feature-background-transparent: hsla(195, 15%, 96%, .75);
	--box-color: hsl(0, 0%, 5%);
	--box-color-light: hsl(0, 0%, 25%);
	--box-color-lightest: hsl(0, 0%, 40%);
	--success-color: hsl(75, 35%, 25%);
	--success-color-light: hsl(75, 35%, 25%);
	--error-color: hsl(0, 30%, 40%);
	--error-color-light: hsl(0, 30%, 60%);
}

html.dark {
	--box-color: hsla(0, 100%, 100%, .85);
	--box-color-light: hsla(0, 100%, 100%, .75);
	--box-color-lightest: hsla(0, 100%, 100%, .6);
	--success-color: hsl(0, 0%, 50%);
	--success-color-light: hsl(0, 0%, 50%);
	--error-color: hsl(0, 0%, 0%);
	--error-color-light: hsl(0, 0%, 0%);
}

/* BB */

html.BB:not(.popup) {
	background-image:
		radial-gradient(circle at bottom,
			hsl(195, 60%, 90%) 0%,
			hsl(0, 100%, 100%) 100%);
}

html.BB.light {
	--background: hsl(190, 50%, 98%);
	--primary-color: hsl(200, 60%, 20%);
	--primary-color-light: hsla(200, 60%, 20%, .7);
	--primary-color-lighter: hsla(200, 60%, 20%, .5);
	--primary-color-lightest: hsla(200, 60%, 20%, .25);
	--primary-background-light: hsla(200, 60%, 20%, .1);
	--secondary-color: hsl(200, 35%, 40%);
	--secondary-background-light: hsla(200, 95%, 15%, .1);
	--secondary-background-light-solid: hsl(200, 16%, 91%);
	--tertiary-color: hsl(75, 45%, 25%);
}

html.BB.dark {
	--background: hsl(210, 60%, 0%);
	--primary-background-light: hsla(210, 20%, 90%, .07);
	--primary-color: hsl(210, 20%, 90%);
	--primary-color-light: hsla(210, 20%, 90%, .5);
	--primary-color-lighter: hsla(210, 20%, 90%, .25);
	--primary-color-lightest: hsla(210, 20%, 90%, .1);
	--secondary-color: hsl(210, 20%, 70%);
	--secondary-background-light: hsla(210, 20%, 70%, .07);
	--secondary-background-light-solid: hsl(212, 31%, 19%);
	--tertiary-color: hsl(210, 20%, 70%);
	--tertiary-background-light: hsla(210, 20%, 70%, .07);
	--tertiary-background-light-solid: hsl(212, 31%, 19%);
	--box-background-light: hsla(210, 30%, 10%, .25);
	--box-background-focus: hsl(210, 30%, 8%);
	--box-feature-background: hsl(210, 40%, 10%);
	--box-feature-background-focus: hsl(210, 40%, 10%);
	--box-feature-background-transparent: hsla(210, 40%, 10%, .75);
	--box-background: hsl(210, 30%, 10%);
}

html.BB:not(.popup).loaded.light {
	background-size: cover;
	background-position: center -100%;
	background-image: url(../media/background/BB/light.svg),
		radial-gradient(circle at bottom,
			hsl(195, 60%, 90%) 0%,
			hsl(0, 100%, 100%) 100%);
}

html.BB:not(.popup).loaded.dark {
	background-image: url(../media/background/BB/dark.svg),
		radial-gradient(circle at bottom,
			hsl(210, 60%, 30%) 0%,
			hsl(210, 60%, 0%) 100%);
}

/* VB */

html.VB:not(.popup) {
	background-image:
		radial-gradient(circle at bottom,
			hsl(175, 20%, 95%) 0%,
			hsl(0, 100%, 100%) 100%);
}

html.VB.light {
	--background: hsl(175, 20%, 90%);
	--primary-color: hsl(175, 60%, 20%);
	--primary-color-light: hsla(175, 60%, 20%, .7);
	--primary-color-lighter: hsla(175, 60%, 20%, .5);
	--primary-color-lightest: hsla(175, 60%, 20%, .25);
	--primary-background-light: hsla(175, 60%, 20%, .1);
	--secondary-color: hsl(175, 40%, 35%);
	--secondary-background-light: hsla(175, 70%, 15%, .075);
	--secondary-background-light-solid: hsl(175, 5%, 91%);
	--tertiary-color: hsl(75, 10%, 35%);
}

html.VB.dark {
	--background: hsl(175, 60%, 0%);
	--primary-background-light: hsla(185, 20%, 90%, .07);
	--primary-color: hsl(185, 20%, 90%);
	--primary-color-light: hsla(185, 20%, 90%, .5);
	--primary-color-lighter: hsla(185, 20%, 90%, .25);
	--primary-color-lightest: hsla(185, 20%, 90%, .1);
	--secondary-color: hsl(185, 20%, 70%);
	--secondary-background-light: hsla(185, 20%, 70%, .07);
	--secondary-background-light-solid: hsl(187, 31%, 19%);
	--tertiary-color: hsl(185, 20%, 70%);
	--tertiary-background-light: hsla(185, 20%, 70%, .07);
	--tertiary-background-light-solid: hsl(187, 31%, 19%);
	--box-background-light: hsla(185, 30%, 10%, .25);
	--box-background-focus: hsl(185, 30%, 8%);
	--box-feature-background: hsl(185, 40%, 10%);
	--box-feature-background-focus: hsl(185, 40%, 10%);
	--box-feature-background-transparent: hsla(185, 40%, 10%, .75);
	--box-background: hsl(175, 30%, 10%);
}

html.VB:not(.popup).loaded.light {
	background-size: 100%;
	background-position: center bottom;
	background-image: url(../media/background/VB/light.svg),
		linear-gradient(0deg, hsl(175, 20%, 90%) 0%, hsl(0, 100%, 100%) 100%);
}

html.VB:not(.popup).loaded.dark {
	background-size: 100%;
	background-position: center bottom;
	background-image: url(../media/background/VB/dark.svg),
		linear-gradient(0deg, hsl(175, 60%, 30%) 0%, hsl(175, 60%, 0%) 100%);
}

/* Shared */

* {
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

*:not(input) {
	-webkit-tap-highlight-color: transparent;
}

html:not(.popup) {
	background: var(--background) no-repeat;
}

html:not(.popup), html:not(.popup) body {
	font: 13px Oxygen, Arial;
	color: var(--primary-color);
	padding: 0;
	margin: 0;
	overflow: hidden;
	height: 100%;
}

html[data-platform="ios"], html[data-platform="ios"] body {
	height: 100vh;
}

html[data-platform="ios"] body {
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
}

html.light .dark {
	display: none;
}

html.dark .light {
	display: none;
}

html.popup {
	background: #FFF;
}

html.popup body {
	font: 13px Oxygen, Arial;
	color: var(--primary-color);
}

x-v {
	display: inline;
	padding-right: .25em;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: inline-block;
}

html:not(.popup) #app {
	position: relative;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.fa, .fab, .fad, .fal, .far, .fas {
	min-width: 1em;
}

@media (max-device-width: 768px) {
	html.BB {
		background-size: 200% !important;
		background-position: center bottom !important;
	}

	html.VB {
		background-size: 350% !important;
		background-position: right bottom !important;
	}
}