body {overflow-x:hidden; background-color: #B19CD9;}



.grid-container {
  display: grid;
  position: relative;
  /* background-color: #B19CD9; */
  background-color: rgba(177,156,217,0.0);
  top: 75px;
  left: 0;
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

/* ------------------- FULL PAGE CONTAINER WITH GRID INSIDE -------------------------------------------------------------- */
.page-container {
  top: 75px; 
  width: 100%;
  height: auto;
}

/* ------------------- SINGLE PAGE NAVIGATION  -------------------------------------------------------------- */

@keyframes fadeInNav {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.pagenavigate {
  name: pagenav;
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black; 
  font-weight: 600;
  font-size: 18px;
  animation: fadeInNav 2s ease;
}

.pagenavigate a {
  color: black; 
  text-decoration: none;
}

.pagenavigate a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.pagenavigate img {  /* HORIZONTAL LINES ON EITHER SIDE OF THE MENU ----------------------------------- */
  width: 30%;
  height: 5px;
  transition: width 1s ease;
}

#leftline {
  width: 30%;
  height: 5px;
  animation: revealleft 2s forwards;
  transition: width 1s ease;
}

@keyframes revealleft {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

#rightline {
  animation: revealright 2s forwards;
  width: 30%;
  height: 5px;
  transition: width 1s ease;
}

@keyframes revealright {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


/* ------------------- MUSIC ROW ON GRID -------------------------------------------------------------- */
@keyframes revealImage {
  from {
    clip-path: ellipse(0% 0%);
  }
  to {
    clip-path: ellipse(50% 50%);
  }
}



.music-image-section {
  name: musicimagesection;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  width: 100%;
  overflow: hidden;
  margin: 20;
  padding: 20;
}

.music-image-section img {
	width: 500px;	
	transition: width 1s ease;
	animation: revealImage 2s ease;
}

.musicwedo {
  name: music_intro;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  justify-content: center;
}


/* ------------------- PLAYLIST ROW ON GRID -------------------------------------------------------------- */
.playlist-image-section {
  name: playlistimage;
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
  width: 100%;
  overflow: hidden;
  margin: 20;
  padding: 20;
}

.playlist-image-section img {
	width: 500px;	
	transition: width 1s ease;
	animation: revealImage 2s ease;
}


.musicplaylists {
  name: playlists;
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
  justify-content: center;
}




/* ------------------- MEDIA PLAYER & SAMPLE LINKS ROW ON GRID -------------------------------------------------------------- */
.samplelinks {
  name: samples;
  grid-column: 2 / span 1;
  grid-row: 4 / span 1;
}

.sample-link {
	color: black;
	font-size: 15px;
  line-height: 150%;
  text-decoration: none;
}

.sample-link:hover {
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

.sample-link-active {
  text-decoration: underline;
  font-weight: 600;
}

.mediaplayer {
  name: sampleplayer;
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
}

.mediaplayer img {
	width: 500px;	
	transition: width 1s ease;
}

.music-player-container {
	width: 100%;
}
.music-player {
	width: 500px;
}

.playing {
  font-size: 14px;
  line-height: 100%;  
}

#songName {
   font-size: 25px;
   font-weight: 600;	
   font-family: times, serif;
}
 
#imageLow:hover {
	cursor: pointer;
}

/* ------------------- CURRENT TOP 20 ALL TIME REQUESTS -------------------------------------------------------------- */
.requestcharts {
  name: requests;
  grid-column: 1 / span 2;
  grid-row: 5 / span 1;
  width: 98%;
  margin: 20;
  padding: 20;
  justify-content: center;
  align-items: center;
}

.charts {
	position: relative;
	width: 90%; 
	text-align: left; 
	left: 5%;
	line-height: 120%;
}


.chartrow {
	/* background-color: #B19CD9;	*/
	background-color: rgba(0,0,0,0);
	transition: background-color .5s ease;
}

.chartrow td a {
	color: black; 
	text-decoration: none;
}

.chartrow:hover {
	background-color: #cdbaf1;	
	cursor: pointer;
	transition: background-color .5s ease;
}

.more {
	font-weight: 600;
	font-family: times, serif;
	font-size: 18px;
	color: black;
	text-decoration: none;
}

.more:hover {
	text-decoration: underline;
}

.more2 {
	font-weight: 600;
	font-family: arial, serif;
	font-size: 20px;
	color: black;
	text-decoration: none;
}

.more2:hover {
	text-decoration: underline;
}

.youtubepower {
  position: relative; 
  top: -20;	
}


/*----------  SETS A HIDDEN ELEMENT WITH NEGATIVE VALUE FOR ACCURATE PAGE JUMPING --------------------- */
.hiddenplayertop {  
  display: block;
  visibility: hidden;
  position: relative;
  top: -70px;
  z-index: -100;
}


.chart-nav {
	position: relative;
	font-size: 16px;
	top: -20px;
}

.chart-nav a:hover {
	cursor: pointer;
	text-decoration: underline;
}

/* ------------------------------------------------PORTRAIT ORIENTATION ------------------------------------------------------------------- */
 @media (orientation: portrait) {

  .grid-container {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(8, auto);
    }  
	
  .music-image-section {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  margin: 0;
  padding: 0;
  }

  .music-image-section img {
	width: 100%;	
	transition: width 1s ease;
  }

  .musicwedo {
   grid-column: 1 / span 1;
   grid-row: 3 / span 1;
  }
  
  .playlist-image-section {
   grid-column: 1 / span 1;
   grid-row: 4 / span 1;
   margin: 0;
   padding: 0;
  }

.playlist-image-section img {
	width: 100%;	
	transition: width 1s ease;
}

  .musicplaylists {
   grid-column: 1 / span 1;
   grid-row: 5 / span 1;
  }
 
  .mediaplayer {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
  }
.mediaplayer img {
	width: 100%;	
	transition: width 1s ease;
}

.music-player {
	width: 100%;
}

.playing {
  font-size: 12px;
}

#songName {
   font-size: 22px;
}
 

 .samplelinks {
   grid-column: 1 / span 1;
   grid-row: 7 / span 1;
  }
  
 .pagenavigate img {
   width: 10%;
   transition: width 1s ease;
 }
 
  #rightline, #leftline {
   width: 10%;
   transition: width 1s ease;
  }

  .requestcharts {
    name: requests;
    grid-column: 1 / span 1;
    grid-row: 8 / span 1;
  }

.requestcharts {
  grid-column: 1 / span 1;
  grid-row: 9 / span 1;
  }
  
.charts {
	left: 0;
	width: 100%;
	font-size: 15px;
	line-height: 130%;
  }

  .more {
	font-size: 16px; float: left;
  }
  
.more2 {
	font-size: 18px;
}

  
}


