/* CUSTOM COLORS */

html { 
    --text-color: #000;
    --bg-color: #fff;
    --bg-color-grey: rgb(245,245,245);
    --bg-accent: #272829;
}

html[data-theme='dark'] {
    --text-color: #fff;
    --bg-color: #171819;
    --bg-color-grey: rgb(45, 45, 45);
}

.bg-dark {
    background: var(--bg-accent)!important;
}

/** GENERAL **/

body {
    background: var(--bg-color);
    color: var(--text-color);
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/** HEADER **/

header {
    background: #000 url(../img/background.jpg);
    background-size: cover;
    background-position: center;
}

/** HEADER - TOP BAR **/
div#topbanner {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 200px;
}

div#topbanner h1{
    font-weight: bold;
    margin-bottom:0;
}

html:lang(pt) div#topbanner h1::after {
    content: "com til!";
}

html:lang(en) div#topbanner h1::after {
    content: "with tilde!";
}

div#topbanner h1::after {
    position:relative;
    font-family: 'Roboto Slab', serif;
    top:30px;
    left:-35px;
    color: white;
    font-size:20px;
}

div#topbanner > #social-networks {
    position:relative;
}

div#topbanner > #social-networks > a {
    position:absolute;
    right:5px;
    bottom: -70px;
    color:white;
    font-weight: bold;
}

div#topbanner > #social-networks .toggle {
    position:absolute;
    right:50px;
    bottom: -70px;
    font-weight: bold;
}

div#topbanner > #social-networks ul.social-list {
    position:absolute;
    right:0;
}

div#menubar {
    padding-left:0;
    padding-right:0;
}

#social-networks ul.social-list {
    list-style-type: none;
    padding-inline-start: 0;
}

#social-networks ul.social-list li {
    float: left;
}

#social-networks ul.social-list li a i {
    color: #fff;
    text-align: center;
    margin-right: 10px;
    transition: all 0.2s ease-in-out;
    background:var(--bg-accent);
    padding-top: 20%;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

#social-networks ul.social-list li a i {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font-size: 15px;
}

#social-networks ul.social-list li a i:hover {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    color: var(--bg-accent);
    background:#fff;
}

#social-networks ul.social-list li:last-child a i {
    margin-right:0;
}

/** HEADER - NAVBAR **/
.navbar {
    height: 50px;
    padding: 0 !important;
    z-index: 10000;
}

.navbar .navbar-nav {
    width:100%;
    z-index: 10000;
}

.navbar .navbar-nav .nav-item {
    width:100%;
    text-align:center;
}

.navbar .container-lg, .navbar #navbarNav, .navbar-nav, .navbar-nav .nav-item, .navbar-nav .nav-item .nav-link {
    height:100%;
}

.nav-item.active {
    border-bottom: 6px solid #fff;
    font-weight: bold;
}

.nav-item .nav-link:not(.active) {
    padding-top: 12px;
    transition: all 0.3s;
    background-size: 100% 200%; 
    background-image: linear-gradient(to top, #fff 50%, #272829 50%)!important; 
}

.nav-item .nav-link:hover:not(.active) { 
	background-position: 0 100%; 
	color: #000!important; 
}

.navbar-toggler {
    margin-left: 24px;
}

/** GENERAL - PAGES **/
.page-title{
    margin-bottom:30px;
}

.page-title h2::after {
    content:'____';
    position:absolute;
    top:10px;
    left:100px;
    color:var(--bg-color);
    width:50px;
    border-bottom:3px solid var(--text-color);
}

.page-title h2 {
    font-family: 'Roboto Slab';
}

.section-title {
    text-align: center;
    margin-bottom:25px;
}

.section-title span {
    position:relative;
    width:0;
    height:0;
}

.section-title span::after {
    content: '_____';
    position: absolute;
    font-size: xx-large;
    text-decoration: underline;
    top: -35px;
    left: -30px;
    text-align: center;
    color: var(--text-color);
}

.section-title.section-dark {
    color: white;
}

.section-title.section-dark span::after {
    color: white;
}

/** Página Principal **/
section#main-head div#social-networks ul.social-list li a i {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    font-size: 23px;
}

section#about-me #foto {
    background: #000 url(../img/foto.jpg);
    height: 250px;
    background-position: center center;
    background-size: cover;
}

@media (min-width: 992px) {
    section#about-me #foto {
        background: var(--bg-color) url(../img/foto.jpg);
        height: 250px;
        background-position: center -50px;
        background-size: cover;
    }
}

.bg-timeline {
    background: var(--bg-accent);
    background: linear-gradient(180deg, var(--bg-accent) 0%, rgba(57,59,98,1) 100%);    
}

ul#timeline li::before {
    content:' ';
    width:16px;
    height:16px;
    background:white;
}

ul#timeline li.timeline--item h5 {
    font-size:1.3rem;
}

ul#timeline li.timeline--item h6 {
    font-size:1.1rem;
    margin-bottom:0.1rem;
    font-weight: bold;
}

/** FOOTER **/
footer > div > div > div:last-child span:last-child {
    font-weight:bold;
    font-size:10px;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

section#about-me a.text-dark {
    color:var(--text-color)!important;
}

.close {
    color:var(--text-color);
}

/* Modals */

.modal-content {
    background: var(--bg-color);
    color: var(--text-color);
}

.modal-header {
    border-bottom:1px solid var(--bg-color-grey);
}

.modal-footer {
    border-top:1px solid var(--bg-color-grey);
}

/* Form */
.form-control {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--bg-accent);
}

.form-control:focus {
    background-color: var(--bg-color-grey);
    border: 1px solid var(--bg-accent);
    color: var(--text-color);
}