:root {
    /* Base font size is typically 16px in most browsers */
    --spacing-xs: 0.25em;  /* 4px at base 16px */
    --spacing-sm: 0.5em;   /* 8px at base 16px */
    --spacing-md: 1em;     /* 16px at base 16px */
    --spacing-lg: 1.25em;  /* 20px at base 16px */
    --spacing-xl: 1.5em;   /* 24px at base 16px */
    --spacing-xxl: 2em;    /* 32px at base 16px */
    --page-max: 650px;
}

html[data-theme="dark"] {
    --global-font-size: 15px;
    --global-line-height: 1.4em;
    --global-space: 10px;
    --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
      serif;
    --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
      serif;
    --background-color: #222225;
    --page-width: 60em;
    --font-color: #e8e9ed;
    --invert-font-color: #222225;
    --secondary-color: #a3abba;
    --tertiary-color: #a3abba;
    --primary-color: #62c4ff;
    --error-color: #ff3c74;
    --progress-bar-background: #3f3f44;
    --progress-bar-fill: #62c4ff;
    --code-bg-color: #3f3f44;
    --input-style: solid;
    --display-h1-decoration: none;
}

p {
    margin: 0 !important;
}

body {
    padding: var(--spacing-lg);
    margin: 60px auto !important;
    max-width: 650px;
}

header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.terminal-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

nav.terminal-menu > ul {
    display: flex;
    flex-direction: row;
    justify-content: start !important;
}

nav.terminal-menu > ul > li {
    margin-right: 2em;
}

@media screen and (min-width: 768px) {
    header {
        display: flex;
        flex-direction: row;
    }
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
    height: 100%;
}

#cool-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 100vw;
    overflow: hidden;
}

a.image-link:hover {
    cursor: pointer;
    background-color: inherit;
}

#bio-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;  
}

#bio-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


#quote-container blockquote {
    text-wrap-style: balance;
}

#quote-container cite {
    margin-left: 1em;
}

#header-text-container {
    flex: 1;
}

#page-title {
    padding: 0px;
}

#page-title::before {
    content: "";
}

#links-container {
    padding: 8px;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--spacing-xxl);
    max-height: fit-content;
}

.portrait {
    width: 120px;
    height: auto;
    display: none;
}

#mountain-img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (min-width 651px) {
}

.icon, .image-link {
    width: 40px !important;
    height: 40px !important;
}

.job-card {
    padding: 15px;
}

.company-title {
    font-weight: bold;
}

.company-subtitle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.job-date-range {}

#resume-download-link {
    width: fit-content;
    padding: 10px;
    border: solid 1px;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

@media screen and (min-width 651px) {
    .portrait {
        width: 200px;
        height: fit-content;
        display: block;
    }
    body {
        width: 650px;
    }
}

.fade-start {
    visibility: hidden;
    opacity: 0;
}

.fade-end {
    visibility: visible;
    opacity: 1;
    transition: opacity 1000ms ease-in, visibility 100ms ease-in 0ms;
}