:root {
    --color-black: rgb(0, 0, 0);
    --color-black-150: rgba(0, 0, 0, 0.15);

    --color-white: rgb(255, 255, 255);
    --color-white-150: rgba(255, 255, 255, 0.15);
}

/* ====================== LIGHT MODE ====================== */

/* NAVBAR */
.navColorLightMode {
    background-color: var(--color-white);
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
    box-shadow: 0 4px 6px var(--color-black-150);
}
.navColorLightMode a {
    color: var(--color-black);
}

/* HEADER */
.headerColorLightMode {
    border-bottom: 1px solid var(--color-black);
    box-shadow: 0 4px 6px var(--color-black-150);
}
.headerColorLightMode h1,
.headerColorLightMode p {
    color: var(--color-black);
}
.headerColorLightMode .text .social-icon a {
    color: var(--color-black);
    border: 2px solid var(--color-black);
    background: var(--color-white);
}

/* SKILLS */
.skillColorLightMode .titleSkill,
.skillColorLightMode h3,
.skillColorLightMode .skillGrid .skillCol:nth-child(2)::after,
.skillColorLightMode .skillGrid .skillCol:nth-child(2)::before {
    color: var(--color-black);
}
.skillColorLightMode .iconGroup span {
    color: var(--color-black);
    background: var(--color-white);
    border: 2px solid var(--color-black);
}

/* PROJECTS */
.projectColorLightMode {
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    box-shadow: 0 -4px 6px var(--color-black-150), 0 4px 6px var(--color-black-150);
}
.projectColorLightMode .sectiontitle,
.projectColorLightMode .titleCard {
    color: var(--color-black);
}
.projectColorLightMode .artCard {
    border: 1px solid var(--color-black);
    box-shadow: 0 4px 10px var(--color-black-150);
}
.projectColorLightMode .dataCard {
    background-color: var(--color-white);
    box-shadow: 0 4px 10px var(--color-black-150);
}

/* CONTACT */
.contactColorLightMode h2 {
    color: var(--color-black);
}
.contactColorLightMode form .inputBox textarea {
    color: var(--color-black);
    border: 2px solid var(--color-black);
}
.contactColorLightMode form .inputBox .spanTextarea,
.contactColorLightMode form .inputBox input,
.contactColorLightMode form .inputBox span,
.contactColorLightMode form .inputBox input:valid ~ span,
.contactColorLightMode form .inputBox input:focus ~ span,
.contactColorLightMode form .links a {
    color: var(--color-black);
}
.contactColorLightMode form .inputBox i {
    border-bottom: 2px solid var(--color-black);
}
.contactColorLightMode form input[type="submit"] {
    background: var(--color-white);
    color: var(--color-black);
    border: 2px solid var(--color-black);
}

/* FOOTER */
.footerColorLightMode {
    background-color: var(--color-white);
    color: var(--color-black);
    border-top: 1px solid var(--color-black);
    box-shadow: 0 -4px 6px var(--color-black-150);
}
.footerColorLightMode .social-icon a {
    color: var(--color-black);
    border: 2px solid var(--color-black);
    background: var(--color-white);
}