* {
  box-sizing: border-box;
}

body {
  cursor: url('../icn/cursor.png') 0 0, default;
  background: #ffe0bf;
  background: url('../icn/bg.png');
}

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

#debug {
  background: yellow;
  position: fixed;
  top:30px;
  left:30px;
  z-index: 10;
}

a {
  color:#0040ff;
  cursor: url('../icn/eye.png') 11 8, default;
}

a:hover {
  color:#ffbf80;
}


/**************************************
*** PLAYER CONTROLS *******************
**************************************/

#controls {
  padding: 0;
  margin: 6px 0;
  transition:opacity 0.5s;
  opacity: 0;
  display: flex;
  justify-content: space-between;
}

#controls button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 12px;
  padding: 0;
  border-radius:2px;
  background: #ffe0bf;
  color:#0040ff;
  border: none;
  height: 24px;
  width:170px;
  font-size:16px;
  vertical-align: center;
}

#controls button img{
  margin: 3px;
}
#controls button span {
  display: block;
  padding: 0;
}

#controls button:hover{
  background: #ffbf80;
}

body.ready #controls{
  opacity: 1;
}

body.ready #prev{
  cursor: url('../icn/left.png') 3 6, pointer;
}

body.ready #next{
  cursor: url('../icn/right.png') 20 6, pointer;
}

body.ready #home{
  cursor: url('../icn/home.png') 20 6, pointer;
}

/**************************************
*** PLAYER ****************************
**************************************/

#player{
  transition:background 0.5s;
  background: #000;
  position: fixed;
  padding: 12px;
  width: 100%;
  height: 100%;
  top: 0;
  border: solid;
  border-image-source: url('../icn/playerbottom.png');
  border-image-slice: 8;
  border-image-width: 8px;
  border-image-outset: 8px;
  border-image-repeat: round;
}

body.ready #player{
  background: #0040ff;
}


#videocontainer {

  width: 100%;
  height: calc(100% - 24px);
  font-size: 0;
  text-align: center;
}

#videocontainer:before {
  content: "";
  width: 1px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: -1px;
}

video {
  border-radius:4px;

  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;

}

body.ready video{
  cursor: url('../icn/right.png'), pointer;
}


/**************************************
*** HOME *****************************
**************************************/

table {
  border-collapse: collapse;

}

td {
  background: #ffe0bf;
  color: #0040ff;

  padding: 2px 5px ;
  border: 2px solid ;
}

header table {
  width:100%;
  text-align: justify;
  text-align-last: center;
}

#books {
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#books table {
  width:300px;
  margin:20px;
  box-shadow: 10px 10px #0040ff;
}

#books table tr:first-child td{
  padding: 0 ;
  line-height: 0;
  background:  #0040ff;
}

#books table td:first-child {
  background: #ffbf80;
}

#books table .title {
  font-style: italic;
}

#books table .cover {
  width:300px;
  height:300px;
  margin: 0;
  padding: 0;
}

#books table .cover:active {
  filter: none;
    filter: sepia(100%) saturate(500%) brightness(50%) hue-rotate(165deg);

}

/**************************************
*** SMALL SCREEN **********************
**************************************/

@media screen and (max-width: 350px) {

  #books table .cover {
    width:200px;
    height:200px;
  }
  
  #books table {
    width:200px;
  }
}


@media screen and (max-width: 550px) {

  #controls button span {
    display: none;
  }
  #controls button {
    width:30px;
  }
}