:root {
    --sections-overlap: 2.5rem;
    --left-h-pd: 2.5rem;
}

main {
    section {
        ul {
            padding-left: var(--spacer-4);
        }
        p,
        ul li,
        span {
            font-size: var(--blog-font-size);
        }
    }
}

.left {
    > div {
        padding: var(--spacer-4);
    }
}

.right {
    .text-image-flex {
        flex-direction: column;
        align-items: start;
        justify-content: flex-start;
    }

    .content ul li {
        margin-bottom: var(--spacer-4);
        line-height: 1.3;

        strong:has(+ br) {
            margin-bottom: var(--spacer-1);
            display: inline-block;
        }
    }
}

.text-switch {
    display: none;
    /*display: flex;*/
    flex-direction: row;
    align-items: center;
    background-color: var(--logo-blue);
    position: sticky;
    /*right: 0;*/
    top: 0;
    z-index: 9999;

    h5 {
        font-size: 1.2rem;
    }

    span {
        font-size: 1.1rem;
    }
    .toggle-wrapper {
        gap: var(--spacer-2);
    }
}

.tabs {
    row-gap: var(--spacer-3);

    button {
        font-weight: 300;
        width: 100%;

        span:first-child {
            display: none;
        }
        span:last-child {
            width: 100%;
        }
    }
}

.tabs:has(.active) {
    button:not(.active):not(:hover) {
        span:last-child {
            background-color: #defff0 !important;
            color: #5c7067;
        }
    }
    button.active {
        font-style: italic;
    }
}

.tab-content {
    display: none;

    img:not(.custom-size) {
        width: 130px;
    }

    h3 {
        margin-bottom: var(--spacer-2);
    }
}

section.bordered {
    border: 1px solid #000;
}

.shown-text {
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.hide {
    display: none;
}

@media (max-width: 991px) {
    .tabs {
        button {
            span {
                font-size: 1.4rem;
            }

            span:last-child {
                padding: 0.5rem 1.5rem;
            }
        }
    }
}
@media (min-width: 992px) {
    main {
        padding-left: 45% !important;
    }

    .left {
        position: fixed;
        left: 0;
        top: 0;
        width: calc(45% + var(--sections-overlap));
        height: 100vh;
        overflow: auto;

        section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        > div {
            width: calc(100% - var(--sections-overlap));
            padding: var(--spacer-4) var(--left-h-pd);

            section:last-child {
                position: relative;
            }
        }

        .tabs {
            position: absolute;
            right: calc(-1 * (var(--sections-overlap) + var(--left-h-pd)));
            bottom: 0;
            transform: translateY(100%);

            button {
                width: auto;
                span:last-child {
                    width: 300px;
                    font-size: var(--blog-font-size);
                }

                span:first-child {
                    font-style: italic;
                    display: inline;
                }
            }
        }
    }

    .right {
        border-left: 1px solid #000;
        min-height: 100vh;

        .default {
            min-height: calc(100vh - (2 * var(--spacer-4)));
            section {
                min-height: calc(100vh - (2 * var(--spacer-4)));
            }
        }

        .text-image-flex {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
        .text-image-flex:nth-child(2) {
            flex-direction: row-reverse;
        }
    }

    .text-switch {
        position: fixed;
        right: 0;
        top: 56px;
        z-index: 9999;
        flex-direction: column;
        align-items: flex-start;

        h5 {
            span {
                display: none;
            }
        }
    }
}

@media (min-width: 1920px) {
    .left {
        p {
            text-align: right;
            max-width: 800px;
        }
        section {
            align-items: flex-end;
        }
    }
}

@media (prefers-color-scheme: dark) {
    /*section.bordered {
        border: 2px solid #55a07e;
    }*/
    .btn {
        border-color: #000000;
    }

    .text-switch {
        color: #000;
    }
    .left {
        .tabs {
            button {
                span:first-child {
                    color: #eee;
                }
            }
        }

        .tabs:has(.active) {
            button:not(.active):not(:hover) {
                span:last-child {
                    background-color: #61b790 !important;
                    color: #184430;
                }
            }
        }
    }

    .right {
        section {
            background: #222;
        }
    }
}