/* Gruvbox dark */
:root {
    --light: #FFFF00;
    --warning: #ebcb8b;

    --bg: #282828;
    --bg0_h: #1d2021;
    --bg0: #282828;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;
    --bg0_s: #32302f;

    --fg: #ebdbb2;
    --fg0: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;
    --red: #cc241d;
    --red2: #fb4934;
    --green: #98971a;
    --green2: #b8bb26;
    --yellow: #d79921;
    --yellow2: #fabd2f;
    --blue: #458588;
    --blue2: #83a598;
    --purple: #b16286;
    --purple2: #d3869b;
    --aqua: #689d6a;
    --aqua2: #8ec07c;
    --orange: #d65d03;
    --orange2: #fe8019;
    --gray: #928374;
    --gray2: #a89984;
}

.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}


html {
    font-size: 20px;
}

body {
    font-family: "Space Mono";
    font-size: 15px;
    background-color: var(--bg0);
    color: var(--fg0);
    /* 100% of viewport's height, i.e. browser window */
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

/* for any direct child of the body tag*/
body > * {
    max-width: 50rem;
    width: min(90vw, 50rem);
}

a {
    color: var(--aqua);
}

a:hover {
    color: var(--aqua2);
}


div {
    
}

.site-nav {
    font-size: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    /* background-color: var(--bg1); */
    /* border-bottom: 1px solid var(--bg3); */
}

.site-nav a{
    color: var(--orange);
    text-decoration: none;
    font-weight: bold;
}

.site-nav a:hover {
    color: var(--yellow2);
    text-decoration: underline;
}