@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
}

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

html {
	margin: 0;
	height: 100%;
	color: #212121;
	font-size: 16px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

body {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee;
}

main {
	position: relative;
	padding: 1rem 1.5rem;
	border-radius: 0.5rem;
	border: 1px solid #e0e0e0;
	background-color: #fafafa;
}

#logo {
	left: 0;
	right: 0;
	bottom: calc(100% + 1rem);
	position: absolute;
	margin: 0 auto;
	width: min(100%, 200px);
}

#label {
	color: #9e9e9e;
	display: inline-block;
	margin-bottom: 1rem;
}

.status {
	gap: 0.5rem;
	display: flex;
	align-items: center;
}

#status-loading {
	color: #212121;
}
#status-loading > img {
	animation: spin 2s linear infinite;
}

#status-success {
	color: #4caf50;
}

#status-error {
	color: #e53935;
}

.hidden {
	display: none !important;
	visibility: hidden !important;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}