@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
@import url('./fonts.css');

:root {

	--text-primary: hsl(0 0% 5%);
	--text-secondary: hsl(0 0% 45%);
	--text-tertiary: hsl(0 0% 60%);

	--divider: hsl(0 0% 80%);
	--divider-dark: hsl(0 0% 80%);
	--divider-lighter: hsl(0 0% 90%);
	--divider-light: rgba(0,0,0,0.05);
	--surface: hsl(0 0% 100%);
	--card: hsl(240, 7%, 95%);
	--background: hsl(0 0% 100%);

	--highlight: hsl(0, 0%, 90%);
	--selection: hsl(240, 5%, 98%);
	--selection-active: hsl(240, 5%, 97%);
	--shading: 0,0,0;
	--text-body: 15.5px;

	--page-max-width: 1600px;
	--base-gap: 2rem;
	--column-gap: 20px;
	--nav-height: 80px;

	--column-gap: calc(var(--base-gap) / 2);
	--row-gap: calc(var(--base-gap) * 4);
	--link: var(--text-primary);
	--radius-mid: 0.25rem;
	--radius-large: 0.5rem;
	--shadow-large: 0px 8px 40px rgba(0,0,0,0.08),
		0px 2px 4px rgba(0,0,0,0.12);
	--color-black: hsl(0 0% 0%);
	--color-white: #FFF;

	--ease-normal: cubic-bezier(0.4, 0.2, 0, 1);

	--elevation-1: 0px 0px 1px rgba(0,0,0,0.5),
		0px 1px 2px rgba(0,0,0,0.03);
	--elevation-2: 0px 4px 8px rgba(0,0,0,0.1);
	--elevation-3: 0px 8px 16px rgba(0,0,0,0.1);
	--elevation-btn: 0px 0px 1px rgba(0,0,0,0.5),
		0px 1px 4px rgba(0,0,0,0.05);

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: var(--background);
	/* margin: 1px; */
}
::-webkit-scrollbar-thumb {
	background-color: rgba(var(--shading), 0.25);
	/* margin: 1px; */
	/* border: 1px solid transparent; */
	/* border-radius: 5px; */
	/* box-sizing: border-box; */
	/* background-clip: content-box; */
}

body {
	/* font-family: "Söhne", sans-serif; */
	/* font-feature-settings: "ss01"; */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: var(--text-body);
	line-height: 1.55;

	color: var(--text-primary);
	background-color: var(--background);
	width: 100%;
	max-width: var(--page-max-width);
	margin: auto;
}
a {
	color: var(--link);
	border-bottom: 1px dotted var(--link);
	text-decoration: none;
	&:hover {
		background-color: rgba(0,0,0,0.1);
	}
}

#navigation {
	box-sizing: border-box;
	display: flex;
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	z-index: 1;
	background-color: var(--background);
	height: var(--nav-height);
	box-shadow: var(--elevation-1);
	align-items: center;
	padding: 0 var(--base-gap);
	gap: calc(var(--base-gap) * 1);
	margin: 0 auto;
	box-sizing: border-box;
	h1 {
		/* font-weight: 600; */
	}
	.links {
		display: flex;
		flex: 1;
		gap: 1.5rem;
		grid-column-start: 4;
		grid-column-end: 9;
	}
	.contact {
		text-align: right;
	}
	.arrow {
		opacity: 0.65;
		font-size: 0.75em;
	}
	a {
		border: none;
	}
}

@media screen and (max-width:960px){
    :root {
		--radius-mid: 0.35rem;
        --radius-large: 0.7rem;
		--text-body: 15px;
		--base-gap: 1.5em;
		--nav-height: 96px;
	}
	#navigation {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        justify-content: center;
		/* align-items: flex-start; */
		align-items: center;
		padding-top: var(--base-gap);
        .links {
            white-space: nowrap;
            text-overflow: ellipsis;
            flex: none;
            gap: 1.25em;
        }
        .contact {
            display: none;
        }
    }
}