:root {
    --navHeight: 45px;
    --sage: #b6b6b6;
    --paleSpringBud: #dfdfdf;
    --goldCrayola: #FFFFFF;
    --richBlackForeground: #0f1a20;
    --white: #f8f8f8;
    --black: #222;
    --msuGreen: #2f2f2f;
    --gray: rgb(146, 144, 144);
  }

  * {transition: background-color 0.8s ease; }

  .switch {
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .switch div {
    float: left;
    background: #eee;
    width: 30px;
    border-radius: 50px;
    padding: 0 5px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .navslider div {
    background: var(--navBg);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    font-size: 1.1rem;
    position: relative;
  }

  .navslider ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    height: var(--navHeight);
    padding: 0 10px;
  }

  .navslider ul li {
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.9s ease;
    border-radius: 4px;
    position: relative;
  }
  .navslider ul li:hover {
  background-color: none !important;
  }

  .fa-adjust {
    transform: rotate(180deg);
  }

  .switch input {
    display: none;
  }

  .slider {
    background-color: rgb(255, 255, 255);
    transition: 0.4s;
    border-radius: 34px;
    height: 12px;
    width: 12px;
    display: inline-block;
    position: relative;
    /*background-color: var(--themeSwitchColor);*/
  }

  input:checked + .slider {
    transform: translateX(8px);
  }

  nav {
    background: var(--navBg);

  }

 
  nav ul li {

    /*border-radius: 34px;
    height: 12px;
    width: 12px;*/

  }

  nav ul li:hover {
    background-color: var(--navLinkHoverBg);
    color: var(--white);
  }


  body {
    background: var(--mainBg);
    color: var(--fontColor)
 
  }

  .navbar-default{
    background: var(--mainBg);
  }
  .light-theme {
    --themeDropDownBg: var(--goldCrayola);
    --themeIconBorderColor: var(--sage);
    --navBg: var(--sage);
    --navLinkHoverBg: var(--paleSpringBud);
    --mainBg: var(--goldCrayola);
    --fontColor: var(--black);
    --themeSwitchColor: var(--sage);
  }

  .dark-theme {
    --themeDropDownBg: var(--black);
    --themeIconBorderColor: var(--richBlackForeground);
    --navBg: var(--richBlackForeground);
    --navLinkHoverBg: var(--gray);
    --mainBg: var(--black);
    --fontColor: var(--white);
    --themeSwitchColor: var(--black);
  }