/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');


body {
	background-color: #FFFFFF;
	font-family: 'Noto Sans', sans-serif;
	transform: scale(0.7);
	transform-origin: top center;
	text-align: center;
}

html {
  overflow: scroll !important;
}

#cover-art-container {
	position: relative;
	height: 41vw;
	width: 41vw;
}


.cover-art {
	width: 100%;
	height: 100%;
}

.main-flex-container {
	position: relative;
	vertical-align: top;
	display: flex;
	
}
a .list-artist  {
	display: block;
	text-decoration: none;
	color: #000000;
}
.list-artist{
	display: block;
	float: left;
	margin-left: 2vw;
	margin-bottom: 1vh;
	padding: 5px;
	background-color: #F4F4F4;
	width: 100%;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	text-align: left;
}

.list-artist:hover {
	background-color: rgba(86, 172, 185, 1);
}

#title {
	color: #0D0D0D;
	font-size: 2vw;
}

#sub-title {
	font-size: 1.5vw;
	color: #0D0D0D;
}


.exit-btn {
	font-size: 3vmax;
	float: right;
	padding-right: 2vmax;
	color: rgba(0, 0, 0, 0.7);
	transition: all 0.2s ease-in-out;
}

.showco-iframe {
	margin-left: 10%;
}
.mmvs-link a{
	text-decoration: underline;
	display: block;
	font-size: 24px;
	color: #333333;
	margin-left: 4.6vw;
	margin-top: 5vh;
}

.exit-btn:hover {
	text-shadow: 1px 2px 2px rgba(0,0,0, 0.4);
	color: black;
}

.top-bar {
	padding-bottom: 8vh;
}

.flex-container {
	display: flex;
	max-width: 80vw;
	margin-left: 10vw;
}

.flex-container > div {
	margin: 1vw;
}

.left-panel {
	width: 50vw;
	height: 5vh;
}

.right-panel {
	width: 40vw;
	background-color: rgba(255,255,255,0.8);
	padding: 1vh 0.5vw;
	box-shadow: 1px 1px 1px 1px rgba(211, 192, 210, 0.5);
	transition: all 0.2s ease-in-out;
}


.name-list {
	height: 41vw;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 20vw;
	border: 1px solid black;
	margin-left: 3%;
}
.name-list-img {
	display: inline-block;
	max-width: 3em;
	max-height: 3em;
	float: left;
}

.right-panel:hover {
	background-color: rgba(255,255,255,1);
	box-shadow: 2px 2px 2px 2px rgba(211, 192, 210, 0.9);
}

.artist-image {
	position: relative;
	display: block;
	margin-left: 33%;
	max-width: 40vw;
	max-height: 50vh;
}

.artist-bio {
	width: 45vw;
	background: rgba(255,255,255,0.5);
	padding: 1vh 0.5vw 1vh 0.5vw;
	font-size: 18px;
	box-shadow: 1px 1px 1px 1px rgba(216, 30, 91, 0.9);
	transition: all 0.2s ease-in-out;
}

.artist-bio:hover {
	background: #FFFFFF;
	box-shadow: 2px 2px 2px 2px rgba(216, 30, 91, 0.9);
	display: block;
}

.artist-links-container {
	margin-left: 1vw;
}

.artist-link a{
	font-size: 18px;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.8);
	transition: all 0.2s ease-in-out;
}

.artist-link a:hover{
	color: #D81E5B;
	text-decoration: underline;
	padding: 0.5vh 0.2vw;
	background-color: rgba(0, 0, 0, 0.2);
}

.artist-name {
	display: block;
	color: #0D0D0D;
	font-size: 28px;
	self: center;
	text-align: center;
	margin-bottom: 3vh;
	padding: 1vh 0.5vw;
	box-shadow: 1px 1px 1px 1px rgba(255,255,255,0.8);
}

.song-title {
	font-size: 20px;
	margin-left: 1.4vw;
	display: inline-block;
	margin-top: 1vh;
}

.song-lyrics {
	font-size: 18px;
	margin-left: 2vw;
	color: rgba(0,0,0,0.8);
}

