html {
 font-family: "Cormorant", serif;
}
body { 
 font-family: "Cormorant", serif;
    background-image: url(../icon/IMG_4319.jpeg);
    background-size: cover;
    overflow-x: clip;
}
.sticky-header {
display: flex;
}
.icon {
display: flex;
position:relative;
}
.logo {
  position:absolute;
scale: 55%;
top: -25px;
left: -37px;
}
.home {
       display: flex;
    position: relative;
    width: 88px;
}
.art-icons {
  display: flex;
        max-height: 88px;
        max-width: 322px;
        object-fit: contain;
        flex-direction: row;
        overflow: clip;
        align-items: center;
        left: 11px;
        position: relative;
     }
.muse {
    position: relative;
    scale: 16%;
    left: -269px;
    top: -13px;
    border: 4px solid black;
    }
.word {
       position: relative;
    scale: 15%;
    left: -203px;
    top: -2px;
    border: 4px solid black;
  }
.arf {
position: relative;
    scale: 16%;
    left: -200px;
    top: -1px;
    border: 4px solid black;
  }
 .mucus {
     max-width:106px;
 }
.shadows {
max-width: 106px;
}
.digi {
max-width: 106px;
}
.title {
  position: relative;
  color: black;
  font-size: 20px;
 font-family: "Cormorant", serif;
  text-align: center;
  text-shadow: 2px 2px 2px #fff;   
 }
 .front-page {
     display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: stretch;
    margin:2ex;
 }
 .intro {
  display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 480px;
    position: relative;
    align-items: center;
 }
 .beam {
  position: relative;
  display: flex ;
  color: black;
  font-size: 20px;
 font-family: "Cormorant", serif;
  border: 2px solid black;
  height: 400px;
  width: 300px;
  margin: 0 2 0;
  flex-direction: column;
  align-content: center;
  align-items: center;
 }
.subhead {
    color: black;
    font-size: 24px;
    font-family: "Cormorant", serif;
    border: 2px solid black;
    align-items: center;
    background-color: white;
    scale: 70%;
    max-width: 480px;
    position: relative;
    width: max-content;
}
.bio {
display: flex;
  font-family: "Cormorant", serif;
  font-size: 36px;
  text-decoration: underline;
  justify-content: center;
}
.personal {
text-align: center;
}
.cover-image {
    position: relative;
    display: flex;
    border: 2px solid black;
    flex-direction: row;
} 
.leftc {
width: 168px;
height: 252px;
}
.rightc {
width: 189px;
height: 252px;
}
.merch {
     position: relative;
    height: 400px;
    flex-direction: column;
    align-self: center;
    top: 22px;
  }
    .store-top {
position: relative;
  display: flex ;
  border: 2px solid black;
  height: 300px;
  width: 300px;
  flex-direction: row;
  justify-content: flex-start;
  object-fit: scale-down;
  object-position: left;
  }
.store-bottom {
position: relative;
  display: flex ;
  border: 2px solid black;
  height: 300px;
  width: 300px;
  flex-direction: row;
  justify-content: flex-start;
  object-fit: scale-down;
  object-position: left;
  }
.socials {
    color: palegreen;
    text-align:center; 
    margin: -20px;
 }
 
.player {
  height: 48px;
  visibility: visible;
  position: fixed;
  bottom: 0;
  width: 100%;
  perspective: 900;
  perspective-origin: 80% 100%;
}
.playerControls {
  height: 48px;
  visibility: visible;
  position: fixed;
  bottom: 0;
  width: 100%;
  perspective: 900;
  perspective-origin: 80% 100%;
}
.player-wrapper {
float: right;
  width: 328px;
  padding: 16px;
  padding: var(--spacing-2x);
  box-sizing: border-box;
  background: #666;background:var(--secondary-color);
  transform: translateY(-100%);z-index:350;transition:opacity .2s;
  margin-right: 16px;
  margin-right: var(--spacing-2x)
  }
  
.player-elements {
  display: flex;
  position: relative;
  height: 100%;
  align-items: center;