body {
    font-family: "graphie", sans-serif;
    overflow: hidden;
}

canvas {
    position: static;
}
.espacamento {
    height: 1.5%;
}
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#barra-esquerda {
    left: 0;
    position: fixed;
    width: 17.5%;
    height: 100%;
    padding-right: 2.5%;
    background-color: white;
    text-align: right;    
}
.nome {
    margin-top: 5%;
    letter-spacing: 2px;
    padding-left: 2px;
    vertical-align: text-top;
    text-align: right;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 5%;
    width: 104%;
    height: 7.5%;
    text-align: right;
    position: relative;
}
#eu {
    cursor: pointer;
}
#navegacao {
    padding-right: 4.8%;
    width: 105%;
    height: 0%;
    line-height: 14px;
    position: relative;
    text-align: right;
    overflow-x: hidden;
    overflow-y: auto;
    transition: 1.5s;
}
#navegacao a {
    color: black;
    text-decoration: none;
    
}
#navegacao a:visited {
    color: black;
}
#navegacao a:active {
    font-weight: bold;
}

#passeio {
    box-shadow: inset 0 0 0 0 0  whitesmoke;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#passeio:hover {
    box-shadow: inset 150px 0 0 0 whitesmoke;
}
#manual {
    box-shadow: inset 0 0 0 0 0  rgb(0,0,175);
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#manual:hover {
    color: #fff;
    box-shadow: inset 170px 0 0 0 rgb(0,0,175);
}
#controle {
    box-shadow: inset 0 0 0 0 0  #D3D3D3;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#controle:hover {
    box-shadow: inset 150px 0 0 0 #D3D3D3;
}
#jfH {
    box-shadow: inset 0 0 0 0 0  rgb(165, 26, 49);
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#jfH:hover {
    box-shadow: inset 150px 0 0 0 rgb(165, 26, 49);
}
#rtt {
    box-shadow: inset 0 0 0 0 0  #FF69B4;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#rtt:hover {
    box-shadow: inset 150px 0 0 0 #FF69B4;
}
#tripartido {
    box-shadow: inset 0 0 0 0 0  #330B32;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#tripartido:hover {
    box-shadow: inset 150px 0 0 0 #330B32;
}
#prototipos {
    box-shadow: inset 0 0 0 0 0  #B1B1AB;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#prototipos:hover {
    box-shadow: inset 150px 0 0 0 #B1B1AB;
}
#calculadora {
    box-shadow: inset 0 0 0 0 0  #51414F;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#calculadora:hover {
    box-shadow: inset 250px 0 0 0 #51414F;
}
#propagulos {
    box-shadow: inset 0 0 0 0 0  #7393B3;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#propagulos:hover {
    box-shadow: inset 150px 0 0 0 #7393B3;
}
#tresmodos {
    box-shadow: inset 0 0 0 0 0  #E5E4E2;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#tresmodos:hover {
    box-shadow: inset 150px 0 0 0 #E5E4E2;
}
#iiipega {
    box-shadow: inset 0 0 0 0 0  #f7f3f0;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#iiipega:hover {
    box-shadow: inset 300px 30px 0 0 #f7f3f0;
}
#oficinaagradim {
    box-shadow: inset 0 0 0 0 0  #702963;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
#oficinaagradim:hover {
    box-shadow: inset 300px 20px 0 #702963;
}

#conteudoWrap {
    position: fixed;
    transition: 0.5s ease-in-out;
    background-color: white;
    top: 4%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    width: 0;
    height: 86%;
    left: 22%;
    overflow: hidden;
}
#conteudo {
    top: 7%;
    width: 0;
    height: 86%;
    background-color: white;
    position: fixed;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: justify;
    transition: 0.5s ease-in-out;
    display: flex;
}
#conteudo:hover {
    transition: 0.5s;
    overflow-y: auto;
}

#titulo {
    text-align: right;
}

.galeria {
    position: relative;
    width: 150%;
    height: 100%;
    overflow-y: auto;
    padding-left: 1.5%;
    padding-right: 1.5%;
}
.galeria img {
    max-width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}
.galeria:hover {
    overflow-y: auto;
}

.texto {
    position: relative;
    width: 95%;
    letter-spacing: 0.5px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 1.5%;
    padding-right: 0.5%;
}
.texto a {
    color: black;
    font-style: oblique;
}
.texto a:visited {
    font-style: oblique;
    color: black;
}
.texto a:active {
    font-weight: bold;
}
.texto:hover {
    overflow-y: auto;
}
#texto {
    font-size: medium;
}
.legenda {
    text-align: right;
}


::-webkit-scrollbar {
    width: 1px;
}

::-webkit-scrollbar-thumb {
    background: black;
}

.popup-image {
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(0,0,0,0.80);
    height: 100%;
    width: 100%;
    z-index: 100;
    display: none;
    overflow-y: auto;
}
.popup-image span {
    position: absolute;
    top: 0; right: 10px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 100;
}
.popup-image img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 650px;
    object-fit: cover;
}

#nao-expandir {
    cursor: auto;
}

#toggle {
    color: black;
    background-color: white;
    position: absolute;
    cursor: pointer;
    font-size: 24px;
    display: none;
    right: 5%;
    padding-top: 30px;
    padding-right: 2.5%;
    font-weight: 900;
    transition: 0.5s;
}
#toggle a {
    text-decoration: none;
}
#toggle a:visited {
    color: black;
}
#toggle a:hover {
    color: black;
}

@media (max-width:628px) {
    .popup-image img {
        max-width: 95%;
        height: fit-content;
    }
    #toggle {
        display: block;
    }
    .nome {
        width: 600%;
        left: 25%;
        text-align: left;
        background-color: white;
    }
    #navegacao {
        height: 100%;
        width: 0;
        position: fixed; 
        z-index: 1;
        top: 0;
        left: 0;
        background-color: white;
        padding-right: 0%;
        padding-top: 22%;
        transition: 0.5s;
    }
    #conteudoWrap {
        top: 12%;
        left: 5%;
        margin-left: 2.5%;
        width: 250%;
    }
    #conteudo {
        overflow-y: auto;
        top: 13.5%;
        flex-direction: column;
    }
    .galeria {
        display: flex;
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: scroll;
        gap: 10px;
        width: 94%;
        margin-left: 1%;
        height: 700px;
    }
    .galeria img{
        max-width: fit-content;
        max-height: 100%;
    }
    .texto {
        margin-left: 1%;
        margin-top: 2.5%;
        overflow-y: scroll;
    }
    ::-webkit-scrollbar {
        width: 0px;
    }
}