body, html {
   background-color: #14b3d2;
   font-family: 'Montserrat', sans-serif;
   height: 100%;
}
#mainBox {
   background-color: #fffffa;
   border-radius: 2em;
   margin: auto;
   margin-top: 30px;
   text-align: center;
   width:80vw;
   max-width: 400px;
   padding: 25px 15px 25px 15px;
   box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.4);
}
h1 {
   margin: 0;
   font-weight:500;
   font-size: 17pt;
}
h2 {
   margin: 0;
   font-weight:normal;
   font-size: 12pt;
}
h3 {
   margin: 0;
   font-weight:normal;
   font-size: 13pt;
}
h4 {
   margin:30px 0 20px 0;
   font-weight:500;
   font-size: 15pt;
}
p {
   font-size: 12pt;
   max-width: 350px;
   margin: auto;
}
a {
   cursor: pointer;
   text-decoration: underline;
   color: black;
}
a:hover { 
   color: gray;
}


#ea {
    margin-top: 10px;
}


.gig-info {
    margin: 10px 0 10px 0;
    max-width: 12em;
}
.gig-container {
    display: flex;
    width: 80vw;
    max-width: 400px;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin: -10px 0 -10px 0;
}
#view-more {
    margin-top: 20px;
}


#song-table {
  font-size: 11pt;
  border-radius: 1em;
  background-color: #EDEDE8;
  border-collapse: collapse;
  margin-bottom: 10px;
  overflow: hidden;
  text-align: left;
}
.song-cell {
    padding: 3px 10px 3px 10px;
}
.song-hdr {
    padding: 3px 10px 3px 10px;
    font-weight: 500;
}
.song {
    cursor: pointer;
    border-top: 1px solid #fffffa;
}
#media-player {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
audio {
    outline: none;
}


.friends-container {
    display: flex;
    margin: auto;
    width: 75vw;
    max-width: 400px;
    flex-flow: row wrap;
    justify-content: space-evenly;
}


footer {
    margin: auto;
    text-align: center;
    padding: 12px 0 18px 0;
    font-size: 9pt;
    width:80vw;
    max-width: 400px;
}