* {
    box-sizing: border-box;
}

:root {
    --nav-light: rgb(255, 255, 255);
}

.light-mode nav {
    background-color: var(--nav-light);
    border-bottom:2px solid brown;
}

.light-mode footer {
    background-color: brown;
    color: white;
    border-top: 1px solid white;
}

.light-mode nav:hover {
    background-color: var(--nav-light);

}


.light-mode nav h1 {
    color: black;
}

.light-mode #nav-toggle {
    color: black;
}

.light-mode nav ul {
    background-color: var(--nav-light);
}

.light-mode nav li {
    background-color: var(--nav-light);
}

.light-mode nav ul li a {
    color: black;
}

.light-mode nav ul li a:hover {
    color: white;
    background: brown;
    box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.499);
}

.light-mode .home {
    background: white;
    --blueish: white;
    --iconhome: brown;
    --firstslash: brown;
    --blackmain: white;
    --secondslash: white;
}

.light-mode .home-2-container .hello-world p,
.light-mode .home-2-container .hello-world2 p {
    color: rgb(206, 8, 8);
}



.light-mode .home-icons a:hover,
.light-mode .home-cv:hover {
    background-color: rgb(203, 203, 203);
}

.light-mode .home::after {
    display: none;
}

.light-mode .home-1 h1,
.light-mode .home-1 {
    color: black;
}

.light-mode .home-1 h1 {
    position: relative;
}


.light-mode .home-2-container {
    background: none;
}

.light-mode .home-2 {
    background: none;
    color: white;
}


.light-mode .home-cv,
.light-mode .home-icons a {
    color: white
}


.light-mode .home-2b {
    border: none;
}

.light-mode .hello-world,
.light-mode .hello-world2 {
    background-color: brown;
}

.light-mode .home-2-container .hello-world p,
.light-mode .home-2-container .hello-world2 p {
    color: black;
}

.light-mode .home-2 {
    background: brown;
    border-radius: 0;

}



/*PROFILE PROFILE*/
.light-mode .profile-container {
    background-image: none;
}

.light-mode .profile-entry {
    background: none;
    color: black;
}

.light-mode .profile-entry p {
    color: black
}

.light-mode .profile-desc {
    background-color: white;
    color: black;
}

.light-mode .profile-desc .content h1 {
    background-color: brown;
    color: white;

}

.light-mode .profile-desc .content h3 {
    color: brown;
}

.light-mode .profile-academic h1,
.light-mode .profile-skill h1 {
    color: black;
    text-shadow: none;
}

.light-mode .academic-item {
    background-color: rgb(255, 255, 255);
    color: black;
    border: none;
}

.light-mode .academic-item:hover {
    background-color: brown;
    color: white;
}

.light-mode .profile-skill h3, .light-mode .profile-academic h3{
    background: none;
    color: black;
}

.light-mode .load-left,
.light-mode .load-right {
    background: none;
    box-shadow: none;
}

.light-mode .loading-level {
    background: brown;
}

.light-mode .loading-title {
    color: brown;
    text-shadow: none;
}

.light-mode .projects {
    background: none;
}



.light-mode .fr-item {
    color: white;
    box-shadow: none;
    background: rgba(191, 105, 105, 0.942);
}

.light-mode .fr-h5 {
    color: black;
}

/*PROJECTS*/

.light-mode .projects-main h1,.light-mode .projects-github h1{
    text-shadow: none;

}
.light-mode .card:hover {
    border: solid black;
}
.light-mode .card {
    background: brown;
    border: 1px solid black;
    transition: all .5s;
    box-shadow: 5px 5px 1px black;
}

.light-mode .projects-github h1,
.light-mode .projects-main h1 {
    color: black;
    font-weight: lighter;
}
.light-mode .input-container input{
    box-shadow: 3px 3px 1px black;
}
.light-mode .input-container input:focus{
    box-shadow: 1px 1px 1px black;
    border: none;
}
.light-mode {
    --gitprimary: rgb(255, 255, 255);
    --gitsecondary: rgb(0, 0, 0);
    --gitlink: brown;
    --gitlinkhov: brown;
}

.light-mode .git-container {
    border: 1px solid black;
    background: none;
    color: black;

}

.light-mode .input-field {
    color: black;
    border: 1px solid black;
}


/*CONTACT*/
.light-mode .contacts-entry {
    background: white;
    color:black;
}
.light-mode .contact-container {
    background: white;
}
    
.light-mode .contact {
    background-color: white;
    color: black;
}

.light-mode .contact input,
.light-mode .contact textarea {
    background: none;
    color: black;
}

.light-mode .contact textarea {
    background: none;
}

.light-mode .contact h1 {
    color: black;
}

.light-mode .contact #submit-button {
    background-color: brown;
    color: white;
}


.light-mode .contact #submit-button:hover {
    background-color: rgb(203, 81, 81);
}

.light-mode .projects-main h1,
.light-mode .projects-github h1 {
    background: white;
}

.light-mode .projects {
    background: white;
}

.light-mode .projects-h1-container {
    background: rgb(255, 255, 255);
    color: black;
}

.light-mode .projects-p {
    color: black;
    background: none;
}

.light-mode .contacts-h1-container {
    background: rgb(255, 255, 255);
    color: black;
}

.light-mode .contacts-p {
    color: black;
    background: none;

}

@media screen and (max-width: 768px) {

    .light-mode .frontend-container,
    .light-mode .ai-container,
    .light-mode .backend-container {
        background-color: brown;
        border: solid black;
        box-shadow: 15px 15px 1px brown;
    }
    .light-mode  ul{
        border-right:2px solid brown;
    }

}