@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{

    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

}
nav ul{

    justify-items: center;
    margin: 0 auto;
   
    text-align: center;
    
}
nav ul li{ 
    
    display: inline;
    padding: 0 15px;

}
nav ul li a{

    text-decoration: none;
    color: black;
    line-height: 50px;
    font-style: italic; 
    background-size: cover;
    image-rendering: pixelated;
    padding: 0 10px 0 0;
    padding-bottom: 2px;
    
}
nav ul li a:hover{

    background-image: url(./assets/generccolor.png);
}
.menu-icon {
    display: none;
    cursor: pointer;
    font-size: 35px;
    margin-left: 10px;
}

div.container{

    display: block;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 10px;

}
div.destaque{

    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 51px;
    margin-bottom: 30px;

}
div.destaque div{

    height: 100%;

}
div.destaque div.discricao div{

    width: 400px;
    display: block;
    margin: 0 auto;

}
div.destaque div.image img{

    display: block;
    height: 550px;
    justify-content: right;
    margin: 0 auto;

}
div.destaque div.discricao div img{

    width: 100%;
    margin: 50px 0;

}
div.destaque div.discricao div p{

    line-height: 26px;
    font-weight: 20px;
    font-style: italic;
    text-align: justify;
    hyphens: auto;
    margin: 0;
    
}
div.destaque div.discricao ul{

    text-align: left;
    margin: 0;
    padding: 0;

}
div.destaque div.discricao ul li{

    display: inline;
    padding: 0;
    margin: 0;
    margin-right: 20px;
    
}
div.destaque div.discricao ul li a img{

    width: 24px;
    text-align: left;

}
div.about{

    display: block;

}
div.desc{

    display: block;
    height: 600px;

}

div.about h3{

    font-weight: 500;
    font-style: italic;
    margin-top: 40px;

}
div.about p{

    font-weight: 300;
    font-style: italic;
    margin-top: 20px;

}
div.about h5{

    display: block;
    padding: 20px 10px;
    background-color: #cdd5de;
    font-weight: 500;
    font-style: italic;
    margin-top: 40px;
    margin: 20px 50px;
    text-align: center;

}
div.competencias{

    margin-top: 40px;
    margin-bottom: 60px;

}
div.competencias h2{

    font-weight: 600;
    font-style: italic;

}
div.competencias ul{

    display: block;
    margin-top: 20px;

}
div.competencias ul li{

    display: inline;
    padding: 5px 0;
    padding-right: 25px;
    margin-right: 20px;
    background-color: rgb(255, 255, 255);
    font-weight: 600;
    font-style: italic; 
    background-size: cover;
    image-rendering: pixelated;
    
}
li.node{
    background-image: url(./assets/node.png);
}
li.express{
    background-image: url(./assets/express.png);
}
li.mysql{
    background-image: url(./assets/mysql.png);
}
li.mongodb{
    background-image: url(./assets/mongodb.png);
}
li.javascript{
    background-image: url(./assets/javascript.png);
}
li.react{
    background-image: url(./assets/react.png);
}
li.html{
    background-image: url(./assets/html.png);
}
li.css{
    background-image: url(./assets/css.png);
}
li.handlebars{
    background-image: url(./assets/handlebars.png);
}
div.projetos{

    margin-bottom: 40px;
}
div.projetos h2{

    margin-bottom: 30px;
    font-weight: 600;
    font-style: italic;

}
div.projetos div.cards{

    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    box-sizing: content-box;

}
div.projetos div.cards div.card{

    display: grid;
    grid-template-columns: 250px 1fr;
    box-sizing: content-box;

}
div.projetos div.cards div.card .img{

    width: 100%;
    margin-right: 30px;

}
div.projetos div.cards div.card div{

    margin-left: 10px;

}
div.projetos div.cards div.card div h3{

    display: inline-block;
    margin-bottom: 10px;
    font-weight: 500;
    font-style: italic;
    background-size: cover;
    image-rendering: pixelated;
    background-image: url(./assets/generccolor.png);
    padding: 2px 0;
    padding-right: 25px;

}
div.projetos div.cards div.card div p{

    font-size: .9em;
    font-weight: 300;
    font-style: italic;
    text-align: justify;
    hyphens: auto;

}
div.projetos div.cards div.card div a img{

    width: 24px;
    margin-right: 8px;
    margin-bottom: -5px;

}
div.projetos div.cards div.card div a{

    align-self: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    color: black;
    font-style: italic;
    font-size: .9em;

}
div.contato{

    margin-top: 60px;

}
div.contato h2{

    margin-bottom: 30px;
    font-weight: 600;
    font-style: italic;

}
div.contato p{

    line-height: 26px;
    font-weight: 400;
    font-style: italic;
    color: gray;

}
div.contato p span{

    color: black;
}

