@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
@import url('nav.css');
@import url('index.css');
@import url('projects.css');
@import url('services.css');
@import url('connect.css');
@import url('debug.css');

:root {
    --primary-color: #ac672627;
    --secondary-color: #ff0000;
    --font-size: 16px;
    --nav-clearance: 90px;
    --background-color: white;
    --heading-font: 'Overpass', 'Inter', 'Liberation Sans Narrow', sans-serif;
    /*'Bahnschrift', 'DIN Alternate', 'D-DIN', 
    'DIN 1451 Std', 'Roboto Condensed', 'Archivo Narrow', 
    'Arial Narrow', sans-serif;
    */
}

body {
    background-color: var(--background-color);
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    font-style: italic;
    font-weight: bold;
}

li {
    font-family: monospace;
    text-align: justify;
    list-style-type: '→ ';
}

/* Scrolling content fades out into the background before it reaches the nav */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-clearance);
    background: linear-gradient(var(--background-color) 55%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* Keep page content below the vertical span of the fixed top-right nav */
.container {
    padding-top: var(--nav-clearance);
}