* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}



/*PALETA DE CORES */

:root {
    --cor0: #343b36;
    --cor1: #060A07;
    --cor2: #ABFFBD;
    --cor3: white;
}

/*PALETA DE CORES */

a {
    text-decoration: none;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/*MENU MOBILE BOOTSTRAP */

#btn-mobile {
    background-color: var(--cor2);
    color: var(--cor2);
}


#logo {
    color: var(--cor2);
    font-size: 1.9em;
    font-weight: bold;
    padding-left: 10px;
}

.cb-desktop {
    display: none;
}

#offcanvasNavbar {
    background-color: #212529;
}

#home {
    color: white;
    font-size: 1.3em;
}

#home:hover {
    color: var(--cor2);
    text-decoration: underline;
}

#projetos {
    color: white;
    font-size: 1.3em;
}

#projetos:hover {
    color: var(--cor2);
    text-decoration: underline;
}

#contatos {
    color: white;
    font-size: 1.3em;
}

#contatos:hover {
    color: var(--cor2);
    text-decoration: underline;
}

#offcanvasNavbarLabel {
    color: white;
    font-size: 1.5em;
}

#xis {
    background-color: white;
}
/*MENU MOBILE BOOTSTRAP */

/*CONT-ONE-MOBILE */

.cont-one {
    background-image: url('../img/foto-header-tablet.png');
    height: 770px;
    width: 100%;
}

.h1-cont-one {
    text-align: center;
    color: var(--cor2);
    padding-top: 150px;
    font-size: 2.3em;
    font-weight: bold;
}

.p-cont-one {
    color: var(--cor2);
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px;
    
}

.p1-cont-one {
    color: var(--cor2);
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px;
}

.p2-cont-one {
    color: var(--cor2);
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px;
    
}
/*CONT-ONE-MOBILE */

/*CONT-SOBRE */

    .h2-sobre {
        font-size: 2.6em; 
        text-align: center;
        padding-top: 30px;
        font-weight: bold;
        bottom: 0;
    }

    #foto-sobre {
        height: 400px;
        width: 300px;
        display: grid;
        margin: auto;
        top: 0;
    }

    .p-sobre {
        text-align: center;
        padding: 20px;
        font-size: 1.4em;
    }


/*CONT-SOBRE */

/*TWO-CONT */

    .two-cont {
        background-color: var(--cor0);
        height: 660px;
    }

    .h1-two-cont {
        text-align: center;
        color: var(--cor2);
        padding-top: 30px;
        padding-left: 10px;
    }


    .html-two-cont {
        display: block;
        padding-top: 20px;
        margin: auto;
        height: 150px;
        width: 150px;
    }


    .css-two-block {
        display: block;
        padding-top: 20px;
        margin: auto;
        height: 150px;
        width: 150px;
    }


    .js-three-block {
        display: block;
        padding-top: 20px;
        margin: auto;
        height: 150px;
        width: 150px;
    }

    .button-cont-principal {
        background-color: var(--cor2);
        font-size: 20px;
        display: block;
        margin: auto;
        padding: 15px;
        border-radius: 10px;
        margin-top: 20px;
        font-weight: bold;
    }
    /*TWO CONT */

    /*FINAL DO SITE */

    .final {
        height: 230px;
        background-color: var(--cor2);
        padding: 10px;
        
    }

    .link-button-final {
        text-decoration: none;
    }

    .button-final {
        margin: auto;
        display: block;
        padding: 15px;
        border-radius: 15px;
        background-color: var(--cor0);
        color: white;
        font-size: 18px;
        font-weight: bold;
        border: 2px solid white;
    }

    .button-final:hover {
        background-color: white;
        color: black;
        border: 2px solid var(--cor0);
        transition-duration: 0.7s;
    }

    .p-final {
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
        margin-top: 10px;
    }

    .icons {
        display: flex;
        justify-content: center;
        gap: 3rem;
        
    }

    .inst-final {
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }


    .you-final {
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .twit-final{
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }



    /*FINAL DO SITE */











@media screen and (min-width: 768px) { /*RESPONSIVIDADE TABLET */

    
    .cont-one {
        background-image: url('../img/foto-header-tablet.png');
        height: 600px;
        width: 100%;
    }
    
    .h1-cont-one {
        text-align: center;
        color: var(--cor2);
        padding-top: 150px;
        font-size: 2.3em;
        font-weight: bold;
    }
    
    .p-cont-one {
        color: var(--cor2);
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
        padding: 10px;
        
    }

    .p1-cont-one {
        display: block;
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
        padding-left: 30px;
        color: var(--cor2);
    }
    
    .p2-cont-one {
        display: block;
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
        padding-left: 30px;
        color: var(--cor2);
    }

    .h2-sobre {
        font-size: 2.9em; 
        text-align: center;
        padding-top: 30px;
        font-weight: bold;
        bottom: 0;
    }

    #foto-sobre {
        height: 600px;
        width: 400px;
        display: grid;
        margin: auto;
        transition: 0.5 ease-in-out;
        top: 0;
    }
    
    .p-sobre {
        text-align: center;
        padding: 20px;
        font-size: 1.8em;
    }

    .two-cont {
        background-color: var(--cor0);
        height: 360px;
    }

    
    #two-cont-principal {
        display: flex;
        padding: 30px;
        justify-content: center;
        align-items: center;
    }
       
}   /*RESPONSIVIDADE TABLET */


@media screen and (min-width: 1000px) {  /*DEKSTOP/ ACIMA DE 1000PX */
 
    * {
        box-sizing: border-box;
    }

    #nav-mobile {
        display: none;
    }

    .cb-desktop {
        height: 70px;
        background-color: #212529;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px;
        transition: 1s ease-in-out;
    }

    #logo-desktop {
        font-size: 2em;
        color: var(--cor2);
        text-decoration: none;
        font-weight: bold;

    }

    .nav-desktop ul {
        text-decoration: none;
        list-style: none;
        display: flex;
        gap: 3rem;
        font-weight: bold;
        font-size: 1.3em;
    }

    .nav-desktop ul li a {
        text-decoration: none;
        color: var(--cor2);
    }

    .nav-desktop ul li a:hover {
        color: white;
        text-decoration: underline;
        transition-duration: 0.5s;
    }

    .cont-one {
        background-image: url('../img/foto-header-tablet.png');
        height: 500px;
        width: 100%;
    }

    .sobre {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .h2-sobre {
        font-size: 2.9em; 
        margin-top: 90px;
    }

    #foto-sobre {
        height: 600px;
        width: 400px;
        float: left;
        top: 0;
    }
    
    .p-sobre {
        align-items: center;
        padding: 20px;
        font-size: 1.5em;
    }

    .img-p {
        display: flex;
        align-items: center;
        padding: 20px;
    }

   .two-cont {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }

   .h1-two-cont {
    text-align: center;
    color: var(--cor2);
    }

#two-cont-principal {
    display: flex;
    gap: 5rem;
    justify-content: center;
    align-items: center;
}

.final {
    height: 230px;
    background-color: var(--cor2);
    padding: 10px;
}

.button-final {
    margin: auto;
    display: block;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--cor0);
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.button-final:hover {
    background-color: white;
    color: black;
    border: 2px solid var(--cor0);
    transition-duration: 0.7s;
}

.p-final {
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    margin-top: 10px;
}

.icons {
    display: flex;
    gap: 3rem;
}

.inst-final {
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; 

}

.you-final {
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.twit-final{
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
} /*DEKSTOP/ ACIMA DE 1000PX */