@import url("https://use.typekit.net/hiq2cbd.css");
@font-face { font-family: GT America; src: url('../fonts/GT-America-Standard-Light.otf'); }
html,body {
  margin: 0;
  border: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  /*background-color: #000000;*/
  background-color: white;
}

a, p , div{
  font-family: GT America,'Arimo', sans-serif;
}
a:hover{
  text-decoration: none;
  /*font-weight: 400;*/
  color: black;
}
.clockdiv {
  margin: auto;
  width: 50%;
  position: relative;
  /*position: absolute;*/
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  font-size: 0;
}
.clock {
  /*position: relative;*/
  width: 20%;
  height: auto;
  white-space: nowrap;
}
.albumdiv {
  margin: auto;
  width: 96%;
  position: relative;
  /*position: absolute;*/
  top: 44%;
  left: 49.5%;
  transform: translate(-50%, -50%);
  font-size: 0;
}
.album {
  /*position: relative;*/
  width: 11%;
  margin-left: 1%;
  height: auto;
  white-space: nowrap;
}
#albumfs1{
  position: absolute;
  width: 2%;
  margin-left: 81%;
  margin-top: 1%;
  height: auto;
  white-space: nowrap;
}
#albumfs2{
  position: absolute;
  width: 2%;
  margin-left: 93%;
  margin-top: 1%;
  height: auto;
  white-space: nowrap;
}
.songtitle a{
  font-family: GT America,'Arimo', sans-serif;
  font-size: 20px;
  color: black;
  opacity: 0.8;
}
.songs {
  width: 30%;
  position: absolute;
  text-align: center;
  left: 33.5%;
  /*margin-top: 25%;*/
  visibility: hidden;
  bottom: -55px;
}
.scdiv{
  font-size: 0;
}
.infodiv p{
  position: absolute;
  width: 550px;
  left: 100px;top: 100px;
  padding-bottom: 100px;
}
.coverininfo{
  display: block;
  width: 300px;
}
#cover, #lp{
  position: absolute;
  width: 30%;
  top: 50%;
  margin-left: 35%;
  transform: translate(0, -50%);
  transition: 1s;
}
#opening {
  z-index: 999;
  background-color: white;
  position: absolute;
  align-self: center;
  top: -50px;
  left: -1px;
  bottom: -5px;
  right: -1px;
  transition: 0.6s opacity;
  color: black;
  font-size: 24px;
  max-font-size: 4vw;
}
#playbutton {
  z-index: 99;
  opacity: 0;
  background-image: linear-gradient(rgba(245, 245, 245, 0),white);
  /*margin: auto;*/
  /*width: 100%;*/
  /*height: 100%;*/
  position: absolute;
  align-self: center;
  top: -1px;
  left: -1px;
  bottom: -5px;
  right: -1px;
  transition: 0.3s;
  color: black;
  font-size: 50px;
}
#pausebutton {
  z-index: 99;
  opacity: 0;
  background-image: linear-gradient(rgba(245, 245, 245, 0),blue);
  /*margin: auto;*/
  /*width: 100%;*/
  /*height: 100%;*/
  position: absolute;
  align-self: center;
  top: -1px;
  left: -1px;
  bottom: -5px;
  right: -1px;
  transition: 0.3s;
  display: none;
  color: white;
  font-size: 50px;
}
#nomobile {
  z-index: 999;
  opacity: 0;
  /*background-image: url("nomobile.gif");*/
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  align-self: center;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  transition: 0.3s;
  display: none;
  color: black;
  font-size: 20px;
  line-height: 27px;
}

#nomobile p, #playbutton p ,#pausebutton p, #opening p{
  margin: auto;
  width: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  text-align: left;
  font-family: GT America,'Arimo', sans-serif;
}
#nomobile p{
  width: 75%;font-size: 16px;line-height: 24px;
}
#xoesanname{
  font-weight: 400;
}
@media (max-width: 1600px) {#opening p{width: 80%;}}
@media (max-width: 1000px) {
  #opening p{width: 70%;}
  .infodiv p{
    font-size: 16px;line-height: 24px;
    width: 70vw;
    left: 50px;
  }
  .coverininfo{
    display: block;
    width: 300px;
  }
}
#playbutton:hover, #pausebutton:hover{
  opacity: 1;
  transition: 1s;
}
@media (min-width: 1000px) {

  .clockdiv {
    margin: auto;
    width: 30%;
    position: relative;
    /*position: absolute;*/
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    font-size: 0;
  }
}

@media (max-width: 400px) and (max-aspect-ratio: 1/1){
  #opening p{
    font-size: 24px;
    width: 100%;
  }
  #xoesanname{
    font-size: 25px;
  }
  .infodiv p{
    width: 90vw;
    left: 5vw;
    top: 50vw;
    padding-bottom: 20vw;
  }
  .coverininfo{
    width: 80vw;
  }
  #navi{
    display: block;
  }
}

