/* ---------------------------------
   About Page
--------------------------------- */

.about-container {
    width: min(100% - 48px, 900px);

    margin: 0 auto;

    padding: 70px 0 100px;
}


/* ---------------------------------
   Main Content
--------------------------------- */

.about-content {
    font-size: 1.05rem;

    line-height: 1.8;
}


/* ---------------------------------
   Profile Picture
--------------------------------- */

.about-profile-picture {
    width: 260px;
    height: 260px;

    object-fit: cover;

    float: left;

    margin:
        0
        35px
        20px
        0;

    border-radius: 22px;

    border: 3px solid var(--brand);

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.14);
}


/* ---------------------------------
   Heading
--------------------------------- */

.about-content h1 {
    margin-bottom: 18px;

    font-size: clamp(2.5rem, 6vw, 4.5rem);

    line-height: 1;

    color: var(--accent);
}


/* ---------------------------------
   Intro
--------------------------------- */

.about-intro {
    margin-bottom: 24px;

    font-size: 1.2rem;
    font-weight: 500;

    color: var(--muted-text);
}


/* ---------------------------------
   About Body
--------------------------------- */

.about-body {
    color: var(--text);
}

.about-body p {
    margin-bottom: 24px;
}


/* ---------------------------------
   Clear Float
--------------------------------- */

.about-content::after {
    content: "";

    display: table;

    clear: both;
}


/* ---------------------------------
   Mobile
--------------------------------- */

@media (max-width: 650px) {

    .about-container {
        width: min(100% - 32px, 900px);

        padding-top: 40px 0 100px;
    }


    .about-profile-picture {
        width: 180px;
        height: 180px;

        object-fit: cover;

        float: left;

        margin: 0 30px 20px 0;

        border-radius: 16px;

        border: 3px solid var(--brand);

        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

}

.about-tagline {
    margin-bottom: 20px;

    font-size: 1.2rem;
    font-weight: 600;

    color: var(--brand);
}


.about-section {
    margin-top: 50px;
}


.about-section h2 {
    margin-bottom: 15px;

    font-size: 1.6rem;

    color: var(--accent);
}


.about-links {
    display: flex;

    gap: 20px;
}


.about-links a {
    padding: 10px 18px;

    background-color: var(--brand);

    color: white;

    text-decoration: none;

    border-radius: 8px;

    transition: background-color 0.2s ease;
}


.about-links a:hover {
    background-color: var(--accent);
}