* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url();
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#m500 {
  background-image: url(mobile.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  top: 50%;
  left: 80%;
  margin-left: -10.5em;
  margin-top: -21em;
  width: 21em;
  height: 42em;
  position: absolute;
}

#screen {
  height: 33em;
  margin: 0 2em;
  overflow-y: auto;
  position: absolute;
  top: 9em;
  font-size: 0.875em;
  width: 20em;
}

ul {
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
}

li {
  list-style: none;
  margin-top: .5em;
  padding: .5em;
  border-radius: .25em;
  width: 18.5em;
}
li:nth-child(even) {
  margin-left: 1.5em;
  background-color: #74b4d9;
}
li:nth-child(odd) {
  margin-right: 1.5em;
  background-color: #c4dfef;
}
li span {
  display: block;
}
li span:first-child {
  font-weight: 800;
  font-size: .85em;
  color: #3185b6;
}

.hide {
  display: none;
}