div.certificados h2{

    font-weight: 600;
    font-style: italic;
    margin-top: 60px;
    margin-bottom: 30px;

}
div.cards div.certcard{

    display: grid;
    grid-template-columns: 180px 1fr;
    margin-bottom: 20px;

}
div.cards div.certcard div{

    margin-left: 20px;

}
div.cards div.certcard img{

    width: 100%;
    margin-right: 20px;
    box-shadow: rgba(0, 0, 0, 0.400) 0 1px 5px;

}
div.cards div.certcard div h3{

    display: inline-block;
    margin-bottom: 10px;
    font-weight: 500;
    font-style: italic;
    background-size: cover;
    image-rendering: pixelated;
    background-image: url(./assets/generccolor.png);
    padding: 2px 0;
    padding-right: 25px;
    color: black;

}
div.cards div.certcard div p{

    font-size: .9em;
    font-weight: 300;
    font-style: italic;
    text-align: justify;
    hyphens: auto;

}
footer{

    margin-top: 80px;
    text-align: center;
    line-height: 60px;
    background-color: #cdd5de;
    
}

@media screen and (max-width: 979px) {
    div.container{
        padding: 0 30px;
    
    }
    div.destaque div.discricao div{
        width: 360px;
        display: block;
        margin: 0 auto;
        
    }
    div.destaque div.image img{
    
        display: block;
        height: 400px;
        justify-content: right;
        margin: 0 auto;
        margin-top: 40px;
    }
    div.destaque div.discricao div img{

        width: 100%;
        margin: 50px 0 30px;
    
    }
    div.destaque div.discricao div p{
        font-size: .9em;
        line-height: 26px;
        font-weight: 20px;
        font-style: italic;
        text-align: justify;
        hyphens: auto;
        margin: 0;
    }
    div.projetos div.cards div.card{
        padding: 0 30px;
        display: block;
        box-sizing: content-box;
    }
    div.projetos div.cards div.card .img{
        display: block;
        width: 300px;
        margin: 10px auto 30px;
    
    }
}
@media screen and (max-width: 800px) {

    .menu-icon {
        display: block;
    }
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.2) 0 4px 3px;
        padding-bottom: 20px;
        font-size: 1.1em;
    }
    nav ul.show {
        display: flex;
    }

    div.container{
        padding: 0 30px;
    
    }
    div.destaque{
        display: block;
        margin-top: -30px;
    }
    div.destaque div.discricao div{
        width: 100%;
        display: block;
        margin: 0 auto;
        
    }
    div.destaque div.image img{
    
        display: block;
        height: 200px;
        justify-content: right;
        margin: 0 auto;
        margin-top: 0px;
        border-radius: 100%;
    }
    div.destaque div.discricao div img{
        display: block;
        max-width: 300px;
        margin: 10px auto 30px;
    }
    div.destaque div.discricao ul{
        display: block;
        justify-items: center;
        margin: 0 auto;
        text-align: center;
    }
    div.destaque div.discricao ul li {
        margin: 0 20px;
    }
    div.destaque div.discricao ul li a img { 
        display: inline;
    }
    div.destaque div.discricao ul li a{
        display: inline;
        text-align: left;
        margin: 0;
        padding: 0;
    
    }
    div.destaque div.discricao div p{
        font-size: .9em;
        line-height: 26px;
        font-weight: 20px;
        font-style: italic;
        text-align: justify;
        hyphens: auto;
        margin: 0;
    }
    div.projetos div.cards{
        display: block;
        box-sizing: content-box;
    }
    div.projetos div.cards div.card{
        padding: 0 30px;
        display: grid;
        grid-template-columns: 260px 1fr;
        box-sizing: content-box;
    }
    div.projetos div.cards div.card .img{
        display: block;
        width: 100%;
        margin: 10px auto 30px;
    
    }
    div.cards div.certcard div h3{
        background-image: none;
    }
    div.about h5{
        margin-left: 0;
        margin-right: 0;
        padding: 20px 20px;
    }
    
}
@media screen and (max-width: 640px) {
    *{
        font-size: 1.04em;
    }
    div.competencias ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    div.competencias ul li{
        display:inline-block;
    }
    div.projetos div.cards div.card{
        display: block;
        box-sizing: content-box;
        margin-bottom: 50px;
    }
    div.cards div.certcard{
        display: block;
    }
    div.cards div.certcard img{
        display: none;
    }
    div.cards div.certcard div p{

        font-size: .9em;
        font-weight: 300;
        font-style: italic;
        text-align: left;
        hyphens: auto;
    
    }
    footer{
        font-size: .78em;
    }
}