@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans+Condensed:300,700);

body {
  background-color: #FFECDB;
  font-family: 'Open Sans Condensed', sans-serif;
  transition: 1.1s;
  user-select: none;
}

.container {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  text-align: center; 
}

h1 {
  font-size: 36px;
  font-weight: 300;
  color: #8e44ad;
}

svg {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  cursor: pointer;

  #Sun {
    fill: #f1c40f;
    transition: .75s;
  }

  #Drops {
    fill: #2c3e50;
    transform-origin: 100% 50%;
    transition: .5s;
    position: relative;
  }

  #Moon {
    fill: #2c3e50;
    transition: 1s;
    transform-origin: 0% 50%;
  }
}

.l-active {
  background-color: #000;

  svg {
    #Drops {
      transform: translateX(10px) rotateY(180deg) translateZ(0);
      fill: #f1c40f;
    }

    #Moon {
      fill: #f1c40f;
      transform: rotateY(180deg);
    }

    #Sun {
      fill: #2c3e50;
    }
  }
}

.at-twitter {
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #000;
  z-index: 5000;
  font-size: 33px;
  
  &:visited {
    color: #f1c40f;
  }
}

a {
  color: inherit;
  &:hover,
  &:focus {
    color: inherit;
    text-decoration: underline;
  }
  text-decoration: none;
}