header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	background-color: var(--bg-dark);
	padding-bottom: 0.5em;
	background-image: linear-gradient(to top, var(--bg-light) 0, var(--bg-dark) 0.5em 100%);
}
.header__left, .header__center, .header__right {
	display: flex;
	align-items: center;
}
.header__left {
	justify-content: flex-start;
}
.header__center {
	justify-content: center;
	flex-wrap: wrap;
}
.header__right {
	justify-content: flex-end;
}
@media screen and (max-width: 500px) {
	header {
		/*
		left | right
		------------
		   center
		*/
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
	}
	.header__center {
		/* at the end, takes the full width */
		order: 3;
		grid-column: 1 / -1;
	}
}
.header__logo {
	height: 6em;
	margin: 0.5em;
	border-radius: 1em;
	box-shadow: var(--shadow);
}
/* User information */
@media screen and (max-width: 1023px) {
	header .user-info {
		margin: 0.5em;
	}
}
@media screen and (min-width: 1024px) {
    header .user-info {
        text-align: right;
		margin-right: 0.5em;
    }
}
header .user-info {
    flex-shrink: 0;
}
.user-info {
	position: relative;
}
/* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free
Copyright 2024 Fonticons, Inc.

Compressed with https://svgomg.net/
*/
.user-info__button::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.3em;
	background-color: currentColor;
    /* user */
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm-46 48C80 304 0 384 0 482c0 17 13 30 30 30h388c17 0 30-13 30-30 0-98-80-178-178-178h-92z"/></svg>');
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}
.user-info__menu {
	position: absolute;
	top: calc(100% + 0.35335em);  /* sqrt(2) / 2 / 2 (half of the height of the arrow) */
	right: 0;
	box-shadow: 0px 4px 4px #00000030, 0px 12px 12px #00000015;
	border: 0.0625em solid var(--primary);
	padding: 0.25em 0.5em;
	border-radius: 0.5em;
	background-color: var(--bg-dark);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}
.user-info__menu::before {
	content: "";
	position: absolute;
	right: 0.5em;
	top: -0.03125em;  /* half of the menu border */
	width: 1em;
	height: 1em;
	border: 0.0625em solid var(--primary);
	background-color: var(--bg-dark);
	border-bottom-right-radius: 100%;  /* prevent the arrow background from overlapping the content */
	border-right: none;
	border-bottom: none;
	transform: translate(-50%, -50%) rotate(45deg);
}
.user-info__open .user-info__menu {
	opacity: 1;
	pointer-events: all;
}