body.dark-mode{
    /*Landing BG*/
    --landing-bg:linear-gradient(to bottom, #0F1213 0%, #0f1924 50%, #0c3a5e, #0c507f 70%, #521290 100%);
    --interior-bg:linear-gradient(to bottom,#0F1213 0%, #0f1924 20%, #0c3a5e 40%, #0c507f 80%, #521290  100%);
    
    /*Background-colors*/
    --primary-white-bg: #0f1213;
    --secondary-lightgray-bg: #1C2022;
    --tertiary--darkblue-bg: #1B305B;
    /*Nav Menu BG*/
    --nav-menu-bg: linear-gradient(180deg, rgb(37, 155, 228) 10%, rgb(27, 27, 27) 60%);

    /*Text-colors*/
    --big-txt-black: #FFFFFF;
    --small-txt-gray: #FFFFFF;
    --over-txt-white: #FFFFFF;
}

#landing .content .main-content h1 span {
    color:#1EAAE6;
}

body.dark-mode #projects .content .projects-container .project a{
    border:2px white solid;
}

body.dark-mode #plans .content .plans-container .plan{
    background-color: #283755;
}

body.dark-mode #plans .content .plans-container .plan .plan-pricing .plan-type{
    color:#FFFFFF;
}

body.dark-mode #plans .content .plans-container .plan .plan-pricing .plan-price{
    color:white;
}

body.dark-mode #footer{
    background-color: #1C2022;
}

body.dark-mode #contact .content .contact-container .contact-info .contact-topic {
    color: black;
}

body.dark-mode input::placeholder,
textarea::placeholder {
    color: black;
}

/*************/

.darkmode-toggle {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4.5em;
    width: 3em;
    height: 3em;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

.darkmode-toggle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2em;
    height: 2em;
    pointer-events: none;
    margin: 0 auto;
}

.darkmode-toggle .sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.darkmode-toggle .moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s, fill 0.3s;
}

body.dark-mode .darkmode-toggle .sun {
    transform: translate(-50%, -50%);
    opacity: 1;
}

body.dark-mode .darkmode-toggle .moon {
    transform: translate(-50%, -150%);
    opacity: 0;
}