/*fontes*/
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Inline&family=Lato:wght@400;700;900&display=swap');


/*mobile*/
body{
    
    background-color: #212226;
    font-family: 'Lato', sans-serif;
    color: #FFE7DA;
    scroll-behavior: smooth;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: center;
    font-size: 1em;
    line-height: 1.2;
}


h1 {
    display: none;
}

li {
    margin-top: 4px;
}


.estrutura{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*índice*/
.indice{
    background-color: #4B1C55;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    z-index: 6;
    position: relative;
    top: 0px;
    left: 0px;
    height: auto;
    width: 100%;
    padding: 2em;
    padding-bottom: 1em;
    font-size: 1.5em;
    
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
}



.indice__logo{
    display: block;
    position: relative;
    padding-top: .5em;

    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}


.indice__logo img{
    max-width: 80%;
}


.indice__topicos{
    width: 80%;
    text-align: left;
    font-weight: 700;
    font-size: 1em;
}

.indice__topicos a{
    text-decoration: none;
    color: #FFE7DA;
}

.indice__topicos a:hover{
    text-decoration: underline;
}

.indice__titulo{
    margin: .25em 0;
    font-weight: 900;
    color: #FF975C;
    font-size: 1.25em;
    padding-top: 1em;
}

.indice__text{
    text-align: left;
    margin-top: .5em;
}

.conteudo-block{
    max-width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-y: scroll;
    overflow-x: hidden;
}

/*main*/
.main{
    background-color: #212226;
    box-sizing: border-box;
    
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
}


.main a{
    color: #F0769A;
    text-decoration: underline;
}

.topico{
    width: 100%;
    margin-bottom: 3em;
    
}

.topico__title{
    color: #FF975C;
    margin: 0;
    text-align: left;
    font-weight: bold;
    font-size: 1.5em;

}

.topico__subtitle{
    color: #F0769A;
    text-align: left;
    margin: 20px 0;
    font-size: 1.5em;
    font-weight: bold;
}

h4.topico__subtitle{
    font-size: 1.2em;
}

.topico__text{
    text-align: left;
    margin: 1em 0;
}

.text-destaque{
    font-weight: bold;
    color: #F0769A;
}

.topico__ul{
    text-align: left;
    margin: 0;
    list-style-type: disc;
    padding-left: 40px;
    margin-block-start: 1em;
}


#colaboradores{
    margin: 0;
    padding: 0;
    flex-wrap: wrap;

    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    flex-direction: row;
}

.colaborador{
    width: 100%;
    height: auto;
    margin: 1em 40px;
    
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.colaborador img{
    max-width: 160px;
    box-sizing: border-box;
    border-radius: 80px;
    padding: 10px;
    max-width: 80%;
    box-sizing: border-box;
    border-radius: 50%;
    padding: 10px;
    object-fit: cover;
}

.colaborador-title{
    font-size: 1em;
    color: #F0769A;
    font-weight: bold;
    text-align: center;
}

.colaborador-text{
    font-size: 1em;
    margin: 0;
    color: #FFE7DA;
    text-align: center;
}


.diagram{
    width: 100%;
    padding: 0;
    cursor: pointer;
    max-width:100%;
    background-color: gainsboro;
}


.rodape{
    margin-top: -50px;
    color: #FF975C;
    font-weight: bold;
    position: relative;
    width: 100%;
    background-color: #212226;
    box-sizing: border-box;
    padding: 20px;
    z-index: 5; 

    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.rodape-links{
    width: 210px;

    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
}

.rodape-links img{
    height: 50px;
    box-sizing: border-box;
}

.rodape-links a{
    padding: 0 10px 0 10px;
}

#caenc{
    padding: 3px;
    background-color: white;
    border-radius: 50%;
}


.sigla-lista, .onibus-lista, .moradia-lista{
    list-style-type: none;
}


#goTopo{
    display: block;
    background-color: #4B1C55;
    border-radius: 30px;
    right: 16px;
    bottom: 16px;
    size: 60px;
    z-index: 5;
    box-shadow: rgba(0,0,0,.3) 3px 1.5px 1.5px;
    position: fixed;
}


/*desktop*/
@media (min-width: 720px) {

    body{
        overflow: hidden;
    }

    .estrutura{
        flex-direction: row;
        gap: 0;
        overflow: auto;
        height: 100%;
        position: absolute;
    }

    .indice{
        scrollbar-width: auto;
        scrollbar-color: #FF975C #4B1C55;
        padding: 1em;
        font-size: 1em;
        min-height: min-content;
        overflow-y: scroll;

        width: 25%;
    }

    .indice__logo img{
        max-width: 70%;
    }
    

    .indice::-webkit-scrollbar {
        width: 16px;
    }
    
    .indice::-webkit-scrollbar-track {
        background: #4B1C55;
    }
    
    .indice::-webkit-scrollbar-thumb {
        background-color: #FF975C;
        border-radius: 10px;
        border: 3px solid #4B1C55;
    }

    
    .conteudo-block{
        scrollbar-width: auto;
        scrollbar-color: #FF975C #212226;
        padding-top: 1em;
        padding-left: 2em;
        padding-right: 2em;
        flex-grow: 3;
        min-height: min-content;
        overflow-y: visible;

        width: 25%  ;
    }
    
    .conteudo-block::-webkit-scrollbar {
        width: 16px;
    }
    
    .conteudo-block::-webkit-scrollbar-track {
        background: transparent;
        z-index: 4;
    }
    
    .conteudo-block::-webkit-scrollbar-thumb {
        background-color: #FF975C;
        border-radius: 10px;
        border: 3px solid #212226;
    }


    .main a{
        text-decoration: none;
    }
    
    .main a:hover{
        text-decoration: underline;
    }
    
    .topico__title{
        font-size: 2.5em;
    }

    .colaborador{
        width: 160px;
        height: 200px;
        padding: 0 0 20px 0;
    }
    
    .colaborador img{
        width: 120px;
        height: 120px;
        box-sizing: border-box;
        border-radius: 50%;
        padding: 10px;
        object-fit: cover;
    }

    #goTopo{
        display: none;
    }
}