.container{
  display: inline-block;
  padding: 0 20px;
}

.player{
  width: 100%;
  min-height: 300px;
  position: relative;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3);
  margin: 5px 0;
}

#player01,
#player02,
#player03,
#player04,
#player05,
#player06,
#player07{
  display: block;
}

#player01{
  width: 400px;
  height: 400px;
}

#player02{
  width: 300px;
  height: 300px;
}

#player03{
  width: 160px;
  height: 160px;
}

#player04{
  width: 200px;
  height: 300px;
}

#player05{
  width: 250px;
  height: 400px;
}

#player06{
  width: 400px;
  height: 300px;
}

#player07{
  width: 400px;
  height: 200px;
}

#player08{
  width: 300px;
  height: 110px;
}

#player09{
  width: 200px;
  height: 110px;
}


pre{
  /*border: 1px solid rgba(100, 100, 100, 0.3);*/
/*  padding: 10px;
  color:rgb(0,0,0);
  font-size: 12px;

  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.3) inset;*/
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0, 0.7) !important;
}

body{
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAY1BMVEXJycnOzs7Ly8vMzMzQ0NDIyMj6+vr7+/v5+fne3t7q6urr6+vn5+fp6eno6Ojc3Nz29vb39/fz8/Pw8PDx8fH4+Pj09PT19fXy8vL+/v79/f38/PzY2NjNzc3Pz8/h4eHm5ubGXXGCAAAA+klEQVR42h2Q2XbDMAhESZyqRLJUEGjplvT/v7JDEMcP18AwEF0u1+Nyu13f0junhA8nuudynjW3+sEirOCa6Ozm1s28pjFEp+IH5e5uDnomFV2qU5SK27bd3XKSwaKCpGpBAVtSEB4iiZoF8ahcKng8hUoQYMycskJpKWWLUvDMKlNlDQi1jnDfvSSwxahmSp9fiG/kz+9xHI/HcRBxeFOGjyeclVJzvRN2GyHAA976KwuFCV6xDSCcgRaSOVcoMjcsFtAqjTl5aETDDhbXaYRxgnaR1fp+efM/Qrdg7Fireo+HmWhXQAFue5tvqJ8kEscZcFNxwr2B8z90ghmQSSJviQAAAABJRU5ErkJggg==");
}

h1{
  font-size: 32px;
  text-shadow: 1px 1px 1px rgba(255,255,255,1);
  padding-top: 60px;
  text-align: center;
  text-shadow: -2px -2px 1px rgba(0,0,0,0.1), 1px 1px 0px rgba(255,255,255,1);
  color: rgba(50,50,50,1);
}

h3{
  font-size: 16px;
  text-shadow: 1px 1px 1px rgba(255,255,255,1);
  font-weight: normal;
  padding: 20px;
  background: rgba(255,255,255, 0.8);
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.3);
}