* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --primary-color: #ddd8f9;
    --accent-color: #873eff;

    --text-color: #2b2b2b;

}

body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    color: var(--text-color);
    padding: 1rem;
    background-color: #f4f1f9;
}

.root-container {
    background: var(--primary-color);
    border-radius: 2rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    box-shadow: -5px 5px 35px rgba(0, 0, 0, 0.21);

    .profile-container {
        container: profile / inline-size;
        height: 25rem;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }
    }


    .habits-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem;
        gap: 1.5rem;



        .bio-container {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .bio-date-name {
                display: flex;
                justify-content: space-between;
                width: 100%;
                color: var(--accent-color);
                font-weight: bold;
                margin-bottom: 1rem;
            }

            p {
                font-size: 0.95rem;
                line-height: 1.5;
                max-width: 90%;
                opacity: 0.85;
            }
        }


        .hobbies-dislikes-container {
            display: flex;
            flex-grow: 1;
            justify-content: space-between;
            position: relative;
            gap: 1rem;
        }

        .hobbies-section,
        .dislikes-section {

            button {
                border-radius: 2rem;
                padding: 1rem 1.25rem;
                display: flex;
                gap: 0.5rem;
                background-color: #ccb3f5;
                outline: none;
                border: none;
                cursor: pointer;
                transition: ease-in-out 0.25s;

            }

            button:hover {
                transform: translateY(0.25rem);

            }

            ul {
                margin: 3rem 0;
                width: 300px;
                list-style-position: inside;
                list-style-type: circle;

                li {

                    margin-bottom: 1rem;
                }
            }



        }
    }




    nav {
        ul {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            list-style: none;
        }

        li a img {
            width: 1.8rem;
            filter: brightness(0) saturate(100%) invert(32%) sepia(97%) saturate(3555%) hue-rotate(249deg) brightness(95%) contrast(98%);
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        li a:hover img {
            transform: scale(1.2);
            filter: brightness(1.2);
        }
    }




}

.hidden {
    display: none;
}

.hobbies-section ul {
    position: absolute;
    top: 2rem;
    left: 0;
}

.dislikes-section ul {
    position: absolute;
    top: 2rem;
    left: 0;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-active {
    transform: translateY(0.25rem);
}

.height-10 {
    height: 10rem;
}

@media screen and (width < 700px) {
    .root-container {
        grid-template-columns: 1fr;

    }
}