/* sebastiansack.com */

:root {
	--primary-color:    #000000;
	--secondary-color:  #676767;

	--primary-background-color:             #FFFFFF;
	--primary-background-color-transparent: #FFFFFFCC;
	--secondary-background-color:           #EEEEEE;

	--hover-color: #1177CC;
}

html, body {
	width: 100%;
	height: max-content;

	margin: 0;
	padding: 0;

	font-family: "Arial", Arial, sans-serif;
}

#top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	max-width: 100%;
    flex-wrap: nowrap; /* Ensures elements wrap on smaller screens */
	margin: 2em 0;
}

#top-bar {
	width: 100%;
	height: max-content;

    display: flex;
    justify-content: center;
    align-items: left; 
    padding: px;
}

#site-header {
	margin: 0;
	width: 100%;

	display: flex;
    align-items: center;
}

#site-title {
	margin: 0.1em 0;

	width: max-content;
	height: 1em;
	
	font-size: 1em;
	color: var(--primary-color);
}

/* #site-subtitle {
	margin: 0 0;

	font-size: 0em;
	color: var(--secondary-color);
} */

#nav-menu {
    display: flex;
}

.nav-menu-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	width: max-content;
	height: 100%;

	color: var(--secondary-color);

	cursor: default;
}

.first-nav-item.nav-menu-item {
	margin-left: 0;
}

.nav-menu-item.active-menu-item {
	border-bottom: 2px solid var(--primary-color);

	color: var(--primary-color);
}

.nav-menu-item:hover {
	color: var(--hover-color);
	border-color: var(--hover-color);
}

.custom-link {
	color: var(--hover-color);
}