style.scss

$timeline-height: 300px;
$timeline-width: 100%;
$title-color: #ffcc00;
$subhead-color: #ffffcc;
$date-width: 150px;

* {
   margin: 0;
   padding: 0;
}

body {
   font-family: 'Aldrich', serif;
   color: #fff;
   font-size: 14px;
   background: url('assets/images/stars.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}


#header {
   padding: 1em;
   min-height: 500px;
   margin-top: 2em;

   #title, #author {
      font-family: 'Orbitron', serif;
   }
   #author {
      color: white;
      //color: $subhead-color;
      font-size: 1.2em;
      letter-spacing: 1.5px;
   }

   &::after {
     content: "";
     background: url('assets/images/background.png') center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
     opacity: 0.7;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: fixed;
     z-index: -1;   
   }
}

a {
   color: $subhead-color;
   text-decoration: none;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   -ms-transition: 0.5s;
   transition: 0.5s;
   &:hover,
   &.selected {
      color: $title-color;
   }
}

h1 {
   font-size: 3em;
   color: $title-color;
   text-align: center;
}

h2,h4,h5,h6 {
   text-align: center;
   color: #ccc;
   text-shadow: #000 1px 1px 2px;
   margin-bottom: 5px;
}

h2 {
   font-size: 14px;
}

.sociales {
   text-align: center;
   margin-bottom: 20px;
}

#timeline {
   height: $timeline-height;
   overflow: hidden;
   margin: 1em auto;
   position: relative;
}
   #dates {
      width: $date-width;
      height: $timeline-height;
      overflow: hidden;
      float: left;
      margin-right: 2em;
      li {
         list-style: none;
         width: 100px;
         font-size: 24px;
      }
      a {
         line-height: 1.3em;
         font-size: 0.8em;
         padding-bottom: 10px;
      }
      .selected {
           font-size: 1em;
      }
   }
   
   #issues {
      height: $timeline-height;
      margin-left: 3em;
      margin-right: 2em;

      li {
         width: 100%;
         height: $timeline-height;
         list-style: none;

         img {
             height: $timeline-height * .5;
             width: 40%;
         }
         h1 {
            color: #ffcc00;
            font-size: 1.7em;
            text-align: center;
            font-family: 'Aldrich', serif;
         }
         p {
            font-size: 1.1em;
            line-height: 1.2em;
         }
      }
   }  

#prev {
   width: $date-width;
   position: absolute;
}

#next {
 position: absolute; 
}


main {
   background-color: rgba(255,255,255,0.6);
   margin: 0 5% 5% 5%;
   padding: 1.5em;
   color: black;
   img {
      //max-width: 600px;
      display: block;
      margin: auto;
      margin-bottom: 2em;
   }
}

#credits {
   text-align: center;
   width: 100%;
}