@font-face { 
font-family: "Anton"; 
src: url("https://technoffm.com/streambox/assets/fonts/Anton-Regular.ttf"); 
}

@font-face { 
font-family: "coolvetica"; 
src: url("https://technoffm.com/streambox/assets/fonts/coolvetica.otf"); 
}

@font-face { 
font-family: "Unispace"; 
src: url("https://technoffm.com/streambox/assets/fonts/unispace.otf"); 
}

*{
    box-sizing: border-box;
	color: #ffffff;
 animation: rainbow 10s linear infinite;
}

.copyright{
	background-color: transparent;
	position: absolute;
	right: 2px;
	top: 2px;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}

.grid-box{
	width: 100%;
	height: 200px;
    display: grid;
	grid-template-columns: 110px 100fr 110px;
	grid-template-rows: 30px 45px 35px 35px;
	grid-template-areas:
		"cover stream modi"
		"cover player modi"
		"cover info modi"
		"title title title";
	font-size: 20px;
	color: #fffff;
 animation: rainbow 10s linear infinite;
background-color: transparent;
}

.grid-cover{
font-family: "coolvetica";
	grid-area: cover;
	color: #98f5ff;
         animation: rainbow 10s linear infinite;
        
	font-size: 20px;
	
	color: white;
	
}
.cover{
font-family: "coolvetica";
	width: 110px;
	height: 110px;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
	font-size: 20px;
}

.grid-stream{
	font-family: "coolvetica";
	letter-spacing: 2px;
	font-size: 20px;
	grid-area: stream;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}

.grid-modi{
 font-family: "coolvetica";
	grid-area: modi;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}
.modi{

	width: 110px;
	height: 110px;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
	
}
.grid-info{
        font-family: "Unispace";
	grid-area: info;
	font-size: 15px;
	grid-area: info;
	color: #fffff;
 animation: rainbow 10s linear infinite;
	padding-top: 5;
}

.grid-title{
	grid-area: title;
	font-family: "Unispace";
	font-size: 20px;
	color: #fffff;
 animation: rainbow 10s linear infinite;
	padding-top: 10;
        width: 100%;
}

.grid-player{
font-family: "coolvetica";
	grid-area: player;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}
.coverbig{
font-family: "coolvetica";
	display: inline;
	padding: 0;
	margin: 0;
	width: 110px;
	height: 110px;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}

.playerimg{
font-family: "coolvetica";
	padding: 0;
	margin: 0;
	width: 40px;
	height: 40px;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}

.stream-live{
font-family: "coolvetica";
	display: inline;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}

.stream-listener{
font-family: "coolvetica";
	display: inline;
	color: #98f5ff;
 animation: rainbow 10s linear infinite;
}