.logo-header{
  width: 40px;
  height: 40px;
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 999;
  mix-blend-mode: multiply;
}
.logo-header1{
  width: 42px;
  height: 42px;
  position: fixed;
  right: 21px;
  top: 20px;
  z-index: 999;
  mix-blend-mode: multiply;
}
#thecircle {
  position: fixed;
  left: 23px;
  top: 23px;
  /* z-index: 999; */
  height: 40px;
  width: 40px;
  background-image: linear-gradient(rgba(245, 245, 245, 0),#D48B77);
  /* background-image: linear-gradient(#F1967D,rgba(245, 245, 245, 0)); */
  /* background-color: grey; */
  opacity: 1;
  border-radius: 50%;
  /* border-style: solid; */
  border-color: black;
  border-width:1px;
  display: inline-block;
  mix-blend-mode: multiply;
  z-index: 998;
  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
  transition-timing-function: ease-out;
}
.navi-logo-section:hover #thecircle{
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  left: 20.25px;
  top: 20.25px;
  height: 39px;
  width: 39px;
}
#navi-title-section {opacity: 0;display: none;transition: 0.8s opacity;
  padding-bottom: 30vh;}
#navi-xoesan-section {transition: 0.5s opacity;}
#navi-title-section a{
  padding-bottom: 30vh;
  position: absolute;
  transition: 0.3s;
  right: 25px;
  top: 20px;
  font-family: GT America,'Arimo', sans-serif;
  font-size: 16px;
  color: black;
  opacity: 0.7;
  margin-bottom: 200px;
}
#navi-title-section a:hover{
  opacity: 1;
}
#navi{
  /*pointer-events: none;*/
  display: none;
  position: absolute;
  /*-webkit-transition-delay: 0.3s;*/
  /*transition-delay: 0.3s;*/
  transition: 0.3s opacity;
  right: 25px;
  top: 50px;
  color: black;
  opacity: 0.7;
  line-height: 0;
}
#navi a{
  text-decoration: none;
  font-family: GT America,'Arimo', sans-serif;
  font-size: 16px;line-height: 24px;
}
.naviright{
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}
@media (max-width: 450px) {
  #nomobile {
    width: 134%;
    left: -17%;
    top: -17%;
    bottom: -17%;
  }
  #opening p{
    font-size: 24px;
    width: 100%;
  }
  #opening {
    top: 0;
  }
  #xoesanname{
    font-size: 24px;
  }
  #cover, #lp{
    width: 50%;
    margin-left: 25%;
  }
  .albumdiv {
    margin: auto;
    width: 70%;
    position: relative;
    /*position: absolute;*/
    top: 50%;
    left: 35%;
    transform: translate(-50%,-3.2%);
    font-size: 0;
  }
  .album {
    /*position: relative;*/
    width: 100%;
    margin-left: 0;
    margin-bottom: 100%;
    height: auto;
    white-space: nowrap;
  }
  #albumfs1, #albumfs2{
    opacity: 0;
  }
  .songtitle{
    position: absolute;
    margin-top: 87%;
    z-index: -999;
  }
  .songtitle a{
    font-size: 18px;
  }
  .songs {
    width: 95%;
    position: relative;
    display: block;
    text-align: center;
    left: 2.5%;
    margin-bottom: 195%;
  }
  #navi{

    top: 55px;
  }
  #song8{
    margin-bottom: 55%;
  }
}

@media (max-width: 375px) {
  .songs {
    margin-bottom: 190%;
  }
}
@media (max-width: 400px)  and  (min-aspect-ratio: 1/1){
  .infodiv p{
    width: 60vw;
    left: 10vw;
    top: 10vw;
    padding-bottom: 20vw;
    font-size: 2vw;
  }
  .coverininfo{
    width: 20vw;
  }
  #opening p ,#xoesanname  {
    font-size: 4vw;
  }
  #navi-title-section a{
    right: 3vw;
    top: 5vw;
    font-size: 2vw;
  }
  #navi a {
    font-size: 2vw;
    line-height: 2vw;
  }
  #navi {
    pointer-events: all;
    z-index: 99999;
    font-size: 2vw;
    line-height: 2vw;top: 9vw;
    right: 2vw;
  }
  #pausebutton, #playbutton {
    top: -1px;
    left: -1px;
    bottom: -5px;
    right: -1px;
    font-size: 5vw;
  }
  .album {
    width: 11vw;
    margin-left: 1vw;
    margin-bottom: 0;
  }
  .songtitle {
    position: fixed;
    margin-top: 87%;
    z-index: 0;
  }
  .songs {
    width: 30%;
    position: absolute;
    text-align: center;
    left: 33.5%;
    visibility: hidden;
    bottom: -55px;
  }
  .songtitle a {
    font-size: 3vw;
  }
  .clockdiv {
    width: 36%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .albumdiv {
    margin: auto;
    width: 96%;
    position: relative;
    top: 44%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    font-size: 0;
  }
  #albumfs1, #albumfs2{
    display: none;
  }
}