@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRA.woff2)
		format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

:root {
	--base-color: #131a36;
	--base-variant: #1d233f;
	--text-color: #ffffff;
	--secondary-text: #a4a5b8;
	--primary-color: #3a435d;
	--accent-color: #0071ff;
	--button-bg: var(--base-variant);
	--button-bg-hover: #8181814d;
	--button-border: var(--button-bg-hover);
	--button-text: #ffffff;
	--nav-gap: 15px;
}

html.lightmode {
	--base-color: #e6e6e6;
	--base-variant: #d1d2d5;
	--text-color: #111528;
	--secondary-text: #232738;
	--primary-color: #3a435d;
	--accent-color: #0071ff;
	--button-bg: var(--base-variant);
	--button-bg-hover: #8181814d;
	--button-border: var(--button-bg-hover);
	--button-text: #111528;
}

html,
body {
	font-family: Arial, 'Noto Sans';
	color: var(--text-color);
	background-color: var(--base-color);
	min-height: 100vh;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px min(25px);
	background-color: var(--base-variant);
	gap: var(--nav-gap);
}

nav ul.nav {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
	gap: var(--nav-gap);
}

nav ul.nav li {
	margin-right: 0;
}

nav .link,
.login-button {
	color: var(--button-text);
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	padding: 10px 16px;
	border: 1.5px solid var(--button-border);
	border-radius: 16px;
	background-color: var(--button-bg);
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
}

nav .link:hover,
.login-button:hover {
	background-color: var(--button-bg-hover);
	color: var(--text-color);
}

.right-section {
	display: flex;
	align-items: center;
	gap: var(--nav-gap);
}

.login-button {
	cursor: pointer;
	font-family: inherit;
}

#theme-switch {
	height: 45px;
	width: 45px;
	padding: 0;
	border-radius: 16px;
	background-color: var(--button-bg);
	border: 1.5px solid var(--button-border);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#theme-switch:hover {
	background-color: var(--button-bg-hover);
}

#theme-switch svg {
	fill: var(--button-text);
}

#theme-switch .sun {
	display: none;
}

html.lightmode #theme-switch .moon {
	display: none;
}

html.lightmode #theme-switch .sun {
	display: block;
}

.user-menu {
	position: relative;
	display: inline-block;
}

.user-button,
.logout-button {
	background: var(--button-bg);
	border: 1.5px solid var(--button-border);
	color: var(--text-color);
	font-size: 18px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 16px;
	transition: all 0.2s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 45px;
	box-sizing: border-box;
	font-family: inherit;
	white-space: nowrap;
}

.user-button {
	min-width: fit-content;
	justify-content: space-between;
}

.user-button:hover {
	background-color: var(--button-bg-hover);
}

.user-avatar {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	object-fit: cover;
	flex-shrink: 0;
}

.user-name {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
}

.chevron {
	fill: var(--button-text);
	transition: transform 0.2s ease;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.chevron.rotated {
	transform: rotate(180deg);
}

.logout-button {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	width: 100%;
	justify-content: center;
	background: var(--button-bg);
	color: var(--text-color);
	animation: fadeIn 0.2s ease-out;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logout-button:hover {
	background: var(--button-bg-hover);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}