/* fonts first */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&family=Roboto+Mono:wght@400;500;700&display=swap');


:root {
    --page-padding: clamp(1.5rem, 5vw, 5rem);
    --content-width: 1200px;
    --asiimov-white: #f2f2f2;
    --asiimov-black: #151515;
    --asiimov-orange: #ff6a00;
}

* {
    box-sizing: border-box;
}

.page-container {
    width: min(
        calc(100% - 3rem),
        1200px
    );

    margin-inline: auto;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
}


body {

    margin: 0;

    background: var(--asiimov-white);

    color: var(--asiimov-black);

    font-family: "Roboto Condensed", sans-serif;
}


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

/* Navigation */

.site-header {

    position: fixed;

    top: 2rem;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

}



.nav {

    display: flex;

    gap: clamp(.75rem, 2vw, 2rem);

    padding: .6rem 1rem;

    border: 2px solid var(--asiimov-black);

    background: var(--asiimov-white);

}



.nav a {

    color: var(--asiimov-black);

    text-decoration: none;

    font-size: .85rem;

    letter-spacing: .08em;

    color: #111;

    font-family: "Roboto Condensed", sans-serif;

    font-weight: 500;

    transition: opacity 0.2s ease;

}



.nav a::before {

    content: "[";

    color: var(--asiimov-orange);

}



.nav a::after {

    content: "]";

    color: var(--asiimov-orange);

}



.nav a:hover {
    
    color: #ff6a00;
    opacity: .6;

}


.nav .active {

    font-weight: bold;

}