::-webkit-scrollbar {
    width: 10px;
    background-color: var(--cor-background-container);
}

::-webkit-scrollbar-thumb {
    background-color: var(--cor-primaria);
}

body {
    display: grid;
    grid-template-areas: "header header header"
        "borda-contatos perfil borda-voltar-topo"
        "borda-contatos sobre borda-voltar-topo"
        "borda-contatos habilidades borda-voltar-topo"
        "borda-contatos projetos borda-voltar-topo"
        "footer footer footer";
    grid-template-columns: 8% auto 8%;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(120deg, rgba(0,100,194,0.7), rgba(208,210,218,1), rgba(0,100,194,0.7), rgba(208,210,218,1));
    background-size: 300%;
    animation: backgroundColors 6s ease infinite;
}

body section .campo-title {
    background-color: var(--cor-background-container);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin: 10px;
}

body section .title {
    font-size: 70px;
    text-align: center;
    color: var(--cor-primaria);
}

/*Voltar para o topo*/

.borda-voltar-topo {
    grid-area: borda-voltar-topo;
}

.borda-voltar-topo .icon-topo {
    position: fixed;
    bottom: 50px;
    right: -100px;
    transition: 1s ease-in-out;
}

.borda-voltar-topo .icon-topo i {
    font-size: 40px;
    color: var(--cor-borda-dinamica);
    transition: all 0.3s ease;
}

.borda-voltar-topo .icon-topo i:hover {
    color: var(--cor-terciaria);
    box-shadow: 0px 0px 20px 0px rgba(0,100,194,0.7);
}
.borda-voltar-topo .icon-topo i:active {
    color: var(--cor-click-active);
}

.mostrar-icone-topo .icon-topo  {
    right: 10px;
}

/*Modo Dark*/

.borda-voltar-topo .icon-topo.dark {
    animation: darkActive 2s steps(1) infinite;
}

body.dark {
    background: rgb(1,38,73);
    background: linear-gradient(120deg, rgba(1,38,73,0.7), rgb(20, 40, 60), rgba(1,38,73,1), rgb(20, 40, 60));
    background-size: 300%;
    animation: backgroundColors 6s ease-in infinite;
}

body.dark .perfil .nome-dev .title-name,
body.dark .perfil .nome-dev .dev,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark p {
    color: var(--cor-background-light);
}



.button-musica {
    width: 30px;
    height: 30px;
    border: 1px solid var(--cor-background-light);
    border-radius: 100%;
    z-index: 10;
    cursor: pointer;
}

.button-musica .button-musica-interno {
    position: relative;
    height: 17px;
    width: 17px;
    display: flex;
    justify-content: space-between;
    left: 5px;
    top: 5px;
}

.button-musica .button-musica-interno .linha-do-button1 {
    border-radius: 1px;
    height: 100%;
    width: 1px;
    background-color: var(--cor-background-light);
    transform: scaleY(.1);
}

.button-musica .button-musica-interno .linha-do-button2 {
    border-radius: 1px;
    height: 100%;
    width: 1px;
    background-color: var(--cor-background-light);
    transform: scaleY(.5);
}

.desativar-musica {
    animation: none;
}

.ativar-musica {
    animation: transformBotaoMusic 3s steps(50) infinite;
}

/*Responsivo*/

@media (max-width: 1024px) {
    .borda-voltar-topo .icon-topo .fa-solid {
        font-size: 35px;
    }
}

@media (max-width: 768px) {
    body section .title {
        font-size: 40px;
    }

    .mostrar-icone-topo .icon-topo  {
        right: 3px;
    }

    .borda-voltar-topo .icon-topo .fa-solid {
        font-size: 30px;
    }
}

@media (max-width: 375px) {
    body section .campo-title {
        margin: 5px;
    }

    .mostrar-icone-topo .icon-topo  {
        right: 2px;
    }
}

/*KeyFrames*/

@keyframes backgroundColors {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;

    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes bordaBrilhante {
    0% {
        filter: drop-shadow(0px 0px 0 rgba(3, 91, 255, 0.333)) drop-shadow(0 0 10px #008cff) 
    }
    50% {
        filter: drop-shadow(0px 0px 0 rgba(3, 91, 255, 0.333)) drop-shadow(0 0 10px #8cc9fc) 
    }

    100% {
        filter: drop-shadow(0px 0px 0 rgba(3, 91, 255, 0.333)) drop-shadow(0 0 10px #008cff) 
    }
}

@keyframes bordaAnimada {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes movimentacaoDosContatos {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(5px);
    }
    
    45% {
        transform: translateX(5px);
    }
}

@keyframes darkActive {
    0%
    {
        filter: drop-shadow(0px 0px 0 #0005) drop-shadow(0 0 10px #b7f4f7) 
    }
    95%
    {
        filter: drop-shadow(0px 0px 0 #0005) drop-shadow(0 0 0 #ffffff) brightness(1.3);
    }
}

@keyframes transformBotaoMusic {
    20%
    {
        transform: scaleY(0.3);
    }
    30%
    {
        transform: scaleY(0.4);
    }
    40%
    {
        transform: scaleY(0.5);
    }
    50%
    {
        transform: scaleY(0.6);
    }
    40%
    {
        transform: scaleY(0.5);
    }
    30%
    {
        transform: scaleY(0.4);
    }
    20%
    {
        transform: scaleY(0.3);
    }
    10%
    {
        transform: scaleY(0.2);
    }
}