body {
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	text-align: center;
}

.header, .footer {
	padding: 1em;
	background-color: var(--color-main);
}

.header {
	display: grid;
    width: 100%;
    grid-template-columns: 1fr max-content 1fr;
	grid-gap: 15px;
	color: white;
}

.header-left, .header-right{
	align-content: center;
}
.header-left{
	text-align: left;
}
.header-right{
	text-align: right;
}
.header-center{
	align-content: end;
	font-size: 1.3em;
    font-weight: bold;
}

.header .header-right img.user-icon {
    max-width: 65px;
    border-radius: 100%;
}

.main-container {
	align-content: center;
	padding: 0 15px;
	width: 100vw;
    overflow: auto;
}

.footer {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	/*color: white;*/
    font-size: 2em;
}
.footer a, .footer .foo-btn {
    color: white;
	text-decoration: none;
	cursor: pointer;
}
.footer-left {
	text-align: left;
}
.footer-right {
	text-align: right;
}