@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'opendyslexic';
	src: url('font.otf');
	font-style: normal;
	font-weight: normal;
} 

.music-player {
	width: 80%;
    height: 340px;
    border-radius: 15px;
    /* padding: 10px 18px; */
	margin:auto;

	
}

#music-icon{
    height: 150px;
    width: 150px;
    border-radius: 50%;
}

.info{
    margin-left: 40px;
    width: 100%;
}

.info h3{
    margin-bottom: 10px;
}

.control-bar{
    margin-top: 30px;
}

.control-bar img{
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
.details {padding:20px; text-align:left; vertical-align:top; line-height:1.4rem;}


.top-banner {
background: url(banner.jpg) center center no-repeat;
width: 100%;
    min-height: 550px;
    height: auto;
    overflow: hidden;
    position: relative;
    background-size: cover!important;
}
.top-banner h1 {
	font-size:50px;
	padding-top:10%;
	padding-left:10%; 
	color:white;
} 
.top-banner p {
	padding-left:10%;
	font-size: 20px;
	color:white;
}

.far {color: lightgrey;}
.far:hover {color:black;}

p {font-size: 1.2rem;}