@font-face {
    font-family: ubuntu;
    src: url('fonts/ubuntu-font-family/Ubuntu-R.ttf');
}


* { box-sizing: border-box; }

body {
    font-family: ubuntu;
    font-size: 8pt;
}
A {
    font-family: sans;
}

/* ---- grid ---- */

.grid {
  background-color: white;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 100px;
  height: 100px;
  float: left;
  background: skyblue;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0px 2px 0px #00823F;
  transition: all ease 0.3s;

  font-family: ubuntu;
  font-size: 11px;
  margin: 2px;
}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

#playing_now {
  position: fixed;
  top: 200px;
  right: 0;
  width: 200px;
  background: rgba(0,0,0,1);
  color: white;
  padding: 0px;
  font-family: courier;
  z-index: 10;
}

.centerit {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wplayer {
    background-color: wheat;
    height: 80px;
}