body {
    background-color: #031210;
    /*overflow-y: hidden; */  
}

html, body {
    width:  100%;
    height: 100%;
    margin: 0;   
  }

div,body {
    margin:0;
    /*overflow-y:hidden;*/
}

/*------------------------------------*\
    VERTICAL SCROLLBAR
\*------------------------------------*/


/* width */
::-webkit-scrollbar {
	width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	background: #000; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #555; 
  }

#content {
  
  margin: auto;
  text-align: center;
  position: relative;
  width: 100%;
  
}


#content, ul.link-list {
  top:3%;
}


#atomquake-logo {
  background-image: url(../images/logo/green_chalk_paths.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 45%;
  margin:auto;
  
  z-index: 2;
  background-position: center;

}
#atomquake-logo:after, #text:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}





  #text {
    background-image: url(../images/logo/txt_atomquake__with_balls_final_fade_stage_.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: inherit;
    z-index: 3;
    background-position: center;

    }

ul.link-list {
  position: relative;
  padding: 0px;
  height: 30%;
  width:80%;
  margin: auto;
  text-align:center;
}

ul.link-list li {
  display:inline-block ;
  list-style-type: none;
  width:10%;
  text-align: left;
   
  height:40px;
}



.no-zoom {

  transform: scale(1) !important;

}


.icon {
display: inline-block;
width:30%;
height:30%;
padding-left: 55%;
padding-bottom: 13px;
margin-bottom: 20px;
position: relative;
color: antiquewhite;
background-size: contain;
background-repeat: no-repeat;
z-index: 5;
background-position: center;
transition: transform .61s;
}

.icon-amazon-exception {
  display: inline-block;

  padding-left: 55%;
  padding-bottom: 13px;
  margin-bottom: 20px;
  position: relative;
  color: antiquewhite;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
  background-position: center;
  transition: transform .61s;
  }



  .icon-amazon-exception:hover {

    margin-bottom: 0px;
    top:-20px;
    transform: scale(1.25);
    }  


.icon:hover {

margin-bottom: 0px;
top:-20px;
transform: scale(1.25);
}

/* streaming services icons */
.icon-amazon {
  background-image: url(../images/icons/amazon-music_icon.svg);
  
}

.icon-spotify {
  background-image: url(../images/icons/spotify_icon.svg);
}

.icon-apple{
  background-image: url(../images/icons/apple-music_icon.svg);
}

.icon-bandcamp {
  background-image: url(../images/icons/bandcamp_icon.svg);
}

.icon-deezer {
  background-image: url(../images/icons/deezer_icon.svg);
}

.icon-pandora {
  background-image: url(../images/icons/pandora_icon.svg);
}

.icon-youtube {
  background-image: url(../images/icons/youtube_icon.svg);
}

.icon-tidal {
  background-image: url(../images/icons/tidal_icon.svg);
}

.icon-soundcloud {
  background-image: url(../images/icons/soundcloud_icon.svg);

}


/* navigation */

.icon-questionmark {
  background-image: url(../images/icons/question_mark_green.svg);
  position: absolute !important;
  top:87%;
  left:48.3%;
  width:4%;
  height:4%;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
  background-position: center ;
  display: inline-block; 
}

.icon-more {
  background-image: url(../images/icons/MORE_icon.svg);
}

.icon-back {
  background-image: url(../images/icons/back_arrows_red.svg);
}




/* For mobile phones */

@media only screen and (max-width: 768px) {
  
  #content, ul.link-list {
    top:5%;
  }


  #atomquake-logo {
   width: 90%;
  } 
  ul.link-list {
    width: 90%;
   } 

  .icon-questionmark {

    top:87%;
    left:47.5% !important;
    width:3%;
    height:3%;
  }

  .icon {
    display: inline-block;
    width:100%;
    height:50%;
  }

  ul.link-list li {

    width:15%;
    padding-right: 5%;
    
  }



}