/* todo: use font-sm, font-md, etc. */
/* todo: be responsive to page size */
/* todo: add favicon */
/* todo: move #intro-container to top of page (under #nav) */
/* todo: don't let #nav scroll down */
/* todo: make #nav disappear on scroll-up */

/* variables */

:root {
    --font-xxs: 13;
    --font-xs: 16;
    --font-sm: 20;
    --font-md: 24;
    --font-lg: 32;
    --font-xl: 40;
    --font-xxl: 80;
    --color-accent: #64ffda;
    --color-accent-overlay: #64ffda19;
    --color-background: #0a192f;
    --color-background-light: #112240;
    --color-content: #8892b0;
    --color-title: #ccd6f6;
    --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
    --font-sans: "Calibre", "Inter", "San Francisco", "SF Pro Text",
        -apple-system, system-ui, sans-serif;
}

/* fonts */

@font-face {
    font-family: "Calibre";
    font-weight: 400;
    src: url("../fonts/Calibre-Regular.ttf") format("truetype"),
        url("../fonts/Calibre-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Calibre";
    font-weight: 600;
    src: url("../fonts/Calibre-Semibold.ttf") format("truetype"),
        url("../fonts/Calibre-Semibold.woff2") format("woff2");
}

@font-face {
    font-family: "SF Mono";
    font-weight: 400;
    src: url("../fonts/SFMono-Regular.ttf") format("truetype"),
        url("../fonts/SFMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "SF Mono";
    font-weight: 600;
    src: url("../fonts/SFMono-Semibold.ttf") format("truetype"),
        url("../fonts/SFMono-Semibold.woff2") format("woff2");
}

/* generic and full-page styles */

body {
    counter-reset: heading-num -1 nav-num 0;
    line-height: 1.3;
    font-size: 20px;
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-content);
}

section {
    counter-increment: heading-num 1;
    content: counter(heading-num);
    min-height: 100vh;
    padding: 0 150px;
}

ul {
    padding-left: 0;
}

li {
    list-style: none;
}

p {
    margin-top: 0;
}

a {
    text-decoration: none;
    color: var(--color-accent);
}

p a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.accent {
    color: var(--color-accent);
}

.subsection-header {
    margin-bottom: 0;
    font-size: 24px;
    color: var(--color-title);
}

/* section header styles */

.numbered-heading {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    font-size: clamp(24px, 5vw, 32px);
    font-family: var(--font-mono);
    color: var(--color-title);
}

.numbered-heading:before {
    content: "0" counter(heading-num) ".";
    margin-right: 16px;
    font-size: clamp(16px, 3vw, 24px);
    color: var(--color-accent);
}

.numbered-heading:after {
    content: "";
    display: block;
    margin-left: 20px;
    height: 1px;
    width: 300px;
    background-color: var(--color-background-light);
}

.styled-li:before {
    content: "▹";
    margin-right: 16px;
    color: var(--color-accent);
}

/* image styles */

img {
    display: block;
    width: 100%;
    border-radius: 5px;
    mix-blend-mode: screen;
}

.img-wrapper:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: var(--color-accent);
    mix-blend-mode: multiply;
}

.img-wrapper:hover:after {
    display: none;
}

.img-wrapper:not(:hover) img {
    filter: grayscale();
}

/* navbar styles */

#nav {
    display: flex;
    align-items: center;
    padding: 20px 40px;
    font-size: 13px;
    font-family: var(--font-mono);
}

#nav li:first-child {
    margin-right: auto;
}

#nav-logo {
    font-size: 24px;
}

.nav-link {
    counter-increment: nav-num 1;
    margin-right: 32px;
    color: var(--color-title);
}

.nav-link:before {
    counter-increment: section 1;
    content: "0" counter(nav-num) ".";
    margin-right: 8px;
    color: var(--color-accent);
}

.nav-link:hover {
    color: var(--color-accent);
}

#nav-resume {
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 5px;
}

#nav-resume:hover {
    background-color: var(--color-accent-overlay);
}

/* intro styles */

h1 {
    margin: 0;
    line-height: 1.1;
    font-size: clamp(40px, 8vw, 80px);
    font-weight: 600;
}

#intro-container {
    margin: 128px 0 20px 0;
}

#welcome {
    padding-left: 4px;
    font-size: 16px;
    font-family: var(--font-mono);
    color: var(--color-accent);
}

#name {
    color: var(--color-title);
}

#mission-statement {
    margin: 32px 0 0 4px;
    max-width: 540px;
}

/* about styles */

#about-container {
    display: flex;
    gap: 50px;
}

#about-text {
    flex: 3;
}

#about-img {
    flex: 2;
    position: relative;
    align-self: flex-start;
}

#skills {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 200px));
    gap: 0 16px;
    padding: 0;
}

/* work styles */

/* projects styles */

/* academics styles */

.citation {
    padding-left: 60px;
    text-indent: -60px;
}

/* contact styles */

/* footer styles */