body {
  background: #042 url('background.png') 50% 0%;
  color: #6cf;
  margin: 1em 0 0 0;
}

*{
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.5em;
  display: block;
  float: left;
  width: calc(100% - .2em);
  background: rgba(30,30,30,0.95);
  margin: .2em .1em;
  border-radius: .2em;
  color: rgb(255,255,255);
  text-indent: .5em;
  padding: .5em 0;
  line-height: 2em;
}

div.links {
  display: block;
  float: left;
  width: calc(100% - .2em);
  background: rgba(0,0,0,0.2);
  margin: .2em .1em;
  padding: .2em 0 0 0;
  border-radius: .3em;
}

div.links div.linkItem {
  font-size: 1.4em;
  display: block;
  float: left;
  width: calc(100% - .2em);
  background: rgba(60,60,60,0.9);
  margin: 0 .1em .2em .1em;
  border-radius: .3em;
    height: 2.2em;
}

div.links div.linkItem p {
  display: block;
  float: left;
  height: 2em;
  width: calc(100% - 3.1em);
  color: rgb(255,255,255);
  margin: .4em;
  text-decoration: none;
  white-space:nowrap;
  overflow: hidden;

}

div.links div.linkItem div.image{
    display: block;
    float: right;
    width: 1.8em;
    height: 1.8em;
    background-size: 100% 100%;
    margin: 0.2em;
    border-radius: .3em;
}

@media screen and (min-width: 480px) {
  div.links div.linkItem {
    width: calc(50% - .2em);
  }
}

@media screen and (min-width: 640px) {
  div.links div.linkItem {
    width: calc(33.3% - .2em);
  }
}

@media screen and (min-width: 900px) {
  div.links div.linkItem {
    width: calc(25% - .2em);
  }

@media screen and (min-width: 1200px) {
  div.links div.linkItem {
    width: calc(20% - .2em);
  }
}