/* Reset Css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior:smooth;
    scroll-padding-top: 100px;

    
    scrollbar-color: var(--cor-secundary-alpha) transparent;
}


/* Variaveis CSS */

:root {
    --cor-primary: #212121ff;
    --cor-primary-alpha:#21212180;
    --cor-secundary: #f2f2f2ff;
    --cor-secundary-alpha: #f2f2f280;
    
    --cor-primary-linear-gradient: linear-gradient(180deg, #f2f2f2, #737373);
    --cor-secundary-linear-gradient: linear-gradient(180deg, #737373,#212121);

    --cor-primary-radial-gradient: radial-gradient(#f2f2f2,#737373);
    --cor-secundary-radial-gradient: radial-gradient( #737373,#212121);

}





/* Global Style */

 

 

body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto Serif',sans-serif;
    background-color:var(--cor-primary);
    color: var(--cor-secundary);    
    text-shadow: 1px 1px 2px black;
}

a {
    text-decoration: none;
    color: var(--cor-secundary);
    display: inline-block; 
    transition: filter 0.3s ease-in,
                transform 0.3s ease-in; 
}



li {
    list-style: none;
}

.divider {
 
        display:block;
        margin-top:5px;   
        height:1px;
        width:80%;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--cor-secundary) 50%, rgba(0,0,0,0) 100%);
        border: none; 
      
}





/* Efeitos Globais */

/* Esmaecer */

/* Aplica a TODOS que começam com "fadeIn-section" */
[class*="fadeIn-section"], 
.fadeIn-home {
    opacity: 0;
    transform: translateY(10px); /* Efeito adicional de deslize */
    transition: opacity 2s ease-in-out, transform 1s ease-in-out;
}

[class*="fadeIn-section"].visible,
.fadeIn-home.visible {
    opacity: 1;
    transform: translateY(0);
}




/* Responsividade globais */
@media (min-width:800px){
    .divider{
        width:95%
    }

    a:hover {
        filter: brightness(1.1) drop-shadow(1px 1px 1px var(--cor-secundary-alpha));
        transform: scale(1.15);
    }
}


@media (min-width:1080px){
    .divider{
        max-width:1080px;
    }

    a:hover {
        filter: brightness(1.1), drop-shadow(1px 1px 1px var(--cor-secundary-alpha));
        transform: scale(1.15);
    }
}




/* SCROLL Para Chrome, Edge, Opera e outros navegadores WebKit */
::-webkit-scrollbar {
    width: 20px;
    height: 20px;
    background-color: transparent;

}
  
::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}
  
::-webkit-scrollbar-thumb {
    background-color: var(--cor-secundary-alpha); 
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
  
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5); 
}
  
::-webkit-scrollbar-button {
    display: none; /* Remove as setas */
}


/* validação visuais  globais  */

input:focus,
textarea:focus{
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: red;
  }


input:valid {
  border-color: green;
}