html {
  margin: 0;
  height: fill-available;
  height: -webkit-fill-available;
}
body {
  perspective: 120vw;
  min-height: 100vh;
  min-height: fill-available;
  min-height: -webkit-fill-available;
  width: 100%;
  position: fixed;
  /*transform: translateZ(-500px);*/
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
background-color: #efe9ae;
color: #343434;
font-family: 'apercubold', sans-serif;
}

#depth1, #depth2, #depth3, #depth4, #depth1shadow, #depth2shadow, #depth3shadow, #depth4shadow {
  position: absolute;
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
  transform-origin: center;
display: flex;
  align-items: center;
  justify-content: center;
flex-direction: column;
width: 150vw;
height: 150vh;

}


#depth1shadow {z-index:1;transform: translateZ(-320px);}
#depth1 {z-index:2;transform: translateZ(-300px);}
#depth2shadow {z-index:3;transform: translateZ(-220px);}
#depth2 {z-index:4;transform: translateZ(-200px);}
#depth3shadow {z-index:5;transform: translateZ(-120px);}
#depth3 {z-index:6;transform: translateZ(-100px);}
#depth4shadow {z-index: 7;}

#depth1shadow, #depth2shadow, #depth3shadow, #depth4shadow {
  margin-left: 20px;
  margin-top: 20px;
  filter:blur(2.5px);
}

#depth4 {
  z-index: 10;
  height: 50vh;
/*width: 50vw; height: 50vh;*/
position: relative;
}
#depth4shadow {
  width: 50vw; height: 50vh;
}


#social {
  padding: 46px 46px;
  border-radius: 40px;
  z-index: 12;
  position: absolute;
  transform: translateZ(100px);
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 5px;
  
}
#socialShadow {
  z-index: 11;
  display: inline-block;
  position: absolute;
  transform: translateZ(80px);
}


#links {
  border: 1.5px solid;
  border-color: black;
  padding: 6rem 5rem;
  position: relative;
  text-align: left;
  font-size: 1.25rem;
}
#links a {
  padding: 6px 10px;
  text-decoration: none;
  color: #343434;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 0);
  transition: all .2s;
}
#links a:hover {
  box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 1);
}
#links a:active {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
  margin: 3px -3px 0 3px;
}

.clink {
  width: 30px;
  padding: 0 12px;
  position: relative;
  margin-bottom: -10px;
}


.tapes {
  position: absolute;
  top: -5rem;
  left: 2rem;
}
.club {
  position: absolute;
  bottom: -5rem;
  right: 2rem;
}
.tapes, .club {
  padding: 0 1rem;
  font-size: 2rem;
}



#reload-button {
  z-index: 50;
  font-size: 1.5rem;
  font-family: 'apercubold', sans-serif;
  position: absolute;
  width: 15rem;
  left: 50%;
  bottom: 30px;
  margin-left: -7.5rem;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 25px;
  border: 2px solid white;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px;
}

button:hover {
  border: 2px solid #ffffff;
  color: white;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .tapes, .club {
    font-size: 5.5rem;
  }
  .tapes {
    top: -8.2rem;
  }
  .club {
    bottom: -8.2rem;
  }
  #links {
    font-size: 3rem;
    padding: 10rem 8rem;
  }
  #reload-button {
    font-size: 3rem;
    margin-left: -15rem;
    width: 30rem;
    border-radius: 50px;
    bottom: 45px;
  }
  .clink {
    width: 50px;
  }
  #social {
    padding: 80px 80px;
  }
}

/* Small devices (portrait tablets and large phones, 600px-768px) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .tapes, .club {
    font-size: 5rem;
  }
  .tapes {
    top: -7.5rem;
  }
  .club {
    bottom: -7.5rem;
  }
  #links {
    font-size: 3.125rem;
    padding: 10rem 8rem;
  }
  #reload-button {
    font-size: 3rem;
    margin-left: -15rem;
    width: 30rem;
    border-radius: 50px;
    bottom: 40px;
  }
  .clink {
    width: 45px;
  }
  #social {
    padding: 75px 75px;
  }
}

/* Medium devices (landscape tablets, 768px - 992px) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .tapes, .club {
    font-size: 4rem;
  }
  .tapes {
    top: -6.5rem;
  }
  .club {
    bottom: -6.5rem;
  }
  #links {
    font-size: 2.5rem;
    padding: 8rem 6rem;
  }
  #reload-button {
    font-size: 3rem;
    margin-left: -15rem;
    width: 30rem;
    border-radius: 50px;
  }
  .clink {
    width: 50px;
  }
  #social {
    padding: 60px 60px;
  }
}

/* Large devices (laptops, 992px - 1200px) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .tapes, .club {
    font-size: 3rem;
  }
  .tapes {
    top: -5rem;
  }
  .club {
    bottom: -5rem;
  }
  #links {
    font-size: 1.875rem;
    padding: 7rem 5.5rem;
  }
  .clink {
    width: 40px;
  }
  #social {
    padding: 50px 50px;
  }
}

/* Extra large devices (Desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {
  .tapes, .club {
    font-size: 2rem;
  }
  .tapes {
    top: -3.5rem;
    left: 1.5rem;
  }
  .club {
    bottom: -3.2rem;
    right: 1.5rem;
  }
  #links {
    font-size: 1.25rem;
    padding: 6rem 5rem;
  }
  #social {
    padding: 45px 45px;
  }
}