@import 'https://fonts.googleapis.com/css?family=Roboto';

:root {
    --overlay-bg-color: rgba(255,255,255,.35);
    --default-margin: 10px;
    --default-border-radius: 5px;
}

body {
    font-family: 'Roboto', sans-serif;
}

img {
    border-radius: 5px;
}

.clear {clear: both;}

#frmYoutube > div.post-auth > div {
    margin-top: 1.5em;
}

.star i{		
  font-size: 1.5em;
}

.star i:hover {
  font-size: 1.75em;
}	

.star > .active {
  color: gold;  
}	

.result-header {
    margin-top: var(--default-margin);
    margin-bottom: 5px;
    padding: var(--default-margin);
    position: relative;        
    width: 100%;
    /*background-image:    -webkit-linear-gradient(left, azure, #f06d06);
    background-image:    -o-linear-gradient(left, azure, #f06d06);
    background-image:    linear-gradient(to right, azure, #f06d06);*/
  background:
    linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
    linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
    linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
    linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);    
    border-radius: var(--default-border-radius);
}

.result-header-overlay {
    background: var(--overlay-bg-color);
    border-radius: var(--default-border-radius);
}

.result-image,
.result-artist,
.result-description {
    float: left;    
}

.result-artist,
.result-description {
    margin-left: var(--default-margin);
}

.result-artist{ 
    font-size: 3vh;
    font-weight: bold;   
    min-width: 25%;
}

.result-description {
    width: 60%; 
}

.result-image {      
    max-width: 25%;
}

.result-image > img {      
    width: 100%;    
}