/* =============================================================================
   JEKYLL BEAR THEME - BLUE PALETTE
   ============================================================================= */
/* =============================================================================
   FONTS & IMPORTS
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* =============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================= */

:root {
    /* Layout */
    --width: 720px;
    
    /* Typography */
    --font-main: 'IBM Plex Mono', monospace;
    --font-secondary: 'IBM Plex Mono', monospace;
    --font-scale: 0.9em;
    
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    
    /* Transitions */
    --transition-fast: 0.2s;
    
    /* Blue theme */
    --background-color: #FFFFFF;
    --heading-color: #081F3D;
    --text-color: #102A43;
    --link-color: #0B3A82;
    --visited-color: #312E81;
    --main-color: #1E3A8A;
    --muted-color: #5277A8;
    
    /* Interactive colors derived from theme */
    --border-color: var(--muted-color);
}

/* Follow the operating system's dark appearance setting. */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #071426;
        --heading-color: #E6EFFC;
        --text-color: #D4E2F4;
        --link-color: #7EB6FF;
        --visited-color: #A5B4FC;
        --main-color: #4F8DD8;
        --muted-color: #7196C2;
    }
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: var(--spacing-md);
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

strong, b {
    color: var(--heading-color);
}

/* =============================================================================
   LINKS
   ============================================================================= */

a {
    color: var(--link-color);
    font-family: var(--font-main);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 3px solid var(--main-color);
    transition: all var(--transition-fast) ease;
}

a:hover,
a:visited:hover {
    background-color: var(--main-color);
    color: #FFFFFF;
    text-decoration: none;
}

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

/* External link marker */
a[href^="http"]::after {
    content: "↗";
}

.title:hover {
    text-decoration: none;
}

.title {
    font-size: 2.0em;
}

/* =============================================================================
   LAYOUT COMPONENTS
   ============================================================================= */

header {
    margin-bottom: var(--spacing-lg);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px dotted var(--main-color);
}

.header-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.header-text {
    min-width: 0;
}

.header-text .title {
    margin-top: 0;
}

.profile-picture {
    width: 110px;
    height: 110px;
    flex: 0 0 110px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 55%;
}

nav a {
    margin-right: 8px;
}

main {
    line-height: 1.6;
}

footer {
    margin-top: var(--spacing-lg);
    border-top: 3px dotted var(--main-color);
    padding: 25px 0;
    text-align: center;
}

/* =============================================================================
   EXPERIENCE TIMELINE
   ============================================================================= */

ul.experience-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.experience-timeline li {
    display: flex;
    margin-bottom: var(--spacing-sm);
}

.experience-date {
    flex: 0 0 150px;
    color: var(--muted-color);
}

@media (max-width: 560px) {
    .profile-picture {
        width: 90px;
        height: 90px;
        flex-basis: 90px;
    }

    ul.experience-timeline li {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .experience-date {
        flex-basis: auto;
    }
}