body{
  background-color: #eee;
  font-family: 'Roboto Condensed', Georgia, "Lucida Grande", Tahoma;
}

#main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-size:100% 100%;
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  z-index: -1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 10em 0;
}

.container{
  opacity: 1 !important; 
  background-color: #eee;
  z-index: 1;
  position: relative;
  padding: 1em;
}

#navbar{
  border-bottom: 2px solid #666; 
}

#logo{
  font-family: 'Libre Barcode 39 Text', cursive;
  font-size: 3em;
  margin-right: 1em;
  padding-left: 15px;
}

.navbar-nav{
  padding-top: 1em;
}

.navbar-nav li a, .navbar-nav li a:visited{
  padding: 0 1em;
  color: #333333;
}

h1, h2, a, strong{
  color: #de5810;
}

p, .borderLeft {
  border-left: #ff6f00 1px solid;
  padding-left: 1em;
}

#stimulus{
  width: 50%;
  height: 2em;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 1s;
  -moz-animation-duration: 2s;
  -moz-animation-delay: 1s;
}

#result{
  margin-bottom: 2em;
  color: #ff6f00;
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 1s;
  -moz-animation-duration: 3s;
  -moz-animation-delay: 1s;
}

#responseText{
  font-size: 2em;
}

@media screen and (max-width : 450px){
  #logo{
    font-size: 2em;
  }

  input, label, #stimulus{
    display: block;
    width: 90%;
  }
}

@media screen and (max-width : 320px){
  #logo{
    font-size: 1.5em;
  }
}