html {
 font-family: "Cormorant", serif;
}
body {
background-image:url("../mental/mucus/hf/IMG_5229.jpeg");
background-size: 100%;
}
.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: -3px;
    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;
 }
  .topdeck {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
   .bottomdeck {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
 .era1 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
  .era2 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
  .era3 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era4 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era5 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era6 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era7 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era8 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era9 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era10 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
    .era11 {
  display: flex;
  margin: .5em 0 0 .5em;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
 .zoomies {
  display: flex;
  margin: 1em 0 0 0;
  width:333px;
  height:333px;
  object-fit: cover;
  position: relative;
  outline: 5px solid;
  outline-color: black;
}
.years {
display: flex;
margin: .5em 0 0 2em;
font-family: "Cormorant", serif;
    color: #19C5FA;
    text-emphasis-color: currentcolor;
    color-scheme: none;
}
.front-page {
 display: flex;
justify-content: center;
 }
 .intro {
  display: flex;
    margin: .75em 6em 0;
    justify-content: center;
 }
 .beam {
  position: relative;
  display: flex ;
  color: black;
  font-size: 20px;
 font-family: "Cormorant", serif;
  border: 2px solid black;
  height: 400px;
  width: 556px;
  margin: 0 2 0;
  flex-direction: column;
  align-content: center;
  align-items: center;
 }
.subhead {
  left: 100px;
  display: flex ;
  color: black;
  font-size: 24px;
 font-family: "Cormorant", serif;
  border: 2px solid black;
  height: 400px;
  width: 556px;
  margin: 0 2 0;
  flex-direction: column;
  align-content: center;
  align-items: center;
  position: left;
  background-color: white;
}
.bio {
  font-family: "Cormorant", serif;
  font-size: 36px;
  text-decoration: underline;
  padding: 4px;
}
.cover-image {
     position: relative;
    display: flex;
    border: 2px solid black;
    height: 400px;
    width: 556px;
    flex-direction: row;
    justify-content: center;
    object-fit: scale-down;
    object-position: left;
} 
.square {
object-fit: cover;
    margin: 1em 0 0 0;
}
.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;
}