/* General Styles */
body {
    font-family: 'InterVariable', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding: 2rem;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 560px;
    margin: 0 auto;
}

/* Light Mode (Default) */
:root {
    --bg-color: #fff;
    --text-color: #111;
    --secondary-text-color: #555;
    --tertiary-text-color: #999;
    --link-color: #111;
    --border-color: #e5e5e5;
}

/* Dark Mode (Auto) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #222;
        --text-color: #eee;
        --secondary-text-color: #bbb;
        --tertiary-text-color: #888;
        --link-color: #eee;
        --border-color: #333;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

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

a span {
    border-bottom: 1px solid var(--tertiary-text-color);
}

a:hover span {
    border-bottom-color: var(--link-color);
}

/* Arrow Icon for Links */
a::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 3C3.22386 3 3 3.22386 3 3.5C3 3.77614 3.22386 4 3.5 4V3ZM8.5 3.5H9C9 3.22386 8.77614 3 8.5 3V3.5ZM8 8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5H8ZM2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L2.64645 8.64645ZM3.5 4H8.5V3H3.5V4ZM8 3.5V8.5H9V3.5H8ZM8.14645 3.14645L2.64645 8.64645L3.35355 9.35355L8.85355 3.85355L8.14645 3.14645Z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: baseline;
}

@media (prefers-color-scheme: dark) {
    a::after {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 3C3.22386 3 3 3.22386 3 3.5C3 3.77614 3.22386 4 3.5 4V3ZM8.5 3.5H9C9 3.22386 8.77614 3 8.5 3V3.5ZM8 8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5H8ZM2.64645 8.64645C2.45118 8.84171 2.45118 9.15829 2.64645 9.35355C2.84171 9.54882 3.15829 9.54882 3.35355 9.35355L2.64645 8.64645ZM3.5 4H8.5V3H3.5V4ZM8 3.5V8.5H9V3.5H8ZM8.14645 3.14645L2.64645 8.64645L3.35355 9.35355L8.85355 3.85355L8.14645 3.14645Z' fill='%23888'/%3E%3C/svg%3E");
    }
}


/* Header */
header {
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}

.profile-img {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin-right: 16px;
}

.header-text h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

.header-text p {
    margin: 0;
    color: var(--secondary-text-color);
}

/* Sections */
section {
    margin: 36px 0;
}

section:first-of-type {
    margin-top: 36px;
}

h2 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.section-content p {
    color: var(--secondary-text-color);
    margin: 16px 0;
}

/* Item Layout (for Work, Writing, etc.) */
.item {
    display: flex;
    flex-direction: row;
    margin: 24px 0;
    align-items: baseline;
}

.item:first-child {
    margin-top: 24px;
}

.meta-info {
    width: 140px;
    margin-right: 36px;
    color: var(--tertiary-text-color);
    text-align: left;
    flex-shrink: 0;
}

.item-content {
    flex: 1 1;
}

.item-content h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.item-content .description {
    margin-top: 8px;
    color: var(--secondary-text-color);
}

/* Contact Links */
.contact-links {
    margin-top: 24px;
}

.contact-links a {
    margin-right: 24px;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    body {
        padding: 24px 16px;
    }

    .item {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 16px;
    }
    
    .meta-info {
        text-align: left;
        margin-bottom: 4px;
        width: auto;
    }

    .contact-links {
        margin-left: 16px;
    }
}