:root {
	/*--topnav-background: none;*/
	--topnav-color: #696969;

	--topnav-hover-color: white;
	--topnav-hover-background-color: #131212;

	--topnav-active-color: black;
	--topnav-active-background-color: #969696;
}

.notif {
	color: white;
	background-color: red;
}

body {
	color: white;
	background-color: rgb(26, 24, 24);
	list-style-type: none;
}

a {
	color: cornflowerblue;
}

.topnav {
	/*background-color: var(--topnav-background);*/
	overflow: hidden;
}

.topnav a {
	float: left;
	color: var(--topnav-color);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:hover {
	background-color: var(--topnav-hover-background-color);
	color: var(--topnav-hover-color);
}

.topnav a.active {
	background-color: var(--topnav-active-background-color);
	color: var(--topnav-active-color);
}

.roboto, h1, h2, h3, h4, h5, h6 {
	font-family: "Roboto", sans-serif;
}

.open-sans, body {
	font-family: "Open Sans", sans-serif;
}

.main {
	display: grid;
	place-items: center;
}