:root[data-theme="light"] {
    --text: #070906;
    --background: #f4f6f4;
    --primary: #486846;
    --bg-menu: rgba(77, 145, 191, 0.10);
    --grey: #353535;
    --box-shadow: rgba(0, 0, 255, 0.5);
    --nav-shadow: rgba(41, 41, 41, .25);
    --dark: #ffffff;
    --light: #000000;
    --hover: #575757;
}

:root[data-theme="dark"] {
    --text: #f7f9f6;
    --background: #222222;
    --primary: #000000;
    --bg-menu: rgba(210, 238, 255, 0.6);
    --grey: #c4c4c4;
    --box-shadow: rgb(69, 126, 188);
    --nav-shadow: rgba(81, 81, 81, .80);
    --dark: #000000;
    --light: #ffffff;
    --hover: #959595;
}

body {
    background-color: var(--background);
    color: var(--text);
    transition: background-color 300ms;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--text);
    background-color: var(--primary);
}

.nav-link:hover, .nav-link:focus, .nav-link {
    color: var(--primary);
}

.navbar {
    font-size: 1.2rem;

    img {
        height: 115px;
    }
}

.navMenu {
    background-color: var(--bg-menu);
    box-shadow: 0 5px 10px -2px var(--nav-shadow);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--text);
}

footer p {
    color: var(--grey);
}

.about {
    width: 90%;
}

@media (max-width: 340px) {
    footer > * {
        margin: 0 auto;
        padding-top: 10px;
    }
}

@media (max-width: 415px) {
    a.navbar-brand {
        width: 200px;
    }
}

@media (min-width: 990px) {
    .nav-item {
        padding: 1rem;
    }
}

@media (min-width: 1400px) {
    .about {
        width: 80%;
    }
}

/*Dark Mode*/

.theme-toggle {
    width: 84px;
    height: 50px;

    > div {
        background-color: var(--grey);
        position: absolute;
        border-radius: 5em;
        width: 84px;
        height: 50px;
        cursor: pointer;
    }
}

.theme-toggle-inner {
    background-color: var(--background);
    border-radius: 5em;
    height: 80%;
    width: 90%;
    margin: auto;

    > svg {
        height: 32px;
        width: 32px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) scale(80%);
        display: none;
    }
}

.theme-toggle-circle {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--grey);
    transition: left 200ms ease-in-out;
}

[data-theme="light"] .theme-toggle-circle {
    left: 8px;
    height: 34px;
    width: 34px;
}

[data-theme="dark"] .theme-toggle-circle {
    left: 42px;
    height: 32px;
    width: 32px;
}

[data-theme="light"] .toggle-light {
    display: block;
}

[data-theme="dark"] .toggle-dark {
    display: block;
}

.toggle-light {
    left: 9px;
}

.toggle-dark {
    right: 10px;
}