/**
* 	Style CSS
**/

:root {
	--bg-dark: #191a1c;
	--bg-light: #ffffff;
	--color-blue-techno: #15a5ff;
	--gap: 12px;
}

body.theme-dark {
	background: var(--bg-dark);
	color: white;
}
body.theme-light {
	background: var(--bg-light);
	color: black;
}
a {
	text-decoration: none;
	color: var(--color-blue-techno);
}


.rounded-circle {
	border-radius: 50%;
}

/* ---- Header ---- */
header nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1rem auto;
	margin-inline-start: auto;
    margin-inline-end: auto;
	max-width: calc(1024px + var(--gap) * 2);
}
.nav-brand, .nav-menu, .nav-option {
	display: flex;
	margin: auto var(--gap);
}
.nav-brand img {
	border: 4px solid var(--color-blue-techno);
	width: 76px;
	height: auto;
}
.nav-brand div {
	margin-left: 8px;
	display: flex;
    align-items: flex-start;
    flex-direction: column;
	gap: 8px;
    justify-content: center;
}
.nav-brand-title {
	font-size: 1.5em;
}
.nav-menu {
	list-style: none;
    word-break: keep-all;
    overflow-x: auto;
    white-space: nowrap;
}
.nav-menu li:hover {
	border-bottom: 2px solid var(--color-blue-techno);
}
.nav-option, .nav-menu {
	font-size: 1.6em;
}
.nav-option span {
	cursor: pointer;
}