@font-face {
	src: url(../font/rubik.ttf);
	font-family: rubik;
}

body, button, section > input {
	font-family: rubik;
	color: #FFF;
}

body, h1, h2, h3, ul {
	margin: 0;
}

body {
	background:
		radial-gradient(circle at center, rgba(10, 10, 18, 0.2) 0%, #06060c 85%),
		linear-gradient(135deg, #00bcff 0%, #0032ff 35%, #ff003c 70%, #ff7800 100%);
	user-select: none;
}

main, #file {
	position: relative;
}

main {
	height: 100dvh;
	overflow-y: scroll;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

section, #file input {
	position: absolute;
}

section, #bottom {
	display: flex;
}

section {
	min-height: 100%;
	width: 100vmin;
	left: 50%;
	transform: translateX(-50%);
	padding: 6vmin;
	box-sizing: border-box;
	flex-direction: column;
	gap: 3vmin;
}

section:not(:last-child) {
	filter: blur(0.3vmin);
}

h1 {
	text-align: center;
	font-size: 9vmin;
}

h2 {
	font-size: 7vmin;
}

h3, ul {
	font-size: 5vmin;
}

h3 {
	text-align: start;
}

button, button #file, section > input, video, #file, img {
	border-radius: 6vmin;
}

button, section > input, #file {
	border: 0.1vmin solid #FFF;
}

button, section > input {
	min-height: 12vmin;
	background: #0000;
	font-size: 6vmin;
}

label {
	margin: 0 0 -3vmin 6vmin;
	font-size: 5vmin;
}

section > input, button {
	padding: 0 6vmin;
}

section > input {
	outline: 0;
}

button, #file {
	overflow: hidden;
}

button:enabled:active {
	scale: 0.97;
}

button:disabled {
	opacity: 0.5;
}

button img, #file * {
	width: 100%
}

button h2 {
	margin: 3vmin;
}

button h3 {
	margin: 2vmin 4vmin;
}

#qr {
	height: 60vmin;
	width: 60vmin;
	margin: 0 auto;
}

video, #bottom * {
	background-position: center;
}

video {
	height: 88vmin;
	object-fit: cover;
	background: url(../img/placeholders/qr_scanner.svg);
}

#file input {
	height: 100%;
	opacity: 0;
}

#bottom {
	margin: auto 0 0;
	justify-content: space-between;
	position: sticky;
	bottom: 6vmin;
	pointer-events: none;
}

#bottom * {
	width: 12vmin;
	background-size: 62%;
	background-repeat: no-repeat;
	backdrop-filter: blur(0.6vmin);
	pointer-events: auto;
}

#back {
	background-color: #55F7;
	background-image: url(../img/buttons/back.svg);
}

#add {
	background-image: url(../img/buttons/add.svg);
}

#ok {
	background-image: url(../img/buttons/ok.svg);
}

#add, .add {
	background-color: #5F57;
}

.del {
	background-color: #F557;
}

ul {
	padding: 0 0 0 5vmin;
}

@media (hover: hover) {
	button:enabled:hover {
		filter: invert(1);
		background-color: #000 !IMPORTANT;
	}
}

@media (hover: none) {
	button:enabled:active {
		filter: invert(1);
		background-color: #000 !IMPORTANT;
	}
}