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

* {
	font-family: "Outfit";
}

body {
	height: 100%;
	background: #0f0f0f;
}

.sep {
	border-left: 1px solid white;
	border-width: 0.12em;
	padding-left: 0.7em;
}

.right {
	float: right;
}

.date-input {
	width: 30vw;
	margin-right: 1em;
}

.topwrapper {
	display: flex;
	justify-content: center;
	height: 5%;
	width: 100%;
}

.topbar {
	display: grid;
	grid-template-columns: repeat(8, minmax(2em, 100em));
	background: #0f0f0f;
	height: 20%;
	width: 100%;
	border: 1px solid #0f0f0f;
	padding: 0.5em;
	text-align: left;
	transition: 0.15s;
}

.topbar:hover {
	border: 1px solid white;
}

.topbar span {
	display: inline-block;
	line-height: 1.3em;
	margin: 0.3em;
	margin-top: 0;
	margin-bottom: 0;
}

.topbar .today-text {
	text-align: left;
	color: white;
}

@media screen and (max-width: 1200px) {
	.topbar {
		display: grid;
		grid-template-columns: repeat(4, minmax(2em, 100em));
	}

	.right {
		margin: 0;
	}
}

@media screen and (max-width: 700px) {
	.topbar {
		display: grid;
		grid-template-columns: repeat(2, minmax(2em, 100em));
	}
}