@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|Arimo|Playfair+Display+SC:900&subset=latin-ext');
.brand{
  font-family: "Playfair Display SC",serif;
  font-size: xx-large;
}
p {
  font-family: "Arimo",sans-serif;
}
body {
  margin-top:2em;
}
header{
  max-width: 70em;
}
.bottom {
    border-bottom: 1px solid #ccc;
}
a{
  color:black;
  font-family: "Arimo",sans-serif;
}
a:hover {
  text-decoration: none;
}
.playfair{
  font-family: "Playfair Display SC",serif;
}
.oswald,h3{
  font-family: "Oswald",sans-serif;
}
.blog-title{
  text-align: left;
}
.blog-items{
  max-width: 50em;
  justify-content:center;
}
.post-content{
  max-width: 35em;
  background-color: #f9f9f9;
  padding:1em;
  border-radius: 20px;
}
img{
  display: block;
  margin:0 auto;
  width: 50%;
}
.contact{
  margin-bottom: 5em;
}
.twt{
  margin:3em;
}
.post-date {
  color:lightgray;
  font-size: small;
}
.post-tags {
  color:gray;
  font-size: small;
}
.flex-container{
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  max-width: 80em;
  margin:2em auto;
  justify-content:center;
}
.feature {
  /*max-width: 35em;*/
  flex-basis:35em;
  display: flex;
  flex-flow: column wrap;
  align-self: flex-start;
  flex-grow: 0;
  background-color: #efefef;
  box-shadow:inset 2px 2px 10px -5px;
  justify-content:center;
  min-height:20em;
  color:black;
}
.feature:hover {
  box-shadow:inset 2px 2px 50px -15px ;
}
.double {
  flex-basis:70em;
}
.grower{
  flex-grow: 1;
}
.pullup {
  -ms-transform: translate(0, -4em); /* IE 9 */
  -webkit-transform: translate(0, -4em); /* Safari */
  transform: translate(0, -4em);
}
.flex-item{
  margin:1em;
  padding:15px;
  order: 1;
}
.feature-script{
  font-family: "Roboto Condensed",serif;
  font-size: large;
  text-align: justify;
  padding:1em;
  max-width: 25em;
}
.deathmatch {
  background: url("img/deathmatch.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  color: white;
  text-align: center;
}
.deathmatch:hover {
  cursor: pointer;
  box-shadow:inset 2px 2px 50px -15px white;
}
.writer{
  background: url("img/writer.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.calculator{
  background: url("img/calculator.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.markdown{
  background: url("img/markdown.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.badminton{
  background: url("img/badminton.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.exercise{
  background: url("img/exercise.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.habit{
  background: url("img/habit.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.pomodoro{
  background: url("img/pomodoro.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.simon{
  background: url("img/simon.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.ttt{
  background: url("img/ttt.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.chuck{
  background: url("img/chuck.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.wikia{
  background: url("img/wiki.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.gears{
  background: url("img/gears.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.phandelver{
  background: url("img/phandelver.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.twitch{
  background: url("img/twitch.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.weatherapp{
  background: url("img/weather.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.interactiveStory{
  background: url("img/fire.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.meteorVoid{
  background: url("img/meteorvoid.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}
.fcc{
  background: url("img/fcc.jpg") no-repeat center center fixed;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}