/* Navegação #77349B */
/* Background #4A424D */
/* Background projects #9C00F0 */
/* #b197Fc */

/* Layout */
html, body, #home{
    height: 100%;
}

*{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

:root{
    --bg-color: black;
}
[data-theme='white']{
    --bg-color: #f2f2f2;
    #Coaty {
        color: #000000;
    }
    #home{
        color: #000000;
    }
}

body{
    background: var(--bg-color);

}

/* Navegação */

#header{
    background: #77349B;
}
#nav-principal li a{
    color: white;
    font-size: 1.25em;
}
#nav-principal li a:hover{
    color: #77349B;
    background: white;
}
.divisor{
    width: 1px;
    background: white;
    margin: 12px 15px;
}

#changeThemeB{
    position: absolute; right: 20px;
}
.fa-regular{
    color: white;
}

/* Conteudo */
#coaty{
    text-shadow: 5px 3px #9C00F0;
}

#home{
    text-align: center;
    color: white;
}

.btn-purple{
    color: white;
    background: #b197Fc;
}
.btn-purple:hover{
    color: black;
    background: white;
}
#home .card{
    background: #77349B;
    color: white;
}

.project{
    padding-bottom: 1em;
}

/* Footer */

footer{
    text-align: center;
    color: #b197Fc;

}

footer a{
    color: #b197Fc;
    padding: 0 10px;
}

i{
    font-size: 3em;
}

i:hover{
    color: #9C00F0;
}


/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #nav-principal li a{
        font-size: 1em;
    }
 }

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    #nav-principal li a{
        font-size: 1em;
    }
 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 

 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 

 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

 }