:root {
        --base1: #222222;
    --base2: #555555;
    --base3: #d1d1d1;
    --base4: #eeeeee;
    --base5: #aabbbb;
    --base6: #ffffff;
    --base7: #333333;
    --base8: #888888;
}

[data-theme="ArtsAndCrafts"] { 
    --base1: #000000; /* Default background */
    --base2: #A06AB4; /* */
    --base3: #FFD743; /* Header/Footer Text hover-nav-color*/base
		      --nav1:  #E56997; /* Navbar */
    --nav2:  #ffffff; /* Hover nav text */
    --res1:  #8D538D; /* Search Result  */
    --res2:  #8D538D; /* Search Result Hover */
}

[data-theme="MeltedIceCream"] {
        --base1: #000000; /* default Text Color */
    --base2: #5BB0BA; /* Footer and Background */
    --base3: #F6C8CC; /* Body  & Footer Text &  hover-nav-color */
    --nav1:  #C15B78; /* Navbar */
    --nav2:  #EBF5F7; /* Hover nav text */
    --res1:  #8D538D; /* Search Result  */
    --res2:  #C15B78; /* Search Result Hover */
}

[data-theme="MidnightSwim"] {
        --base1: #000000; /* default Text Color */
    --base2: #08153A; /* Footer and Background */
    --base3: #C08D2C; /* Body  & Footer Text &  hover-nav-color */
    --nav1:  #0B1F65; /* Navbar */
    --nav2:  #E3B668; /* Hover nav text */
    --nav3:  #FFE0AE; /* Navbar Text */
    --res1:  #8D538D; /* Search Result  */
    --res2:  #C15B78; /* Search Result Hover */
}

[data-theme="PowerUp"] {
        --base1: #000000; /* Default background */
    --base2: #900020; /* */
    --base3: #e9ddd4; /* Header/Footer Text hover-nav-color*/
    --base4: #e9ddd4; /* Background Main */
    --nav1:  #AE002B; /* Navbar */
    --nav2:  #ffffff; /* Hover nav text */
    --res1:  #AE623A; /* Search Result  */
    --res2:  #C57951; /* Search Result Hover */
}

[data-theme="SunKissedRock"] {
        --base1: #000000; /* default Text Color */
    --base2: #FFE0AE; /* Footer and Background */
    --base3: #A2ABCE; /* Body  & Footer Text &  hover-nav-color */
    --nav1:  #F5631A; /* Navbar */
    --nav2:  #FFA303; /* Hover nav text */
    --nav3:  #FFE0AE; /* Navbar Text */
    --res1:  #8D538D; /* Search Result  */
    --res2:  #C15B78; /* Search Result Hover */
}

[data-theme="twilightStreet"] {
    --base1: #000000; /* Default background */
    --base2: #96A2ED; /* */
    --base3: #EBF5F7; /* Header/Footer Text hover-nav-color*/
    --nav1:  #0C1446; /* Navbar */
    --nav2:  #C98568; /* Hover nav text */
    --res1:  #8D538D; /* Search Result  */
    --res2:  #8D538D; /* Search Result Hover */
}


body {
    background-color: var(--base2);
}

#footer {
    background-color: var(--base2);
    color: var(--base3);
}

#footer a {
    color:var(--base3);	  
}

/* Text bodies that will apply to base level pages */


#main {
    color: var(--base1);
    background-color: var(--base3);
}



/* The UL around the list */
#navigationbar {
    background-color: var(--nav1);
}

/* every top level link in the topnav */
.topnav {
    color: var(--base3);
}

#navigationbar a:hover {
    background-color: var(--base2);
    color: var(--nav2);
}


.dropdown-content {
    background-color: var(--base2);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a{
    color: var(--base3);
}

.dropdown-content a:hover {
    background-color: var(--nav2);
}


/* Gallery page specific styling */

.gallery_image:hover {
    box-shadow: 0 5px 15px #999999;
}

/* Engine page specific styling */

.result {
    background-color:var(--base3);
    color:var(--base1);
}

.result:hover {
    background-color:var(--base8);
    color:var(--base1);
}