body.dark-mode .targetElement {
    background: #000000;
}

/*CSS for Dark Mode Toggle

Copy and paste this code into it's own dark.css file. Keep all you dark mode
styles there, and make sure when you link to this sheet in your html head,
make it the bottom css link tag so it overrides all other styles.
At the bottom, that's where you start to add your dark mode styles by
starting starting with "body.dark-mode" and add your class you want to
target at the end. For example,

body.dark-mode .heading-one {}

then add your css properties like normal. That's it!
Scroll to the bottom to start adding your dark mode styles

*/

/* note that Internet Explorer does not support css variables */
:root {
    --dark: #000;
    --medium: #1b1b1b;
    --light: #2e2e2e;
}


.dark-mode-button {
    background: transparent;
    border: none;
    height: 40px;
    width: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.top-dark-mode-button {
    position: absolute;
    top: 60px;
    right: 15px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 1000;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
}

.top-dark-mode-button .dark-toggle {
    background: rgb(230, 230, 230);
    border-color: rgb(230, 230, 230);
    width: 35px;
}

.top-dark-mode-button:after {
    content: 'DARK';
    position: absolute;
    color: #fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 22px;
    top: 10px;
    -webkit-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    transition: .1s ease-in;
}

.bottom-dark-mode-button:after {
    position: absolute;
    top: 50px;
    content: 'DARK';
    color: #fff;
}

body.dark-mode .bottom-dark-mode-button:after {
    content: 'LIGHT';
    position: absolute;
    top: 50px;
    color: #fff;
}

body.dark-mode .top-dark-mode-button:after {
    content: 'LIGHT';
    top: 12px;
    color: #fff;
}

.dark-toggle {
    width: 30px;
    height: 16px;
    z-index: 20;
    border-radius: 10px;
    background: transparent;
    border: 3px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

body.dark-mode .dark-toggle {
    background: rgb(67,183,255);
    background: -o-linear-gradient(left, rgba(67,183,255,1) 0%, rgba(0,221,246,1) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(67,183,255,1)), to(rgba(0,221,246,1)));
    background: linear-gradient(90deg, rgba(67,183,255,1) 0%, rgba(0,221,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43b7ff",endColorstr="#00ddf6",GradientType=1);
    border: none;
}

.dark-toggle span {
    height: 20px;
    width: 20px;
    left: -8px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

body.dark-mode .dark-toggle span {
    left: 15px;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.top-dark-mode-button .dark-toggle {
    background: rgb(230, 230, 230);
    border-color: rgb(230, 230, 230);
    width: 35px;
}


/* Begin adding your dark mode styles here, like so: */

body.dark-mode {
    background: #000
}

body.dark-mode .landing{
    background: linear-gradient(#0e0229, #0e0a4e, #000000); 
    z-index: 4; 
}

body.dark-mode p, 
body.dark-mode H2,
body.dark-mode H3, 
body.dark-mode li, 
body.dark-mode .priceContainer {
    color: #fff
}

body.dark-mode #updates,
body.dark-mode h2 {
    background: #000000;
}

.landing.dark-mode,
.landingSmall.dark-mode,
.whitesmoke.dark-mode {
    background: #000000;
}

.contactContainer form.dark-mode {
    background: linear-gradient(180deg, #4e4e4e 0, #2c2c2c 100%);
}

body.dark-mode .landingSmall  {
    background-image: url(../images/starryNight.webp);
  }