body {
  font-size: 1.2em; }

a {
  color: #fe452d; }

a:hover {
  color: #fe7260;
  text-decoration: none; }

.loading #pbar {
  display: block; }

.loading #playlist-container {
  display: none; }

#pbar {
  top: 20px;
  left: 0;
  right: 0;
  padding: 20px;
  color: #E9EEE8;
  display: none;
  position: absolute; }
  #pbar .progress {
    margin-top: 15px; }
  #pbar .progress-bar {
    background-color: #fe452d; }

.logo {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #E9EEE8;
  border-bottom-right-radius: 5px; }
  .logo img {
    padding: 10px;
    height: 70px; }

#hero {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #25333C;
  cursor: pointer; }

main {
  margin-top: calc(100vh - 120px);
  background-color: rgba(0, 0, 0, 0.5);
  color: #E9EEE8;
  position: relative; }
  main > div {
    min-height: 20vh;
    padding: 30px 0px; }
  main > div:nth-child(even) {
    color: #25333C;
    background-color: #E9EEE8; }

.logo {
  float: left; }

#playlist-container {
  transition: 2s linear all; }

#playlist {
  width: 100%; }
  #playlist a {
    position: relative;
    display: block;
    padding: 10px 15px; }
    #playlist a:hover, #playlist a.active {
      text-decoration: none;
      color: #fe452d;
      background-color: #E9EEE8; }
    #playlist a.active {
      cursor: default; }
  #playlist:after {
    clear: both; }