/*Font*/
.anton-regular {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}
/*reset*/
body,html{
    height: 100%;
}

body{
    background: rgb(0, 0, 0);
    font-family: "Kanit", "Helvetica", sans-serif;
    font-weight: 600;
    color: white;
}

/*customização das sessões*/
.active{
    color:aqua!important;
    text-shadow:rgb(95, 255, 255) 0em 0em 0.9em!important;
}

#home{
    height: 100%;
    padding-top: 49px;
    overflow-x: hidden;
    overflow-y: hidden;
}

#sobre, #projetos, #certificacoes, #contato, #sended{
    height: 100%;
    padding-top: 90px;
}

/*Barra de navegação*/
nav.navbar-black{
    padding: 15px, 0px;
    background: black;
    box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.1);
    font-size: 1.2em;
    font-weight: 500;
}

.nav-link{
    margin-right: 1.5em;
    color:rgba(2, 20, 20, 0.2);
    text-shadow:rgb(95, 255, 255) 0em 0em 0.1em;
}

.nav-link:hover{
    color:aqua;
    text-shadow:rgb(95, 255, 255) 0em 0em 0.9em;
}

.divisor{
    width: 3.5px;
    background:  aqua;/*rgba(0, 255, 255, 0.7); */
    box-shadow: 0px 0px 8px 1.5px rgb(95, 255, 255);
    margin: 10px 26px 10px 0px;
    animation: blink-neon 1s alternate infinite ease-in-out;
}

nav .dropdown-menu-dark{
    background: black;
    box-shadow: 3px 3px 5px rgba(255, 255, 255, 0.1);
    font-weight: 500;
    --bs-dropdown-link-hover-bg: black;
}

.dropdown-toggle::after {
    color:rgba(9, 236, 236, 0.651);
}


.logo{
    height: 50px;
    width: 150px;
}


/*Seções*/
.softblack{
    background: rgb(15, 15, 15);
}

/*Customizações*/
.btn-aqua{
    color: white;
    font-weight: bolder;
    background:rgba(95, 255, 255, 0.466);
    box-shadow:rgb(95, 255, 255) 0em 0em 0.5em;
    
}

.btn-aqua:hover{
    background:rgba(0, 255, 255, 0.9);   
}

.card{
    margin: .7em;
    border: 2px solid aqua;
    border-radius: 2%;
    box-shadow: rgb(95, 255, 255) 0em 0em 0.9em;
    background: black;
}

.carousel-prev-icon, .carousel-next-icon{
    background-color: aqua;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 102%;
}
.carousel-prev-icon{
    left: 31.7%;
}
.carousel-next-icon{
    right:31.7%;
}

.carousel .active{
    text-shadow: none!important;
}

.card-title{
    color:rgb(95, 255, 255);
    text-shadow:rgb(95, 255, 255) 0em 0em 0.1em;
}

.card-text{
    color: white;
    margin: .2em;
}

.card-text>b{
    color: rgba(0, 255, 255, 0.5);
    margin: .2em;
}

.contorno-caixa{
    border: 2px solid aqua;
    border-radius: 1%;
    box-shadow: rgb(95, 255, 255) 0em 0em 0.9em;
}

.certificado{
    border:2px solid aqua;
    box-shadow: rgba(95, 255, 255, 0.8) 0em 0em 2em;
    width: 20em;
}

.certificado>img{
    width: 15em;
}

.text-dev{
    color:rgba(0, 255, 255, 0.9); 
    /*text-shadow:rgba(95, 255, 255, 0.8) 0em 0em 0.7em;*/
    display:flex;
    font-family:"anton",sans-serif;
}

.projeto-background{
    background-color: rgba(0, 255, 255, 0.8);
    color: black;
}

.text-projeto{
    font-size: 1.3em;
}

.links{
    text-decoration: none;
    font-size: 1.2em;
    color:rgba(2, 20, 20, 0.2);
    text-shadow:rgb(95, 255, 255) 0em 0em 0.1em;
    /*margin-left: 2em;*/
}
 
.links:hover{
    color:aqua;
    text-shadow:rgb(95, 255, 255) 0em 0em 0.9em;
}

.blink-cursor{
    color: aqua;
    border-right: 5px solid aqua;
    white-space: nowrap;
    overflow: hidden;
    animation: mark .5s step-end infinite, write 15s steps(3, end) infinite;
}

/*Animação de digitação "...|" do texto "Desenvolvedor Fullstack" */
@keyframes mark{
    50%{
        border-right-color: transparent;
    }
}
@keyframes write{
    5%{ /*Apaga em 5% do tempo*/
        width: 0.00ch;
    }

    15%{ /*Escreve o texto em 15% do tempo*/
        width: 1.6ch;
    }

    90%{ /*Fica 90% do tempo definido mostrando o texto (...)*/
        width: 1.6ch;
    }
}

/* Animação do divisor do menu principal piscando*/
@keyframes blink-neon{
    0%{
        background: aqua;/*rgba(0, 255, 255, 0.7); rgba(2, 20, 20, 0.5);*/
        box-shadow: 0px 0px 10px 2px rgb(95, 255, 255);
    }
    5%{
        background: rgba(0, 255, 255, 0.7); 
        box-shadow: 0px 0px 5px 0.5px rgb(95, 255, 255);
    }
    50%{
        background: aqua;/*rgba(0, 255, 255, 0.7); rgba(2, 20, 20, 0.5);*/
        box-shadow: 0px 0px 8px 2px rgb(95, 255, 255);
    }
    30%{
        background: rgba(0, 255, 255, 0.7); 
        box-shadow: 0px 0px 5px 0.5px rgb(95, 255, 255);
    }
    25%{
        background: aqua;/*rgba(0, 255, 255, 0.7); rgba(2, 20, 20, 0.5);*/
        box-shadow: 0px 0px 8px 2px rgb(95, 255, 255);
    }
    5%{
        background: aqua;/*rgba(0, 255, 255, 0.7); rgba(2, 20, 20, 0.5);*/
        box-shadow: 0px 0px 8px 2px rgb(95, 255, 255);
    }
}

/*
Carousel com mais de um item por página
fonte: https://codingyaar.com/bootstrap-carousel-multiple-items-increment-by-1/
*/
@media (min-width: 768px) {
    .carousel-3itens {
      display: flex;
    }
    .carousel-item-3itens {
      margin-right: 0;
      flex: 0 0 33.333333%;
      display: block;
    }
}