/* sparkles from https://ya-webdesign.com/explore/sparkle-gif-png/ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

@font-face {
  font-family: AlienEncounters;
  src: url("../fonts/SFAlienEncounters.ttf");
}

@font-face {	
  font-family: VCROSDMONO;
  src: url("../fonts/VCR_OSD_MONO_1.001.ttf");
}


h1, h2, h3, h4, strong{
	font-family: AlienEncounters;
	color: #FFF;
	letter-spacing: 0.1vw; 
  font-size: 1vw; 
	text-shadow: 0.1vw 0.1vw 0.3vw white;
}

p, em, li, a{
  font-family: 'VT323', monospace;
  color: #FFF;
  font-size: 0.9vw;
  width: 90%;
}
	

body, html { 
margin: 0;
padding: 0;	 
background: linear-gradient(180deg, rgba(153,0,255,1) -75%, rgba(0,0,0,1) 50%, rgba(0,190,169,1) 125%);
background-size: cover;  
}

.twitch-layout-blueprint {  
background-image: url("../img/glitter-three.gif");
background-repeat: repeat;
min-height: 98.8vh;    
}

.chat-container, .media-container, .song-container, .video-container{	
border-style: solid;
border-width: 0.3vw;
border-color: #8601a4;
border-radius: 40px;
background-color: rgba(0, 0, 0, 0.9);	
text-align: center;
box-shadow: 
0px 0px 
0.5vw 0.5vw #02ffff;	
}

.chat-container {
margin-top: 0.5%;
margin-left: 1%;
width: 16.5%;
height: 78%;	
}

.media-container{
flex-direction: column;
display: flex;
align-items: center;
position: fixed; 
margin-left: 1%;
bottom: 3%;	
width: 16.5%;
height: 12%;
}

h3.media-container{
padding: 0;
margin: 0;
}

ul{
display: flex;
flex-direction: row;
align-items: center;
text-align: center;	
margin: 0;
list-style-type: none;
height: 5%;}	

.media-icon {
fill: #fff;	
width: 15%;
height: 15%;	
}

ul, li{
padding: 1%;
}

svg{
margin: 1%;		
}

.song-container{
position: fixed; 
margin-left: 19%;
bottom: 3%;
width: 79%;
height: 12%;	
}