:root {
    --Soft-orange: #e9ab53;
    --Soft-red: #f15e50;
    --Off-white: #070a0a;
    --Grayish-blue: #c5c6ce;
    --Dark-grayish-blue: #ffffff;
    --Very-dark-blue: #454c9e;
    --hover-a: #27C5FF;
    --filter-logo: invert(77%) sepia(52%) saturate(308%) hue-rotate(162deg) brightness(99%) contrast(97%);
    --filter-icon: invert(100%);
    --article-p: #0f1825;
    --h1: #fff;
    --numberFooter: #ffffff73;
    --body: rgb(47, 47, 54);
    --bodyBefore: #000613;
    --bodyHover: #3c3c53;
}

.light-theme {
    --Soft-orange: #e9ab53;
    --Soft-red: #f15e50;
    --Off-white: #fffdfa;
    --Grayish-blue: #c5c6ce;
    --Dark-grayish-blue: #5d5f79;
    --Very-dark-blue: #00001a;
    --hover-a: #27C5FF;
    --filter-logo: invert(0%);
    --filter-icon: invert(0%);
    --article-p: #d6f2ff;
    --h1: #000;
    --numberFooter: #000000a6;
    --body: rgb(255, 255, 255);
    --bodyBefore: #8a9499;
    --bodyHover: #dff8fc;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            var(--bodyBefore));
    z-index: -1;
}

body:hover {
    background: var(--bodyHover);
}

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

.logo {
    filter: var(--filter-logo);
}

#icon {
    filter: var(--filter-icon);
}

.burguerMenu a {
    color: var(--Dark-grayish-blue);
}

.burguerMenu a:hover {
    color: var(--hover-a);
}

.burguerMenu a:hover::before {
    background-color: var(--hover-a);
}

h1 {
    color: var(--h1);
}

.col-md-6 p {
    color: var(--Dark-grayish-blue);
}

.col-md-6 a {
    background-color: var(--Soft-red);
    color: var(--Off-white);
}

.col-md-6 a:hover {
    background-color: var(--Very-dark-blue);
}

aside {
    background-color: var(--Very-dark-blue);
}

h2 {
    color: var(--Soft-orange);
}

aside a {
    color: var(--Off-white);
}

aside a:hover {
    color: var(--Soft-orange);
}

article a {
    color: var(--article-p);
}

h3 a {
    color: var(--Very-dark-blue);
}

h3 a:hover {
    color: var(--Soft-red);
}

span {
    color: var(--Dark-grayish-blue);
}

.content p {
    color: var(--numberFooter);
}

#btnMenu {
    filter: var(--filter-logo);
}

@media (max-width: 48rem) {
    .burguerMenu {
        background-color: var(--body);
    }
}

.block,
.block2 {
    border-bottom: 1px solid var(--Grayish-blue);
}