@import url('https://fonts.googleapis.com/css2?family=Amiko:wght@400;600;700&display=swap');

/* General Formatting */

body {
    font-family: 'Amiko', sans-serif; 
    background: #dbc8f3; 
    height: 100%;
    margin: 0;
}

h1 {
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 60px;
}

h2 {
  font-size: 1vw;
  color: rgb(255, 255, 255);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
}

h3 {
  font-size: 1vw;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  margin-left: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}

h4 {
  font-size: 50px;
  color: rgb(255, 255, 255);
  margin-left: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}

a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    color: white;
}

a:hover { 
  font-style: italic;
  cursor: pointer;
}

/* NAVBAR */

.topnav {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    position:absolute; 
    right:0;
    color: white;
    z-index: 10;
  }
  
  .topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .topnav a:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }
  
  .topnav a.active {
    background-color: rgba(0, 0, 0, 0.9);
  }
  

/* GRID GALLERY */

.row {

  display: flex;
  flex-wrap: wrap;
}
.column {
  flex: 25%;
  max-width: 25%;
}

.columnSONG {
  flex: 33.3%;
  max-width: 33.3%;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

/* HOVER EFFEKT*/

/* Parent Container */
.content_img{
 position: relative;
 float: left;
}

/* Child Text Container */
.content_img div {
 position: absolute;
 bottom: 0;
 right: 0;
 opacity: 1;
 visibility: hidden;
 background-color: rgba(219, 200, 243, 0.8);
 -webkit-transition: visibility 0s, opacity 0.5s linear; 
 transition: visibility 0s, opacity 0.1s linear;
}

.content_img:hover div{
 width: 100%;
 height: 100%;
 visibility: visible;
 opacity: 1; 
}

/* About Song */

.button {
  background-color: rgba(255, 255, 255, 0.3);
  font-family: 'Amiko', sans-serif; 
  border: none;
  color: #96616b;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
}

.button:hover {
  background-color: rgba(255, 255, 255);
  font-style: italic;

}


.p1 {
  font-size: 20px;
  color: #96616b;
  text-align: left;
  text-transform: lowercase;
  margin-left:10px;
}

.p2 {
  font-size: 20px;
  color: #96616b;
  text-align: right;
  text-transform: lowercase;
  margin-right:10px;
}

.refrain {
  font-weight: 700;
}

audio {
  margin-top: 15px;
  opacity: 0.5;
}

span.highlight {
background: linear-gradient(104deg, rgba(255, 130, 224, 0) 0.9%, rgba(255, 130, 224, 0) 2.4%, rgba(255, 130, 224, 0.5) 5.8%, rgba(228, 130, 203, 0.24) 93%, rgba(212, 162, 169, 0.479) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(255, 130, 161, 0) 0%, rgba(255, 130, 228, 0.13) 7.9%, rgba(255, 130, 234, 0) 15%);
}
 

 /* Audio */ 

 a.trigger {
  color: white;
  text-decoration: none;
  }
  
  .trigger::before {
      content: '▶';
  }
  
  .playing .trigger::before {
  content: 'II';
  }
  
  .paused .trigger::before {
  content: '▶';
  }
  
  .player {
    position: absolute;
      right: 16px;
      font-size: 18px;
      border: solid white 2px;    
      padding: 15px;
      background-color: #e0b5ea;
      display: inline;
      display: inline-block;
  }

  .playerCONTAINER {
    position: sticky;
    top: 20px;
  }

   /* Song Lyrics Annotations */

#text1 {
display: none;
}

#text2 {
display: none;
}

#text3 {
display: none;
}

#text4 {
display: none;
}

#text5 {
display: none;
}

#text6 {
display: none;
}

#text7 {
display: none;
}

#text8 {
display: none;
}

.annotation {
  font-size: 20px;
  font-family: 'Amiko', sans-serif; 
  color: #ffffff;
  text-align: left;
  text-transform: lowercase;
  margin-left:10px;
  font-style: italic;
}

.annotationCONTAINER {
  position: sticky;
  top: 20px;
}