:root {
	--main-color: #0aa9bf;
	--main-color-secondary: #2ebdd1;
	--main-background-dark: #484e51;
	--main-background: #f4f6f7;
	--main-background-secondary: #9da3ae;
	--main-button-icon: #1b1b1b91;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
	background-color: #f4f6f7;
	@media only screen and (max-width: 68.75em) {
		font-size: 57%;
	}
}
body {
	font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	height: 100vh; 
	overflow-y: scroll; 
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}
.bpFab {
	width: 64px !important;
	height: 64px !important;
}
.app {
    display: grid;
    grid-template-columns: 1fr repeat(8, minmax(0, 15rem)) 1fr;
    grid-template-rows: repeat(4, auto);
    p {
		font-size: 1.7rem;
		font-weight: 500;
		span {
		  color: var(--main-color);
		}
	}
}