/*Mobile Device Optimization*/

@media only screen 
	
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  
	  body {
		  transform: scale(1);
	  } 
	  
	  .showco-iframe {
		margin-left: 0;
		  margin-top: 5%;
	}
	  
	  #cover-art-container {
		  width: 50vw;
		  height: 50vw;
		  margin-bottom: 5%;
	  }
	  
	  
	  .main-flex-container {
		  display: block;
	  }
	  
	  .name-list {
		  width: 90vw;
	  }
	  
	  .list-artist a{
		  display: block;
	  }
	  
	  .flex-container {
		  display: block;
	  }
	  .right-panel {
		  width: 100%;
	  }
	  .left-panel {
		  width: 100%;
	  }
	  .artist-image {
		  display: block;
		  self: center;
		  margin-left: 23%;
	  }
	  .artist-bio {
		  display: block;
		  width: 100%;
	  }
	  .artist-name {
		  margin: 0;
		  display: block;
		  self: center;
		  text-align: center;
	  }
	  .artist-links-container {
		  text-align: center;
	  }
	  .artist-container {
		  width: 50vw;
		  height: 50vh;
		  margin-bottom: 10vh;
		  self: center;
	  }
	 
	  #title {
		  font-size: 3.5vw;
	  }
	  #sub-title {
		  font-size: 2.5vw;
	  }
	  
	}

@media screen 
	
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {
	  
	   body {
		  transform: scale(1);
	  }
	  
	  .showco-iframe {
		margin-left: 0;
		  margin-top: 5%;
	}
	  
	  #cover-art-container {
		  width: 50vw;
		  height: 50vw;
		  margin-bottom: 5%;
	  }
	  
	  
	  .main-flex-container {
		  display: block;
	  }
	  
	  .name-list {
		  display: block;
		  margin-left: 0;
		  width: 90vw;
	  }
	  
	  .list-artist a{
		  display: block;
	  }
	  
	  .flex-container {
		  display: block;
	  }
	  .right-panel {
		  width: 100%;
	  }
	  .left-panel {
		  width: 100%;
	  }
	  .artist-image {
		  display: block;
		  self: center;
		  margin-left: 23%;
	  }
	  .artist-bio {
		  display: block;
		  width: 100%;
	  }
	  .artist-name {
		  margin: 0;
		  display: block;
		  self: center;
		  text-align: center;
	  }
	  .artist-links-container {
		  text-align: center;
	  }
	  .artist-container {
		  width: 50vw;
		  height: 50vh;
		  margin-bottom: 10vh;
		  self: center;
	  }
	  
	  #title {
		  font-size: 3.5vw;
	  }
	  #sub-title {
		  font-size: 2.5vw;
	  }
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
	  
	  body {
		  transform: scale(1);
	  }
	  
	  .showco-iframe {
		margin-left: 0;
		  margin-top: 5%;
	}
	  
	  #cover-art-container {
		  width: 50vw;
		  height: 50vw;
		  margin-bottom: 5%;
	  }
	  
	  
	  .main-flex-container {
		  display: block;
	  }
	  
	  .name-list {
		  width: 90vw;
	  }
	  
	  .list-artist a{
		  display: block;
	  }
	  
	  .flex-container {
		  display: block;
	  }
	  .right-panel {
		  width: 100%;
	  }
	  .left-panel {
		  width: 100%;
	  }
	  .artist-image {
		  display: block;
		  self: center;
		  margin-left: 23%;
	  }
	  .artist-bio {
		  display: block;
		  width: 100%;
	  }
	  .artist-name {
		  margin: 0;
		  display: block;
		  self: center;
		  text-align: center;
	  }
	  .artist-links-container {
		  text-align: center;
	  }
	  .artist-container {
		  width: 50vw;
		  height: 50vh;
		  margin-bottom: 10vh;
		  self: center;
	  }
	  
	  
	  #title {
		  font-size: 3.5vw;
	  }
	  #sub-title {
		  font-size: 2.5vw;
	  }
}