/* -----------------------------LANDSCAPE ORIENTATION ON SMALL SCREEN -------------------------------------------------------------*/
  @media ((orientation: landscape) and (max-width: 800px) and (min-width: 500px)) {


  .grid-container {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(8, auto);
    }  
	
  .music-image-section {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  margin: 0;
  padding: 0;
  }

  .music-image-section img {
	width: 100%;	
	transition: width 1s ease;
  }

  .musicwedo {
   grid-column: 1 / span 1;
   grid-row: 3 / span 1;
  }
  
  .playlist-image-section {
   grid-column: 1 / span 1;
   grid-row: 4 / span 1;
   margin: 0;
   padding: 0;
  }

.playlist-image-section img {
	width: 100%;	
	transition: width 1s ease;
}

  
  .musicplaylists {
   grid-column: 1 / span 1;
   grid-row: 5 / span 1;
  }
 
  .mediaplayer {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
  }
.mediaplayer img {
	width: 100%;	
	transition: width 1s ease;
}

.music-player {
	width: 100%;
}

.playing {
  font-size: 12px;
}

#songName {
   font-size: 22px;
}
 

 .samplelinks {
   grid-column: 1 / span 1;
   grid-row: 7 / span 1;
  }
  
 .pagenavigate img {
   width: 10%;
   transition: width 1s ease;
 }
 
  #rightline, #leftline {
   width: 10%;
   transition: width 1s ease;
  }

  .requestcharts {
    name: requests;
    grid-column: 1 / span 1;
    grid-row: 8 / span 1;
  }

.requestcharts {
  grid-column: 1 / span 1;
  grid-row: 9 / span 1;
  }
  
.charts {
	left: 0;
	width: 100%;
	font-size: 15px;
	line-height: 130%;
  }

  .more {
	font-size: 16px; float: left;
  }
  
  .more2 {
	font-size: 18px;
  }


 }


 /*  --------------- SMALLER LANDSCAPE BUT NOT TOO SMALL TO SHORTEN IMAGES FOR GOOD SCREEN FIT BEFORE PORTRAIT ORIENTATION -------------------------- */
  @media ((orientation: landscape) and (max-width: 1000px) and (min-width: 800px)) {

   .music-image-section img {
	width: 400px;	
	transition: width 1s ease;
   }
 
 .playlist-image-section img {
	width: 400px;	
	transition: width 1s ease;
  }

  .mediaplayer img {
	width: 400px;	
	transition: width 1s ease;
  }

  .music-player {
	width: 400px;
  }

}