*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;

    width: 100%;
    min-height: 100vh;

    font-family: "Open Sans", "Segoe UI", "Helvetica", "Arial", sans-serif;
    font-size: 16px;

    color: #284a36;
}

::selection {
    background-color: #496152;
    color: #fff;
}

img {
    display: block;
}

//
// Components
//

//
// Structure
//

body {
    display: grid;
    grid-template-columns: auto 1fr;

    .sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fff;

        padding: 16px;

        .top,
        .bottom {
            display: flex;
            flex-direction: column;

            gap: 8px;

            .logo {
                font-size: 6px;

                padding: 16px;

                font-family: "Ubuntu Mono", monospace;
                font-weight: 700;

                display: grid;
                place-content: center;

                user-select: all;
            }

            .item {
                display: flex;
                gap: 8px;
                padding: 8px 16px;
                align-items: center;
                border-radius: 12px;

                user-select: none;
                cursor: pointer;

                .icon {
                    display: grid;
                    place-content: center;

                    color: #284a36;

                    img {
                        width: 18px;
                        height: 18px;
                    }
                }

                .label {
                    color: #496152;
                    a {
                        color: inherit;
                        text-decoration: none;
                    }
                }

                &:hover {
                    background-color: #e8ede9;
                }
            }
        }
    }

    .main {
        background-color: rgb(245, 246, 250);
        display: grid;
        grid-template-columns: 1fr 1fr;

        padding: 32px;
        gap: 32px;

        height: 100vh;

        overflow-y: auto;

        .card {
            border-radius: 32px;
            padding: 24px 32px;
            background-color: #fff;
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 8px;

            .label {
                font-weight: 600;
            }

            .graph {
                background-color: #f4f5f9;

                min-height: 300px;
            }
        }

        @media screen and (max-width: 1100px) {
            grid-template-columns: 1fr;
        }
    }
}

//
// Media Queries
//