@import url("https://fonts.googleapis.com/css?family=Muli");
@import url('https://fonts.googleapis.com/css2?family=Quintessential&family=Sawarabi+Mincho&display=swap');
div {
  border: dotted 0px red; }

body {
  color: #fff;
  background: #030405 url(../../background-hughcornwell-desktop-left.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Muli', serif;
  font-size: 1em;
  line-height: 125%;
  font-weight: 900;
  text-transform: uppercase; }
  body a, body a:visited {
    color: #cc1417;
    text-decoration: none; }
    body a:hover, body a:visited:hover {
      color: #fff; }
  body header .mobile {
    display: none; }
  body header nav.social {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-size: 150%;
    text-align: center; }
    body header nav.social a {
      display: inline-block;
      padding: 20px;
      color: #fff; }
      body header nav.social a:hover {
        color: #cc1417; }
  body section.album-info {
    width: 40%;
    position: fixed;
    top: 50%;
    left: 55%;
    transform: translate(-30%, -50%); }
    body section.album-info .logo {
      width: 90%;
      margin-bottom: 30px; }
    body section.album-info h2 {
      font-size: 125%;
      line-hight: 100%;
      color: #bedec8;
      font-weight: 400;
      padding: 5px 0px;
      margin: 0px;
      font-family: 'Sawarabi Mincho', serif;
      text-align: center;
   }
    body section.album-info h3 {
      font-size: 125%;
      line-hight: 100%;
      font-weight: 900;
      color: #fff;
      padding: 5px 0px;
      margin: 0px; }
    body section.album-info .retail {
      margin-top: 30px;
      display: flex;
      justify-content: space-between; }
      body section.album-info .retail .buy {
        width: 50%;
        display: flex;
        align-items: center; }
        body section.album-info  .buy a {
          width: 400px;
          text-align: center;
          text-size: 250%;
          padding: 5px;
          display: block;
          background-color: #bedec8;
          color: black; 
          cursor: pointer;
          margin: 0 auto;
          font-family: 'Sawarabi Mincho', serif;
        }
          body section.album-info .buy a:hover {
            background-color: black;
            color: #bedec8; }
      body section.album-info .retail .packshot {
        width: 45%;
        text-align: right; }
        body section.album-info .retail .packshot img {
          border: solid 10px #fff;
          width: 90%; }
  body section.enter {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 150%;
    text-align: right; }
    body section.enter a {
      display: inline-block;
      margin: 20px;
      padding-bottom: 5px;
      color: #cc1417;
      border-bottom: solid 5px #cc1417; }
      body section.enter a:hover {
        color: #fff; }
.packshot{
  text-align: center;
  margin: 0px 0 5px;
}
.packshot img{
  width: 300px;
}
body section.album-info {
    text-align: center;
  }
body section.album-info .logo{
   margin: 0 auto
}
@media (max-height: 730px) and (min-width: 1000px) {
  body section.album-info {
    text-align: center;
  }
  body section.album-info .logo{
    width: 50%;
    margin: 0 auto
  }
  .packshot img{
    width: 250px;
  }
}
@media (max-height: 600px) and (max-width: 1024px) {

  body {
    font-size: 0.8em; }
    body section.album-info {
      width: 50%;
      top: 50%;
      left: 20%;
      transform: translate(-20%, -50%); }
      body section.album-info .logo {
        width: 75%;
        margin-bottom: 10px; }
      body section.album-info .retail {
        margin-top: 10px;
        width: 80%; }
        body section.album-info .retail .buy {
          width: 60%; }
        body section.album-info .retail .packshot {
          width: 35%; } }
@media (max-height: 530px) and (min-width: 1000px) {
  .packshot{
  margin: 5px 0;
}
  .packshot img{
    width: 200px;
  }
}
@media (max-width: 1000px) {

  body section.album-info .buy a{
    width: 100%;
    margin-bottom: 5px;
  }
  body {
    background: #030405 url(none); }
    body header .mobile {
      display: block;
      width: 100%; }
    body header nav.social {
      position: relative;
      bottom: auto;
      left: auto;
      font-size: 100%;
      text-align: center; }
      body header nav.social a {
        padding: 20px 10px; }
    body section.album-info {
      text-align: center;
      margin: 0px auto;
      width: 80%;
      position: relative;
      top: auto;
      left: auto;
      transform: none; }
      body section.album-info .logo {
        display: none; }
      body section.album-info .buy {
        display: block;
        align-items: center;
        margin-top: 0%; }
        body section.album-info .retail .buy a {
          width: 100%; }
    body section.enter {
      position: relative;
      bottom: auto;
      right: auto;
      margin: 20px auto;
      text-align: center; } }
@media (max-width: 414px) {
  body {
    background: #030405 url(none); }
    body header .mobile {
      display: block;
      width: 100%;
      margin-bottom: 20px; }
    body section.album-info {
      margin: 0px auto;
      width: 80%; }
      body section.album-info .logo {
        display: none; }
      body section.album-info .retail {
        margin-top: 30px;
        display: block;
        width: 100%; }
        body section.album-info .retail .buy {
          width: 100%; }
        body section.album-info .retail .packshot {
          margin-top: 30px;
          width: 100%;
          text-align: center; } }
@media (max-width: 1090px) and (min-width:  630px) and (max-height: 680px){
  .packshot img {
    width: 200px;
  }
  body header nav.social, body section.enter{
        bottom: 10px;
  }
}