* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #faf8fc;
    --text: #2f2f2f;
    --secondary: #666;
}

body.dark {
    --bg: #111111;
    --text: #f4f4f4;
    --secondary: #b0b0b0;
}

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

    font-family: Georgia, serif;

    min-height: 100vh;

    transition: 0.3s;
}

.container {
    max-width: 650px;

    margin: 0 auto;

    padding: 5rem 1.5rem;

    text-align: center;
}

.profile-pic {
    width: 95px;
    height: 95px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 1.5rem;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    border: 2px solid transparent;
}
.profile-pic:hover {

    transform: scale(1.03);

    border-color: #ff758f;

    box-shadow:
        0 0 10px rgba(255, 117, 143, 0.35);
}

h1 {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;

    font-size: 4rem;

    letter-spacing: -2px;

    margin-bottom: 0.25rem;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

h1:hover {

    background: linear-gradient(
        135deg,
        #ff8fab 0%,
        #ff4d6d 50%,
        #c9184a 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 0 12px rgba(255, 77, 109, 0.15);

    transform: scale(1.02);
}

.subtitle {
    color: var(--secondary);

    margin-bottom: 3rem;
}

.about {
    text-align: left;

    line-height: 1.9;

    font-size: 1.1rem;
}

.about p {
    margin-bottom: 1.5rem;
}

.links {
    margin-top: 2rem;

    display: flex;

    justify-content: center;

    gap: 2rem;
}

.links a {
    text-decoration: none;

    color: var(--text);
}

.links a:hover {
    text-decoration: underline;
}

footer {
    margin-top: 5rem;

    color: var(--secondary);

    display: flex;

    justify-content: center;

    gap: 1rem;
}

#theme-toggle {
    position: fixed;

    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 1px solid rgba(0, 0, 0, 0.08);

    background: rgba(255, 255, 255, 0.75);

    color: #222;

    font-size: 0.85rem;

    cursor: pointer;

    backdrop-filter: blur(10px);

    box-shadow: none;

    outline: none;

    z-index: 1000;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.08);
}

#theme-toggle:focus {
    outline: none;
    box-shadow: none;
}

/* DARK MODE BUTTON */

body.dark #theme-toggle {

    background: #1a1a1a;

    border: 1px solid #2a2a2a;

    color: #f5f5f5;

    box-shadow: none;
}

body.dark #theme-toggle:hover {

    background: #242424;

    border-color: #333333;

    transform: scale(1.08);

    box-shadow: none;
}
 
.site-header{
    position: fixed;
    top: 20px;
    left: 25px;
    z-index: 1000;
}

.logo{
    font-size: 2.6rem;
    font-weight: 800;
    font-family: Georgia, serif;

    background: linear-gradient(
        135deg,
        #ff9a9e 0%,
        #ff4d6d 50%,
        #ff758f 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 0 20px rgba(255, 77, 109, 0.25);

    cursor: default;

    user-select: none;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.logo:hover{
    transform: scale(1.08);
    filter: brightness(1.1);
}

.email-link {

    background: linear-gradient(
        135deg,
        #ff8fab 0%,
        #ff758f 25%,
        #ff4d6d 60%,
        #c9184a 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    font-weight: 700;

    text-decoration: none;
}