body {
    padding: 0;
    margin: 0px;
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: italic;
}

#container-curriculo {
    display: flex;
    margin-top: 48px;
    margin-bottom: 48px;
}

#subtitulo {
    color: #FFF;
}

#container-cabecalho {
    display: flex;
    flex-direction: column;
    padding: 8px;
    color: #00000;
    margin-left: 48px;
}

header {
    border: 2px solid;
    background-color:#B0C4DE;
    border-color: transparent;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    justify-content: center;
}

#tituloSubtitulo {
    flex-direction: column;
    font-size: 28px;
    margin-right: 18px;
}

#iniciais-nome {
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    margin-right: 12vw;
    background-color: #FFF;
    border:4px solid;
    padding: 12vh;
    border-radius: 50% 50% 50%;
    font-size: 10vh;
    border-color: #00008B;
}

.tituloDosTextos {
    font-size: 38px;
    letter-spacing: 6px;
}

#objetivos {
    background-color:#B0C4DE;
    border: 2px solid;
    /* line-height: 2.0; */
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
}

#formacao {
    background-color:#B0C4DE;
    border: 2px solid;
    line-height: 2.0;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
}

#experiencia {
    background-color:#B0C4DE;
    border: 2px solid;
    line-height: 2.0;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
}

#sobreMim {
    background-color:#B0C4DE;
    border: 2px solid;
    line-height: 2.0;
    border-color: transparent;
    border-radius: 8px;
    padding-left: 8px;
    color: #00000;
}

#habilidades-sobreMim {
    /*color: #00008B;*/
    margin-right: 48px;   
    display: flex;
    flex-direction: column;
    margin-top: 9px;
}

#habilidades-dev {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
}

.habilidades {
    color: #000000;
    display: flex;
    justify-content: center;
    font-weight: bolder;
}

#habilidades-dev h2 {
    display: flex;
    justify-content: center;
    text-align: center;
    text-align: end;
    align-content: center;
}


#habilidades-dev-html {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
    box-shadow: inset 275px 0 0 rgba(41, 3, 255, 0.5);
    letter-spacing: 6px;
}

#habilidades-dev-css {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
    box-shadow: inset 210px 0 0 rgba(41, 3, 255, 0.5);
    letter-spacing: 6px;
}

#habilidades-dev-js {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
    box-shadow: inset 115px 0 0 rgba(41, 3, 255, 0.5);
    letter-spacing: 6px;
}

#habilidades-dev-github {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
    box-shadow: inset 100px 0 0 rgba(41, 3, 255, 0.5);
    letter-spacing: 6px;
}

#habilidades-dev-node {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px;
    margin-top: 8px;
    padding-left: 8px;
    box-shadow: inset 55px 0 0 rgba(41, 3, 255, 0.5);
    letter-spacing: 6px;
}

#paragrafoFooter {
    font-size: 24px;
    font-weight: bold;
    text-decoration: underline;
}

footer {
    background-color:#B0C4DE;
    border: 2px solid;
    border-color: transparent;
    border-radius: 8px 8px 500px 8px;
    margin-top: 8px;
    padding-left: 8px;
    height: 50vh;
    color: #fff;
}

footer img {
    margin-left: 5vw;
    width: 15vw;
}

#lista-contatos {
    list-style: none;
    display: block;
    height: 293px;
    width: 600px;
    margin: auto;
}

[data-component="slideshow"] .slide {
    display: none;
}

[data-component="slideshow"] .slide.active {
    display: block;
}

/* Estilos para dispositivos móveis */

@media only screen and (min-width: 370px) and (max-width: 699px) {


    header {
        border-radius: 900% 8% 8px 8px;
        background-color: rgba(176,196,222, 0.473);
        /* width: 150vw; */
    }
    #objetivos,
    #formacao,
    #experiencia,
    #sobreMim,
    #habilidades-dev {
        background-color: rgba(176,196,222, 0.473);
    }

    #endereco {
        padding-top: 24vw;
        padding-left: 8vw;
        font-weight: bold;
        color: #fff;
    }
    #container-cabecalho {
        margin-left: 0;
    }
    #container-curriculo {
        flex-direction: column;
        align-items: center;
        width: 170%;
        
    }
    #tituloSubtitulo {
        font-size: 12vw;
        padding-top: 28vw;
    }
    #iniciais-nome {
        font-size: 8vh;
    }
    #habilidades-sobreMim {
        margin: 0; 
        width: 100%; 
    }
    .habilidades {
        margin: 0;
        display: flex;
        padding-top: 1px;
    }
    #habilidades-dev-html {
        background-color: rgba(176,196,222, 0.473);
        border: 2px solid;
        border-color: transparent;
        border-radius: 8px;
        box-shadow: inset 150px 0 0 rgba(41, 3, 255, 0.5);

    }
    
    #habilidades-dev-css {
        background-color: rgba(176,196,222, 0.473);
        border: 2px solid;
        border-color: transparent;
        border-radius: 8px;
        margin-top: 8px;
        padding-left: 8px;
        box-shadow: inset 120px 0 0 rgba(41, 3, 255, 0.5);
    }
    
    #habilidades-dev-js {
        background-color: rgba(176,196,222, 0.473);
        border: 2px solid;
        border-color: transparent;
        border-radius: 8px;
        margin-top: 8px;
        padding-left: 8px;
        box-shadow: inset 50px 0 0 rgba(41, 3, 255, 0.5);
    }
    
    #habilidades-dev-github {
        background-color: rgba(176,196,222, 0.473);
        border: 2px solid;
        border-color: transparent;
        border-radius: 8px;
        margin-top: 8px;
        padding-left: 8px;
        box-shadow: inset 100px 0 0 rgba(41, 3, 255, 0.5);
    }
    
    #habilidades-dev-node {
        background-color: rgba(176,196,222, 0.473);
        border: 2px solid;
        border-color: transparent;
        border-radius: 8px;
        margin-top: 8px;
        padding-left: 8px;
        box-shadow: inset 55px 0 0 rgba(41, 3, 255, 0.5);
    }

    #paragrafoFooter {
        display: flex;
        margin-left: 28px;
        font-size: 68px;
        padding-left: 42px;
    }

    footer {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: flex-start;
        background-color: rgba(176,196,222, 0.473);
        border: 2px solid;
        border-color: transparent;
        border-radius: 40px 20px 100px;
        margin-top: 8px;
        width: 98%;
        height: auto;
        
    }
    .slide img {
        display: flex;
        padding-left: 50%;
        width: 48vw;
        
    }

}

/* Estilos para tablets */
@media only screen and (min-width: 701px) and (max-width: 1024px) {

    #container-curriculo {
        display: flex;
    }

    #container-cabecalho {
        display: flex;
        width: 50%;

    }

    #habilidades-sobreMim {
      
    }

    #endereco {
        font-size: 20px;
        color: #050e36;
        margin-left: 18%;
    }
    #iniciais-nome {
        font-size: 70px;
        padding: 10px;
    }

    #subtitulo {
        font-size: 20px;
    }
    footer {
        border-radius: 8px 8% 800% 8%;
        display: flex;
        
    }
}