@media screen and (min-width:60em) {

  /*div.section{
    padding: .5em;
  }*/

  div.section ~ div.section{
    padding-top: 2em;
  }


  body{
    font-size: 17px;
  }


  .zoom a:hover:before{
    content: "";
    width: 2em;
    height: 2em;
    background: hsla(0, 0%, 50%, .7);
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url("icons/zoom.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }


  div.textbox{
    margin-left: 2em;
    top: -3.5em;
    position: relative;
    margin-bottom: -4.5em;
  }

  table.alben > tbody > tr > td:nth-of-type(1){
    width: 10%;
  }

  table.alben > tbody > tr > td:nth-of-type(2){
    width: 30%;
  }

  table.alben > tbody > tr > td:nth-of-type(3){
    width: 50%;
  }

  table.alben > tbody > tr > td:nth-of-type(4){
    width: 10%;
  }

  table.tracks > tbody > tr > td:nth-of-type(1){
    width: 40%;
  }

  table.tracks > tbody > tr > td:nth-of-type(2){
    width: 60%;
  }


}

@media screen and (min-width:80em) {
  body{
    font-size: 20px;
  }

  p{
    font-size: .9em;
  }
}