* {
    margin: 0;
    padding: 0;
}

body {
    align-items: center;
    background-color: oklch(0.9 0.03 295);
    color: oklch(0.25 0 28);
    display: flex;
    font-family: "Segoe UI", sans-serif;
    height: 100dvh;
    justify-content: center;
    width: 100dvw;
}

i {
    font-size: small;
}

a {
    color: inherit;
    text-decoration: none;
}

main {
    --color-logo-text: oklch(0.45 0.17 24);

    background-color: white;
    border-radius: 1em;
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,20%);
    box-sizing: border-box;
    display: grid;
    gap: 1em;
    width: 800px;
    padding: 1em;

    >header {
        align-items: center;
        display: flex;
        justify-content: space-between;

        img.logo {
            max-height: 50px;
            object-fit: contain;
        }

        >div.carepath-logo {
            --logo-text-height: 42px;
            align-items: center;
            color: var(--color-logo-text);
            display: flex;
            font-size: var(--logo-text-height);
            font-weight: 300;
            gap: 10px;
            letter-spacing: -4%;
            line-height: var(--logo-text-height);
        }
    }

    >hr {
        border-color: var(--color-logo-text);
        border-width: 1px 0 0 0;
    }

    >section {
        --image-height: 462px;

        align-items: start;
        display: grid;
        gap: 2em;
        grid-template-columns: 261px auto;

        >nav {
            background: left / cover no-repeat url("/public/back_main.jpg");
            height: 100%;
            max-height: var(--image-height);
            overflow-y: auto;
            width: 100%;

            >ul {
                display: grid;
                gap: 1.5em;
                list-style: none;

                >li {
                    align-items: center;
                    display: grid;
                    grid-template-columns: 42px auto;

                    &:hover {
                        color: oklch(0.25 0.1 28);
                    }

                    &:active {
                        color: oklch(0.45 0.1 28);
                    }

                    &::before {
                        --bullet-size: 24px;

                        background-image: url("/public/logo.svg");
                        background-size: var(--bullet-size) var(--bullet-size);
                        content: '';
                        height: var(--bullet-size);
                        width: var(--bullet-size);
                    }

                    h2 {
                        font-weight: normal;
                    }

                    p {
                        font-size: small;
                    }
                }
            }
        }

        >div#carousel {
            height: var(--image-height);
            width: 261px;

            >img.carousel-image {
                border-radius: 0.5em;
                height: 100%;
                object-fit: cover;
                width: 100%;
            }
        }
    }
}