.dark {
    background: rgb(23, 23, 23);
    background: linear-gradient(180deg, rgba(23, 23, 23, 1) 96%, rgba(255, 26, 26, 0.9) 100%);
    color: var(--dark-30);
}

.dark header {
    /* From https://css.glass */
    border: none;
    background: rgba(24, 23, 23, 0.514);
    color: var(--dark-40);
}

.dark nav ul li {
    color: var(--dark-40);
}

.dark nav li:hover {
    color: var(--dark-30);
}

.dark nav button.theme {
    background: url('../img/brilho-do-sol.png') no-repeat center;
    background-size: 18px;
    filter: invert(70%);
}

.dark nav button.theme:hover {
    background-color: #ddd;
}

.dark #text,
.dark #about-studies .title-ct,
.dark .title {
    color: var(--dark-40);
}

.dark .title-min,
.dark #about-studies .title-min-ct {
    color: var(--red);
}

.dark .btn-download {
    background: var(--red);
    line-height: 42px;
    padding: 0;
    border: none;
}

.dark .btn-download:before,
.dark .btn-download:after {
    background: var(--red);
    box-shadow:
        -7px -7px 20px 0px rgba(255, 26, 26, 0.9),
        -4px -4px 5px 0px rgba(255, 26, 26, 0.9),
        7px 7px 20px 0px rgba(0, 0, 0, .2),
        4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.dark .btn-download:hover {
    color: var(--red);
    background: transparent;
}

.dark .btn-download span:before,
.dark .btn-download span:after {
    background: var(--red);
    box-shadow:
        -7px -7px 20px 0px rgba(255, 26, 26, 0.9),
        -4px -4px 5px 0px rgba(255, 26, 26, 0.9),
        7px 7px 20px 0px rgba(0, 0, 0, .2),
        4px 4px 5px 0px rgba(0, 0, 0, .3);
}

.dark #about-me .contacts .contacts-container {
    color: var(--dark-30);
}

.dark #about-me .contacts .contacts-container i {
    background-color: var(--dark-30);
}

.dark #about-me .contacts .contacts-container:hover {
    border: 2px solid var(--red);
    color: var(--dark-40);
    box-shadow:
        -2px -2px 5dvh 0px var(--red),
        -2px -2px 4px 0px var(--red),
        2px 2px 5dvh 0px rgba(0, 0, 0, .2),
        2px 2px 4px 0px rgba(0, 0, 0, .3);
}

.dark #about-me .contacts .contacts-container:hover>i {
    background-color: var(--red);
    color: #000;
}

.dark .open .title {
    background-color: transparent;
    color: var(--red);
    border: 2px solid var(--red);
}

.dark .open .title:hover {
    border: 2px solid transparent;
    transition: all 0.3s ease;
    outline: none;
    box-shadow:
        -2px -2px 2dvh 0px var(--red),
        -2px -2px 2px 0px var(--red),
        2px 2px 2dvh 0px var(--red),
        2px 2px 2px 0px var(--red);
}

.dark .open h4 {
    color: var(--red);
}

.dark .certificate img {
    background-color: var(--dark-40);
    opacity: .8;
    border-radius: 20px;
}

.dark #projects .project {
    border: .1px solid #353535;
}

.dark #projects .project:hover {
    border-bottom: 4px solid var(--red);
    color: #ddd;
}

.dark #projects .project:hover>.btn-project i {
    color: #ddd;
}

.dark #projects .project .btn-project i:hover {
    color: var(--red);
}

.dark #projects button.customPrevBtn,
.dark #projects button.customNextBtn {
    color: var(--red);
}

.dark .btn-project i:hover {
    color: var(--red);
}

.dark #services .services-container .services {
    background-color: var(--dark-20);
    border-bottom: 6px solid var(--red);
}

.dark #services .services-container .services p {
    color: var(--dark-30);
}

.dark #services .services-container .services i {
    color: var(--red);
}


.dark #skills .skills-container i {
    color: var(--red);
}

.dark form .message i:hover {
    background-color: var(--red);
}

.dark .submit-effect {
    background: transparent;
    border: 2px solid var(--red);
}

.dark .submit-effect:after {
    background-color: var(--red);
    border-radius: 2px;
    box-shadow: none;
    transition: all 0.3s ease;
}

.dark footer {
    background: rgb(23, 23, 23);
    background: linear-gradient(0deg, rgba(23, 23, 23, 1) 25%, rgba(255, 26, 26, 0.009000000000000001) 100%);
}

.dark #back-to-top:hover {
    background-color: var(--red);
}

.dark [data-tooltip]:hover {
    color: var(--red);
}

.dark [data-tooltip]:after {
    color: var(--red);
    border: .5px solid var(--red);
}