/* =========================
   Theme: Light Mode Overrides
   ========================= */

@media only screen and (min-width: 1300px) {
    html.light-mode .switch-element{
    color: black;
    }

    html.light-mode body {
        background-color: white;
    }

    .light-mode .links {
        filter: invert(0.5);
    }

    .light-mode .links-container {
        border: 2px solid rgb(150, 150, 150);
    }

    .light-mode .nav {
        background-color: white;
        color: white;
    }

    .light-mode .nav img{
        filter: invert(1);
    }

    /* Contact elements */

    .light-mode textarea {
        border: 2px solid black;
        border-radius: 1em;
    }

    .light-mode form {
        background-color: rgb(194, 194, 194);
    }

    
    .light-mode #highlight {
        color: rgb(107, 99, 25);
    }

    .switch-container {
        position: fixed;
        top: 30px;
        right: 50px;
        width: 75px;
        height: 30px;
        z-index: 100;
    }

    #toggle-button {
        position: absolute;
        width: 25px;
        height: 25px;
        top: 5px;
        left: 5px;
        background-color: rgb(0, 150, 240);
        border-radius: 35px;
        cursor: pointer;
        z-index: 150;
    }

    #toggle-background {
        position: absolute;
        width: 75px;
        height: 30px;
        background-color: black;
        border-radius: 25px;
        border: 3px solid rgb(30, 30, 30);
        cursor: pointer;
    }

    /* View mode toggle style */
    /* Toggle animation + light background */
    .switch-container.active #toggle-button {
    transform: translateX(45px);
    }

    #toggle-button {
    transition: transform 0.25s ease, background-color 0.25s ease;
    }

    #toggle-background {
    transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    /* When light mode is active, make the switch look "on" */
    .switch-container.active #toggle-background {
    background-color: rgb(230, 230, 230);
    border-color: rgb(180, 180, 180);
    }
}