@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');


body{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  margin:0;
}

a{
  color:#7d8fe8;
  text-decoration:underline!important;
}

a:hover{
  color:#a8b4f0;
  text-decoration:none!important;
}

.i_prodigy {
  font-size:12px;
  margin-top:20px;
  margin-left:22px;
  position:absolute;
  z-index:1;
}

.header{
  height:384px;
  width:100%;
  background: #ffffff;
  padding:0;
  margin:0;
  z-index:-1;
}

.cover img{
  width:345px;
  height:345px;
  margin-top:-316px;
  margin-left:67px;
  position: absolute;
  z-index:1;
}

.title{
  margin-top:-316px;
  margin-left:440px;
  position: absolute;
  z-index:1;
}

.title h1, h1 a{
  font-family: "Space Grotesk", sans-serif;
  font-weight:700;
  font-size:36px;
  margin:0;
  padding:0;
}

.title h2, h2 a{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:18px;
  margin:0;
  padding:0;
  text-decoration:underline!important;
}

.title h2 a:hover, h1 a:hover{
  text-decoration:none!important;
}

.title h3{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:14px;
  margin:0;
  padding:0;
}

.title p{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:14px;
  margin:0;
  padding:0;
  vertical-align: middle;
  display: inline-block;
}

.i_date{
  padding-right:5px;
  font-size:14px;
  vertical-align: middle;
  display: inline-block;
}

.main{
	display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(1, 1fr);
   gap: 0px;
}

.annos{
	margin-top:166px;
  margin-left:0;
  overflow:hidden;
}

.lyrics{
  font-family: "Space Grotesk", sans-serif;
  font-weight:400;
  color:#000000;
  font-size:20px;
  line-height:30px;
  width:716px;
  margin-top:54px;
  margin-left:188px;
}

.lyrics aside{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  color:#000000;
  font-size:18px;
  border-bottom: 2px solid #DBDBDB;
  padding: 0 0 22px;
  margin-bottom:22px;
}

.lyrics aside a{
  color:#000000;
  text-decoration: underline!important;
}

.lyrics aside a:hover{
  text-decoration: none!important;
}

.lyrics small{
  color:#000000;
  font-size:14px;
  margin-bottom:40px;
}

.lyrics p{
  margin-bottom:50px;
}

.footer{
  width:100%;
  background: #ffffff;
  margin:0;
  padding: 0 0 60px;
  z-index:-1;
}

.info{
  width:716px;
  margin-left:188px;
  padding-top:1px;
  z-index:1;
}

.info h1{
  font-family: "Space Grotesk", sans-serif;
  font-weight:700;
  font-size:90px;
  text-align:center;
}

.info p{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:18px;
}

.last{
  padding: 0 0 60px;
  margin-bottom:22px;
}

.info a{
  text-decoration:underline!important;
}

.info a:hover{
  text-decoration:none!important;
}

.question{
  width:716px;
  margin-left:188px;
  padding-top:1px;
  z-index:1;
  
}

.question h1{
  font-family: "Space Grotesk", sans-serif;
  font-weight:700;
  font-size:90px;
  text-align:center;
}

.question h2{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:18px;
  padding:16px;
  margin:-1px;
}

.question p{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:18px;
  padding: 0 30px;
}

.question a{
  text-decoration:underline!important;
}

.question a:hover{
  text-decoration:none!important;
}

.question blockquote{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size: 18px;
  padding: 0 40px 0 0;
  margin: 0 0 0 50px;
  position: relative;
  display:block;
}

.question blockquote::before{
  font-family:Times New Roman, serif;
  content: "\201C";
  font-size:60px;
  position: absolute;
  margin-top:-10px;
  overflow-wrap: break-word;
  word-break:break-word;
}

.question blockquote::after{
  content: '';
}

.question span{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:18px;
  padding: 0 30px;
  font-style:italic;
  margin-top:8px;
}

.question span::before{
  font-style:normal;
  content: "- via ";
}

.album{
  width:716px;
  margin-left:188px;
  margin-top:22px;
  z-index:1;
}

.album img{
  width:250px;
  height:250px;
  margin: 60px 0 0 50px;
  position: static;
  z-index:1;
}

.album h2{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:18px;
  line-height:23px;
  margin: -160px 0 0 350px;
  padding:0;
}

.album h3, h3 a{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:23px;
  margin: 0 0 0 175px;
  padding:0;
}

.album h3 a:hover{
  text-decoration:none;
}

.tracklist{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:40px;
  width:716px;
  margin-left:188px;
  margin-top:120px;
  z-index:1;
}

.tracklist a{
  text-decoration:underline!important;
}

.tracklist a:hover{
  text-decoration:none!important;
}

.tracklist ol{
  text-align:left;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -ms-column-count: 2;
  -ms-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
  column-fill: balance;
  list-style-position: inside;
  padding: 0 0 60px;
  margin-bottom:22px;
  list-style-type: none;
}

/*
.tracklist li:nth-child(6){ 
  border:solid 1px #ffffff;
  padding:5px;
  display:inline;
  margin-left:-5px;
}
*/

.cred{
  width:716px;
  margin-left:188px;
  padding-top:1px;
  text-align:left;
  z-index:1;
  margin-top:50px;
  padding: 0 0 60px;
  margin-bottom:22px;
}

.cred h1{
  font-family: "Space Grotesk", sans-serif;
  font-weight:700;
  font-size:40px;
}

.credbox{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0px;
}

.credbox p{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:14px;
}

.credbox small{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size:11px;
}

.credbox a{
  text-decoration:underline!important;
}

.credbox a:hover{
  text-decoration:none!important;
}





/* annotations */

.click{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  text-align:center;
  font-size:14px;
  color:#666666;
  background-color:white;
  transition: opacity 1.2s;
}

a, .click a{
  text-decoration:none!important;
}

.click:hover{
  opacity:.6;
}

.overlay {
  position: relative;
  width: 500px;
  height:100%;
  background: transparent;
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
	z-index:2;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  padding: 20px;
  background: #fff;
  width: 500px;
  height:100%;
  position: relative;
  transition: all 5s ease-in-out;
	z-index:2;
}

.popup h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  text-align:left;
  font-size:14px;
	margin-bottom:20px;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none!important;
  color: #333;
	background-color:transparent;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
	width:500px;
	height:100%;
  overflow:auto;
}

@media screen and (max-width: 500px){
  .popup{
    width: 500px;
		height:100%;
  }
}

.content{
	font-family: "Space Grotesk", sans-serif;
	font-weight:300;
  font-weight:normal;
  color:#000000;
	font-size:14px;
}

.content img{
	text-align:center;
	max-width:400px;
	padding:20px;
}

.content blockquote{
  font-family: "Space Grotesk", sans-serif;
  font-weight:300;
  font-size: 14px;
  padding: 20px 60px 0 0;
  margin: 0 0 0 50px;
  position: relative;
  display:block;
}

.content blockquote::before{
  font-family:Times New Roman, serif;
  content: "\201C";
  font-size:40px;
  position: absolute;
  margin-top:-8px;
	margin-left:-25px;
  overflow-wrap: break-word;
  word-break:break-word;
}

.content blockquote::after{
  content: '';
}

.content span{
  font-style:italic;
  margin-top:8px;
}

.content span::before{
  font-style:normal;
  content: "- via ";
}