<div class="container">
  <div class="theme-switch">
    <div class="switch"></div>
  </div>
  <div class="navigation">
    <ul>
      <a href="http://www.sashatran.com/" class="active" target="_blank">Home</a>
      <a href="https://codepen.io/sashatran/" target="_blank">About</a>
      <a href="https://instagram.com/sasha.codes/" target="_blank">Instagram</a>
      <a href="https://twitter.com/sa_sha26" target="_blank">Twitter</a>
    </ul>
  </div>
</div>

:root {
  --background: #333;
  --text: #FFF;
  --highlight: #39AC4C;
}

@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  transition: 0.5s background ease;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.theme-switch {
  --background: #FFF;
  --text: #333;
  color: var(--text);
  width: 70px;
  height: 30px;
  background: var(--highlight);
  border-radius: 50px;
  position: relative;

  .switch {
    background: white;
    width: 24px;
    height: 24px;
    background: var(--background);
    border-radius: 100%;
    position: absolute;
    top: 3px;
    left: 4px;
    transition: 0.5s all ease;
  }
}

.light-theme {
  --background: #FFF;
  --text: #000;
  background: var(--background);

  .theme-switch {
    background: var(--text);

    .switch {
      transform: translateX(37px);
    }
  }
  a {
    color: var(--text); 
  }
}

.navigation {
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  list-style-type: none;
  a {
    margin: 10px 30px;
    position: relative;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;

    &:before {
      position: absolute;
      bottom: -2px;
      content: '';
      width: 100%;
      height: 3px;
      background: var(--highlight);
      transform: translateX(-100%);
      opacity: 0;
    }

    &:hover {
      &:before {
        opacity: 1;
        transition: 0.5s transform ease, 0.8s opacity ease;
        transform: translateX(0);
      }
    }
  }

  .active {
    color: var(--highlight);

    &:hover {
      &:before {
        opacity: 0;
      }
    }
  }
}

$(".theme-switch").on("click", () => {
  $("body").toggleClass("light-theme");
});