html {
    height: 100%;
    background-color: #ffffff;
}

body {
    margin: 0;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    margin: 0 auto;
    padding: clamp(48px, 12vh, 100px) clamp(24px, 6vw, 96px);
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.box {
    text-align: left;
    padding: 0;
    background-color: transparent;
    max-width: 420px;
}

/* Typing animation for the name */
.typing {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #333;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    width: 0ch;
    color: #000000;
    /* Blink only during typing, then hide caret */
    animation: typing 2.5s steps(13) forwards, blink 0.7s step-end 0s 4, hide-caret 0s linear 2.5s forwards;
}

@keyframes typing {
    from { width: 0ch; }
    to { width: 13ch; }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: #333; }
}

/* Stops the caret after typing completes */
@keyframes hide-caret {
    to { border-right-color: transparent; }
}

.typing-subtitle {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #666;
    border-right-color: transparent;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(1rem, 2.1vw, 1.4rem);
    color: #212121;
    margin-top: 18px;
    width: 0ch;
    /* Animation is triggered after title finishes via JS by adding the .animate class */
    animation: none;
}

@keyframes typing-sub {
    from { width: 0ch; }
    to { width: 27ch; }
}

/* Start subtitle animation only when this class is added */
.typing-subtitle.animate {
    /* Blink only during typing, then hide caret */
    animation: typing-sub 3s steps(27) forwards, blink 0.7s step-end 0s 4, hide-caret 0s linear 3s forwards;
}

.sidebyside {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: clamp(24px, 8vw, 96px);
    flex-wrap: wrap;
}

.profile-pic {
    margin-right: 0;
    width: min(22em, 34vw);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    border: 4px solid rgba(0, 0, 0, 0.05);
}

@media (max-width: 780px) {
    .container {
        padding: clamp(56px, 14vh, 96px) clamp(20px, 8vw, 48px);
    }

    .box {
        text-align: center;
    }

    .typing,
    .typing-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .sidebyside {
        flex-direction: column;
        align-items: center;
        gap: clamp(24px, 12vw, 48px);
    }
}

@media (max-width: 600px) {
    .profile-pic {
        display: block;
        width: clamp(180px, 60vw, 260px);
        margin-top: 8px;
    }
}

.contact {
    background-color: #ffffff;
    padding: clamp(40px, 6vw, 60px) 20px clamp(56px, 8vw, 80px);
    margin-top: clamp(32px, 6vh, 72px);
    text-align: center;
}

.contact h3 {
    margin: 0 0 16px;
    font-size: 1.25rem;
    color: #212121;
    letter-spacing: 0.03em;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.contact-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: #212121;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.contact-link:hover,
.contact-link:focus-visible {
    background-color: #212121;
    color: #fff;
    transform: translateY(-3px);
    outline: none;
}

.contact-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}