body{
  background: fixed url('media/442594922.JPG') no-repeat top center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  padding: 0px;
  margin: 0px;
}
#body{
  margin:0 auto;
  width:100%;
  padding:0;
  max-width:30rem;
  color:#eee;
  position:relative
}
p{
  line-height:1.5;
  margin:0
}
h2,h3{
  margin:0
}
.icon{
  width:1.5rem;
  height:1.5rem
}
a{
  text-decoration:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
#modal{
  display:flex;
  flex-direction:column;
  position:absolute;
  z-index:1;
  width:100%;
  bottom:0;
  transition:top .2s ease-out,opacity .1s ease-out;
  transform:translateZ(0)
}
#close{
  align-self:end;
  padding:1rem;
  cursor:pointer;
  line-height:0
}
#keyView,#copyView,#qrView{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 1rem;
  text-align:center
}
#keyView p,#copyView p,#qrView p{
  margin:2rem;
  text-align:center
}
#copyURL,#dlKey{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  border-radius:5rem;
  padding:1rem 1.5rem;
  border:none;
  outline:none;
  cursor:pointer;
  box-sizing:border-box
}
#copyURL span,#dlKey span{
  margin-left:.5rem
}
#qrView h3{
  margin:2rem 2rem 0
}
#qrView p{
  margin:.5rem 2rem 0
}
#qr{
  margin:2rem;
  padding:2rem;
  background:#fff;
  border-radius:.5rem
}
header{
  display:flex;
  justify-content:flex-start;
  flex-direction:column
}
.headerImgC{
  display:grid;
  grid-template-columns:auto;
  grid-template-rows:auto;
  overflow:hidden
}
#cover{
  grid-column:1;
  grid-row:1;
  width:100%;
  height:20rem;
  -o-object-position:top center;
  object-position:top center;
  -o-object-fit:cover;
  object-fit:cover
}
#logo{
  max-height:6rem;
  pointer-events:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center
}
#topActions{
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:flex-start
}
#topActions>div{
  display:flex
}
#topActions a{
  padding:1rem;
  cursor:pointer;
  line-height:0
}
main{
  padding:1rem;
  margin: 2rem 1rem 1rem 1rem;
  /*border-radius:2rem;*/
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}
#profilePhoto{
  width:10rem;
  height:10rem;
  border-radius:100%;
  box-sizing:content-box;
  pointer-events:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
/*  margin-top:-6rem*/
}
#info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-top:1rem;
  line-height:1.25;
  word-break:break-word
}
.name{
  font-weight:bold;
  font-size:1.5rem;
  margin:0
}
.pronouns{
  display:block;
  font-size:.9rem;
  opacity:.8;
  font-weight:normal;
  margin:0 0 .5rem
}
.bizname{
  font-size:.9rem;
  margin:.5rem 0 0;
  opacity:.8
}
.bizaddr{
  font-size:.8rem;
  opacity:.6
}
.sub,.textC{
  font-size:1rem;
  white-space:pre-line;
  line-height:1.5
}
.sub{
  font-size:.9rem;
  margin:.5rem 0 0;
  opacity:.8
}
.textC{
  margin:1rem
}
#cta{
  display:flex;
  align-items:center;
  border-radius:5rem;
  padding:1rem 1.5rem;
  margin-bottom:2rem;
  cursor:pointer;
  line-height:0;
  width:100%;
  justify-content:center;
  box-sizing:border-box;
  border: 2px solid #6272a4;
  background-color: rgb(98, 114, 164);
}
#cta .icon{
  margin-right:.5rem
}
#cta p{
  margin:0
}
#cta:hover{
  background-color: #f8f8f2;
}
#cta:hover .iconColor{
  color:#6272a4;
}
#cta:last-of-type{
  margin-bottom:0;
  }
.actions{
  width:100%;
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center
}
.actionsC{
  width:33.33%
}
.actionBtn{
  padding:.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.actionBtn a{
  border-radius:100%;
  padding:1rem;
  line-height:0
}
.actionBtn p{
  margin:.5rem 0 0;
  font-size:.9rem
}
.secBtn{
  padding:1rem
}
.featured{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:1rem 0 0;
  width:100%
}
.section{
  font-weight:bold;
  text-align:center;
  font-size:1.3rem;
  padding:1rem 0
}
.media{
  background-color: rgb(248, 248, 242);
  overflow:hidden;
  border-radius:0.5rem;
  padding: 2rem;
  margin-top:1rem;
  color: #44475a;
}
.media img{
  display:block;
  pointer-events:none;
  max-height:4rem;
  object-fit:contain;
  justify-content:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  width:100%
}
.embedded{
  position:relative;
  padding-top:100%
}
.embedded iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}
.music,.video{
  width:100%
}
.mediaC{
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center
}
.image{
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center;
  }
video{
  width:100%
}
.controls{
  padding:1rem;
  font-size:.9rem;
  text-align:center;
  width:100%;
  box-sizing:border-box
}
.pCtrl,.docDl{
  display:none;
  flex-direction:column;
  align-items:center;
  width:100%
}
.docDl{
  display:flex
}
.seekBar{
  width:100%;
  height:.5rem;
  margin:1.5rem 0 .5rem;
  border-radius:5rem;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer
}
.playPause,.dlBtn{
  margin:1rem 0 .5rem;
  padding:1rem;
  border-radius:5rem;
  line-height:0;
  cursor:pointer
}
.pause{
  display:none
}
.title{
  font-size:1rem;
  font-weight:bold;
  margin:0
}
.prodInfo .sub{
  margin:-1rem 0 0
}
.price{
  margin:1rem 0 0;
  font-size:1rem;
  font-weight:bold
}
.label{
  display:inline-block;
  font-size:1rem;
  margin:1rem 0 .5rem;
  border-radius:5rem;
  letter-spacing:1px;
  padding:1rem 1.5rem
}
.label p{
  margin:0
}
footer{
  padding:4rem 1rem 2rem;
  font-size:.9rem;
  text-align:center
}
footer a{
  text-decoration:underline;
  color:inherit
}
.copyable{
  font-family:'Fira Code';
}
.copyable:hover{
  color:#ff5555;
}
.tooltip{
  position: relative;
}
.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  justify-content: center;
  background-color: #555;
  color: #fff;
  text-align: center;
  display: flex;
  border-radius: 6px;
  padding: 10px;
  z-index: 1;
  bottom: calc(100% + 5px);
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translate(-50%);
}
.tooltip .tooltiptext::after {
  content: "";
  /*
  top: 100%;
  left: 50%;
  margin-left: -5px;
  */
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}