body, html {
  position: relative;
  margin: 0;
  padding: 2.5vw;
  background-color: #131313;
  color: whitesmoke;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 1px;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

h1, a{
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "ggAppleFont";
  src: url('../fonts/SF-Pro-Display-Regular.otf');
}

@font-face {
  font-family: "ggAppleFontBold";
  src: url('../fonts/SF-Pro-Display-Bold.otf');
}



.menuIcon{
  position: fixed;
  z-index: 5;
  width: 5vw;
  height: 5vw;
  margin-top: 0;
  margin-left: 77vw;


  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url(../svg/down-arrow-white.svg);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: 70% 70%;
  border: none;
}


.box{
  width: 100%;
}

.logo {
  background-image: url("../images/logo.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  height: 10vw;
  margin-bottom: calc(50vw * 0.25);
}



.commonplaceholder {
  position: relative;
  z-index: 0;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  border-radius: 2.8vw;
  transition: all 2s ease-in-out;
}

img {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 1s linear;
}
img.loaded {
  opacity: 1;
}


.bi1 {
  background-color: #141822;
  width: 40vw;
  height: 62vw;
  margin-left: 0;
  margin-right: auto;
}
.bi2 {
  background-color: #1B2937;
  width: 42vw;
  height: 46vw;
  margin-top: -50vw;
  margin-left: auto;
  margin-right: 3vw;
}
.bi3 {
  background-color: #242730;
  width: 39vw;
  height: 50vw;
  margin-top: 13vw;
  padding-left: 0;
}
.bi4{
  background-color: #151926;
  width: 40vw;
  height: 55vw;
  margin-top: -43vw;
  margin-left: auto;
  margin-right: 0;
}
.bi5{
  background-color: #141B29;
  margin-top: -7vw;
  margin-left: 0;
  margin-right: auto;
  width: 37vw;
  height: 42vw;
}
.bi6{
  background-color: #A5B6B9;
  margin-top: -29vw;
  margin-left: auto;
  margin-right: 3vw;
  width: 45vw;
  height: 54vw;
}

.bi1-small, .bi2-small, .bi3-small,
.bi4-small, .bi5-small, .bi6-small,
.bi7-small, .bi8-small, .bi9-small,
.bi10-small, .bi11-small, .bi12-small,
.bi11-small, .bi12-small, .bi13-small,
.bi14-small, .bi15-small {
  filter: blur(3px);
  transform: scale(1);
}

.logo, .sharingSongs, .signature {
  position: relative;
  z-index: 1;
}

.sharingSongs {
  margin-top: -152vw;
  transition: all 2s ease-in-out;

  background-color: transparent;
  background-image: url(../svg/webText.svg);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: 100%;

  width: 50vw;
  height: 50vw;
  margin-left: 19vw;

  margin-bottom: 125vw;
}




.cardTitles {
  font-family: ggAppleFontBold, arial, sans-serif;
  color: inherit;
  text-decoration: inherit;
  letter-spacing: -0.15vw;
  font-size: 4.2vw;
  overflow: hidden;
  line-height: 5vw;
  position: relative;
  z-index: 2;
}

 .cardBody {
  font-family: ggAppleFont, arial, sans-serif;
  letter-spacing: 0vw;

  font-size: 4vw;
  line-height: 5vw;
  overflow: hidden;
  position: relative;
  z-index: 2;

  display: inline-block;
  margin-top: 1vw;
}

.cardTop {
  height: 40vw;
}


.cardTop, 
.bi7, .bi8, .bi9, 
.bi10, .bi11, .bi12,
.bi13, .bi14, .bi15 {
  position: relative;
  z-index: 0;
  background-position: center top; 
  background-size: 100%, auto;
  overflow: hidden;

  background-color:#56525e;
  width: 100%;
  border-top-left-radius: 2.8vw;
  border-top-right-radius: 2.8vw;

  transition: all 1s ease-in-out;
}

.bi16 {

  position: relative;
  z-index: 0;
  background-position: center top; 
  background-size: 100%, auto;
  overflow: hidden;

}



.cardBottom, .cardFull {

  width: auto;
  height: auto;

  border-bottom-left-radius: 2.8vw;
  border-bottom-right-radius: 2.8vw;

  padding: 5vw;
  padding-bottom: 3vw;

}

.cardBottom{
  background-color: #212121;
  padding-top: 3vw;
}

.cardFull {
  padding-top: 43vw;

  border-radius: 2.8vw;

  background-position: center; 
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.cardLink {
  display: block;
  width: 100%;
  margin-top: -70vw;
  height: 70vw;
  background-color: transparent;
  margin-bottom: 8vw;
  border-radius: 2.8vw;
  position: relative;
  z-index: 1;
}


.cardWrapper {
  display: grid;
  height: auto;
  justify-content: center;
}

.card{
  height: 83vw;
}