hour-of-code.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/* @font-face {
    font-family: "StencilStd";
    src:url('./fonts/StencilStd.eot') format('embedded-opentype'),
        url('./fonts/StencilStd.otf') format("opentype"); */


/* Set default values here */
body {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  line-height: 1.5em;
}

/* This styles the "title" of the page */
#header {
  text-align: center;
  margin-top: -25px;
}

/* These things used to style videos */
.video {
  margin-left: 10px;
  margin-right: 10px;
}

/* This styles all links */
a {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 40px;
  color: #FFFFFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
  font-weight: bold;
  text-decoration: none;
}

/* These styles the "h1" and "h2" tags. ex: <h1> TEXT </h1> */
h1 a {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 100px;
  -webkit-margin-after: 0;
  text-shadow: none;
  color: #000000;
  line-height: 1.15em;
}

h2 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 45px;
  line-height: 1.15em;
  font-weight: normal;
  -webkit-margin-after: 0;
}
h3 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 30px;
  font-weight: normal;
  -webkit-margin-after: 0;
}

/* This styles anything with class="category" */
.category {
  clear: both;
  margin-left: 15px;
}

/* This class styles only the image links with class="activity" */
.activity {
  margin: 10px;
  padding: 5px;
  width: 220px;
  height: 200px;
  float: left;
  line-height: 1.15em;
  background-size: auto 100% !important;
}

/* This class styles the "even more" links at the bottom */
.link {
  line-height: 100px;
  margin: 10px;
  padding: 10px;
  background-color: rgba(100, 100, 150, 0.5);
  border-radius: 15px;
}

#playtune {
  background: url('./img/playtune.png') no-repeat;
}

#dance-party {
  background: url('./img/dance-party.jpg') no-repeat center;
}

#mit-doodle {
  background: url('./img/mit-doodle.jpg') no-repeat center;
}

#wonder-woman {
  background: url('./img/wonder-woman.jpg') no-repeat right;
}

#trivia-bot {
  background: url('./img/trivia-bot.jpg') no-repeat;
}

#encryption {
  background: url('./img/encryption.png') no-repeat;
}

#light-bot {
  background: url('./img/light_bot.png') no-repeat;
}

#santa-tracker {
  background: url('./img/santatracker.png') no-repeat;
}

#gp-blocks {
  background: url('./img/gp-blocks.png') no-repeat;
}


#flappy-bike {
  background: url('./img/flappy-bike.png') no-repeat;
}

#iphone-game {
  background: url('./img/iphone-game.png') no-repeat;
}

#app-inventor {
  background: url('./img/app-inventor.png') no-repeat;
}

#javascript {
  background: url('./img/javascript.png') no-repeat;
}

#processing {
  background: url('./img/processing.png') no-repeat;
  background-size: 100% auto !important;
}

#animate-name {
  background: url('./img/animate-name.png') no-repeat;
}

#app-lab {
  background: url('./img/app-lab.png') no-repeat;
}

#khan {
  background: url('./img/khan.png') no-repeat;
}

#robot-java {
  background: url('./img/java-logo.jpg') no-repeat;
}

#js-app {
  background: url('./img/js-app.png') no-repeat;
}

#intro-python {
  background: url('./img/intro-python.png') no-repeat;
}

#robot-world {
  background: url('./img/robot-world.png') no-repeat;
}

#frogger {
  background: url('./img/frogger.png') no-repeat;
}

#image-manip {
  background: url('./img/image-manip.png') no-repeat;
}

#mobile-map {
  background: url('./img/mobile-map.jpg') no-repeat;
}

#art-life {
  background: url('./img/art-life.jpg') no-repeat;
}

#web-design {
  background: url('./img/web-design.jpg') no-repeat center;
}

#python {
  background: url('./img/python.jpg') no-repeat right;
}

#makeschool {
  background: url('./img/makeschool.png') no-repeat;
}

#google-rabbit {
  background: url('./img/google-rabbit.png') no-repeat;
}

#resource-machine {
  background: url('./img/resource-machine.png') no-repeat;
  background-size: 100% auto !important;
}


/* FLL Jr. Expo Stuff */

#minecraft {
  background: url('./img/minecraft.png') no-repeat;
}

#playlab {
  background: url('./img/playlab.png') no-repeat;
}

#code-monkey {
  background: url('./img/code-monkey.jpg') no-repeat;
}

#angry-birds {
  background: url('./img/angry-birds.png') no-repeat;
}

#pixel-hack {
  background: url('./img/pixel-hack.png') no-repeat;
}