/* global */
html {
  height: 100%;
  margin: 0;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  background-color: #404048;
  color: #000000;
  text-decoration: none;
  padding: 0;
  margin: 0;
  height: 100%;
}

#cellar {
  height: 100%;
  background-image: url("brickwall_compressed.jpg");
  background-size: 80%;
}

#shelf {
  height: 100%;
  width: 72%;
  float: left;
}

#info {
  height: 100%;
  width: 28%;
  float: right;
  background-color: #313136;
  opacity: 0;
}

#shelf .box {
  float: left;
  background-image: url("wood_compressed.png");
  background-size: cover;
}

#shelf .box .box-border {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image: url("highlight.png");
  background-size: cover;
  /*background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);*/
}

#shelf .box .box-border:hover {
  opacity: 1;
}

footer {
  background-color: #808080;
  padding: 10px;
  padding-bottom: 1px;
}

/* Media-Queries */
@media(max-width: 768px) {

  #shelf {
    height: 80%;
    width: 100%;
  }

  #info {
    height: 20%;
    width: 100%;
  }
}