@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://use.typekit.net/ajy8fdz.css");

:root {
    --maxWidth-none: "none";
    --maxWidth-xs: 20rem;
    --maxWidth-sm: 24rem;
    --maxWidth-md: 28rem;
    --maxWidth-lg: 32rem;
    --maxWidth-xl: 36rem;
    --maxWidth-2xl: 42rem;
    --maxWidth-3xl: 48rem;
    --maxWidth-4xl: 56rem;
    --maxWidth-full: "100%";
    --maxWidth-wrapper: var(--maxWidth-2xl);
    --spacing-px: "1px";
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    --fontFamily-sans: "neue-haas-unica", "Inter", Montserrat, system-ui,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    --fontFamily-serif: "Merriweather", "Georgia", Cambria, "Times New Roman",
        Times, serif;
    --font-body: var(--fontFamily-serif);
    --font-heading: var(--fontFamily-sans);
    --fontWeight-lightest: 100;
    --fontWeight-light: 200;
    --fontWeight-thin: 300;
    --fontWeight-normal: 400;
    --fontWeight-medium: 500;
    --fontWeight-semibold: 600;
    --fontWeight-bold: 700;
    --fontWeight-extrabold: 800;
    --fontWeight-black: 900;
    --fontSize-root: 16px;
    --lineHeight-none: 1;
    --lineHeight-tight: 1.1;
    --lineHeight-normal: 1.5;
    --lineHeight-relaxed: 1.625;
    /* 1.200 Minor Third Type Scale */
    --fontSize-0: 0.833rem;
    --fontSize-1: 1rem;
    --fontSize-1-5: 1.05rem;
    --fontSize-2: 1.2rem;
    --fontSize-3: 1.44rem;
    --fontSize-4: 1.728rem;
    --fontSize-5: 2.074rem;
    --fontSize-6: 2.488rem;
    --fontSize-7: 2.986rem;
    --color-primary: #298bf5;
    --color-text: #2e353f;
    --color-text-light: #71717a;
    --color-text-lightest: #a1a1aa;
    --color-heading: #1a202c;
    --color-heading-black: black;
    --color-accent: #d1dce5;
}

#override {
    line-height: var(--lineHeight-normal);
    font-family: var(--fontFamily-sans);
    font-size: var(--fontSize-1-5);
    margin: var(--spacing-0) auto;
    max-width: var(--maxWidth-wrapper);
    padding: var(--spacing-0) var(--spacing-2);
    text-align: center;
    color: var(--color-text-light);
    font-weight: var(--fontWeight-normal);
}

#override a {
    text-decoration: none;
    -webkit-transition: background 1s; /* For Safari 3.0 to 6.0 */
    transition: background 1s; /* For modern browsers */
}

#blue {
    color: #298bf5;
}

a {
    color: #298bf5;
}

a:hover{
    color: #003c7c; 
}

#me {
    text-align: left;
}

#me img {
    height: 6rem;
    border-radius: 50%;
    margin-top: var(--spacing-20);
}

#landing {
    display: block;
    padding-top: 3rem;
    text-align: left;
    padding-bottom: 1rem;
    min-height: 1vh;
}

#landing .p1 {
    font-size: var(--fontSize-6);
    font-family: "Inter", sans-serif;
    font-weight: var(--fontWeight-bold);
    color: var(--color-text);
    letter-spacing: -0.025em;
    margin: var(--spacing-0);
}

#landing .p2 {
    font-size: var(--fontSize-3);
    font-family: "Inter", sans-serif;
    font-weight: var(--fontWeight-thin);
    color: var(--color-text-lightest);
    letter-spacing: -0.025em;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-8) var(--spacing-0);
}

#landing .p3 {
    font-size: var(--fontSize-4);
    font-family: "Inter", sans-serif;
    font-weight: var(--fontWeight-semibold);
    color: var(--color-text);
    letter-spacing: -0.025em;
    margin: var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-3) var(--spacing-0);
}

#landing .p4{
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-3) var(--spacing-0) var(--spacing-2) var(--spacing-0);
    font-size: var(--fontSize-2);
    color: var(--color-text);
    font-weight: var(--fontWeight-normal);
}

p {
    line-height: var(--lineHeight-relaxed);
    --baseline-multiplier: 0.179;
    --x-height-multiplier: 0.35;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--spacing-0);
    padding: var(--spacing-0);
}

li {
    margin: var(--spacing-0);
    padding: var(--spacing-0);
}

li p {
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-3) var(--spacing-0);
}

.semester {
    font-size: var(--fontSize-2);
    font-family: "Inter", sans-serif;
    font-weight: var(--fontWeight-bold);
    color: var(--color-text);
}

.row {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.course {
    margin: var(--spacing-0) var(--spacing-1) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-2) var(--spacing-2);
    flex: 1 0;
}

.course-empty {
    margin: var(--spacing-0) var(--spacing-1) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-1) var(--spacing-2);
    flex: 1 0;
}

.course-number {
    font-weight: var(--fontWeight-thin);
    color: #298bf5;
}

.mooc-heading {
    margin: var(--spacing-0) var(--spacing-1) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-3) var(--spacing-0) var(--spacing-2) var(--spacing-2);
    font-size: var(--fontSize-2);
    color: var(--color-text);
}

.date{
    margin: var(--spacing-0) var(--spacing-1) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-2) var(--spacing-0);
    font-weight: var(--fontWeight-thin);
    flex: 1 0; 
}

.exp{
    margin: var(--spacing-0) var(--spacing-1) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-2) var(--spacing-0);
    flex: 2 0; 
}

.exp-para-2{
    margin: var(--spacing-0) var(--spacing-1) var(--spacing-1) var(--spacing-0);
    padding: var(--spacing-0) var(--spacing-0) var(--spacing-2) var(--spacing-0);
    flex: 2 0;
}

#social-ul {
    padding-left: 0;
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-8) var(--spacing-0);
}

#social-ul li {
    display: inline;
    padding-right: 1rem;
}

#social-ul a {
    padding-top: 0;
    text-decoration: none;
    border: none;
}

#social-ul a:hover {
    background-color: white;
    color: white;
}

#social-ul img {
    height: 2.5rem;
}

#hr {
    width: 100%;
    height: 1px;
}

#work-ex li {
    padding-bottom: 1rem;
}

#projects li {
    padding-bottom: 1rem;
}

#awards li {
    padding-bottom: 1rem;
}

#fun-stuff li {
    padding-top: 1rem;
}

#fun-stuff {
    padding-bottom: 1rem;
}

#internal {
    padding-top: 0;
    text-decoration: none;
    border: none;
}

#internal:hover {
    background-color: white;
    color: white;
}

@media (max-width: 978px) {
    #override {
        margin: 0;
        padding: 1rem;
    }
}

i {
    position: relative;
    top: 0.25em;
}

.subhead {
    font-size: var(--fontSize-6);
    font-family: "Jost", sans-serif;
    letter-spacing: -0.025em;
}