@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html,
body {
    margin: 0;
    background: #fff;
    color: #333;
    font-family: 'Montserrat', 'Verdana';
    height: 100%;
    width: 100%;
}

* {
    outline: none;
    transition: .2s
}

a {
    color: orangered;
}

h1{
    background: orangered;
    color: #fff;
    padding: 24px 0;
    text-align: center;
    margin-top: 0;
    box-shadow: 0 0 5px orangered;
    margin-bottom: 60px;
}

h2{
    color: orangered;
    text-shadow: 0 0 1px orangered;

}

pre{
    color: #444;
    font-family: inherit;
    font-size: inherit;
    word-spacing: inherit;
    text-shadow: 0 0 1px #aaa;
}

.container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 127px);

    .items {
        display: flex;
        flex-direction: column;

        .item {
            display: flex;
            flex-direction: column;
        }
    }
}

.ver{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    max-width:calc(100% - 72px);
    margin:auto;
    svg.dot_{
        fill: orangered;
        width: 12px;
        height: 12px;
        min-width: 12px;
        margin-right: 6px;
        opacity: .3
    }
    h2.title_topic{
        max-width:calc(100% - 24px);
        width: 100%;
        margin:auto;
        display: flex;
        align-items: center;
        justify-content: start;
        margin-top: 42px;
        margin-bottom: 12px;

    }
    pre{
        width: 100%;

        white-space: pre-wrap;
        word-wrap: break-word;
        line-height: 30px;
        text-align: justify;
        h2{
            margin-top: 0;
        }
        i{
            color: orangered;
        }
    }

    .vs{
        margin: 6px 0;
        .vs_t{
            color: #444;
            font-family: inherit;
            font-size: inherit;
            word-spacing: inherit;
            text-shadow: 0 0 1px #aaa;
            margin: 0;
            text-align: justify;
            .vs_n{
                color: orangered;
            }
        }
    }
}

.sumario{
    position: sticky;
    translate: calc(-100% + 12px);
    top: 24px;
    position: fixed;
    left: 12px;
    height: calc(100% - 190px);
    max-width: 50%;

    h3{
        background: orangered;
        color: #fff;
        display: flex;
        margin-left: -13px;
        max-width: calc(100% - 12px);
        border-radius: 0 12px 0 0;
        margin-bottom: 0;
        border: 2px solid #fff;
        border-left:0;
        border-bottom:0;
        margin-right: 24px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .items{
        border: 2px solid #fff;
        border-left: none;
        display: flex;
        flex-direction: column;
        background: orangered;
        padding: 12px 12px;
        margin-left: -12px;
        border-radius: 0 0 12px 0;
        margin-right: 24px;
        height: 100%;
        overflow: auto;
        border-top: 0;

        max-width: 0px!important;;

    }

    .actions{
        background: orangered;
        color: #fff;
        display: flex;
        margin-left: -13px;
        max-width: calc(100% - 12px);
        border-radius: 0 12px 12px 0;
        margin-bottom: 0;
        border: 2px solid #fff;
        border-left:0;
        margin-right: 24px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        svg{
            fill: #fffa;
        }
        a{
            color: #fff;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }



    }
    &.active{
        translate: 0;
        .items{
            max-width: 300px!important;

        }
        .toggle_sumario{
            opacity: .8;
            svg{
                rotate: 0deg;
            }
        }
    }
    span{
        color: #fff;
        background: #fff2;
        padding: 6px 12px;
        border-radius: 12px;
        margin-bottom: 12px;
        white-space: wrap;
        max-width: 100%;
        cursor: pointer;
        &:hover{
            background: #fff7;
        }
    }
    .toggle_sumario{
        position: absolute;
        right: 2px;
        top: 0;
        background: orangered;
        top: calc(50% - 90px);
        height: 180px;
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 12px 12px 0;
        fill: #fff;
        opacity: .1;

        svg{
            rotate: 180deg;
        }
    }
}

footer{
    background: orangered;
    color: #fff;
    padding: 24px 24px;
    margin-top: 60px;
    a{
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        svg{
            fill: #0007;

        }
    }
}