@import url('style.css');

about-me {
    display: block;
    padding: 20px;
    margin: 20px;
    font-family: var(--hello-world-font, Arial, sans-serif);
    background: linear-gradient(180deg, var(--bg) 0%, var(--card) 100%);
    border-left: 6px solid var(--primary-box-color);
    border-radius: 12px;
}

fun-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

about-me picture {
    display: block;
    max-width: 50%;
    height: auto;
    margin: 2rem 35%;
    overflow: hidden;
}

about-me picture img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

@scope (fun-facts) {
    details {
        border: 1px solid var(--muted);
        border-radius: 12px;
        margin: 10px 0;
        overflow: hidden;
        background: var(--card);
        box-shadow: var(--box-shadow);

        &[open] {
            > summary {
                background: var(--surface-detail);
                border-bottom: 1px solid var(--muted);

                &::after {
                    transform: rotate(90deg);
                }
            }
        }
    }

    summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        cursor: pointer;
        font-weight: 600;

        &::before {
            font-size: 1.25rem;
        }

        &::after {
            content: "\25B6";
            margin-left: auto;
            transition: transform 200ms ease;
        }
    }

    img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
        display: block;
        margin: 0.5rem auto;
    }
}

summary {
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;

    &.favorite-food::before {
        content: "\01F355";
    }

    &.current-setup::before {
        content: "\01F4BB";
    }

    &.hoobies::before {
        content: "\01F3C3";
    }

    &.hidden-facts::before {
        content: "\01F511";
    }
}

@media (max-width: 768px) {
    about-me picture {
        max-width: 100%;
        margin: 2rem auto;
    }
}