a{
  text-decoration:none;
}
body{
  padding:8px;
  margin:0px;
  background-color: #010101;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #CCC;
  font-size: large;
}
.footer{
  padding: 0 3em 1em 0;
  position:absolute;
  bottom:0px;
  right:0px;
}
.logo{
  width:66%;
}
.steamlink{
  float:right;
  color: #CCC;
}
@media all and (min-width: 0px) and (max-width: 1000px) {
  .logo{
    width:70%;
  }
  .product{
    width:70%;
  }
  .teaser{
    width:95%;
  }
}
@media all and (min-width: 1001px) {
  .logo{
    width:66%;
  }
  .product{
    width:6em;
    margin:1em;
  }
  .teaser{
    width: 950px;
  }
}
.product{
  border-radius: 2em;
  border:1px solid rgba(180,180,180,1);
  
  padding:15px;
  background:
  linear-gradient(0deg,
    rgba(0,0,0,1) 0%,
    rgba(100,100,100,1) 5%,
    rgba(10,10,10,1) 10%,
    rgba(100,100,100,1) 90%,
    rgba(10,10,10,1) 100%
  );
}
.product:hover{
  background: linear-gradient(0.1deg,
    rgba(0,0,0,1) 0%,
    rgba(100,100,100,1) 5%,
    rgba(10,10,10,1) 10%,
    rgba(120,120,120,1) 90%,
    rgba(10,10,10,1) 100%
  );
}
.backlink{
  width:20em;
}