.farmerBackground {
    
   
    font-family: 'myFirstFont';
    color: #FFF;
    font-size: 1.4em;
    padding:0 0.5em 0 0.5em; 
    margin:0 0 1em 0;
}

.farmerBackground h1
{
    font-size:2.4em;
    color:white;
    
   -webkit-text-fill-color: #288dc1; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: white;

}

img{
    
    max-width:300px;
}

/*.farmer {position:fixed;bottom:0px; right:0px; width:40%; z-index:-1;}*/

.circle_player_cearc {
    float:right;
    clear:right;
}

.oran_lyrics{
    color: #ffaa00;
    font-size: 1.1em;
    float:right;
    clear:both;
    min-width:200px;
    text-align:center;
    margin-bottom:1em;
}

.song_animation{
    clear:both;
    float:right;
    width:300px;
    
    max-width:300px;
}

    .song_animation img {
        
        /*max-width:120px;*/
    }


    .song_animation::after { 
    content: "";
    clear:both;

}
    .left_holder
    {
        width:120px;
        
         float:left;
    }

    .right_holder
    {
        width:120px;
        
        float:right;
    }

    .cow
    {
        float:left;
         
    }
    .horse
    {
        float:left;
         
    }
    .hen
    {
        float:left;
         
    }

    .pig
    {
        float:right;
        
    }
    .sheep
    {
        float:right;
        
    }
    .duck
    {
        float:right;
        
    }

    .farmer
    {

        float:right;
    }

/* Mobile to Tablet Portrait
===============================*/

@media (max-width: 480px) {
    .farmerBackground {
    
        
        padding:3em 0.5em 0 0.5em; 
        margin:0 0 1em 0;
    }
        .farmerBackground h1
{
    font-size:1.8em;
    color:white;
    
   -webkit-text-fill-color: #288dc1; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;

}

   

  .circle_player_cearc {
    float:none;
    margin:0 auto 1em auto;
    width:200px;
    
    }

  .oran_lyrics{
    float:none;
}
   #mainContent
    {
        width:100%;

    }

    .song_animation{
    clear:none;
    float:none;
    margin:0 auto 0 auto;
    position:fixed;
    bottom:0;
    right:0;
    max-width:120px;
}

   .song_animation img {
        float:right;
        max-width:120px;
    }

}

@media (min-width: 480px) and (max-width: 650px) {

    .farmerBackground {
    
       
               padding:3em 0.5em 0 0.5em; 
 
        margin:0 0 1em 0;
    }

    .farmerBackground h1 {
            font-size: 1.7em;
            -webkit-text-stroke-width: 1px;
        }

  .circle_player_cearc {
    float:none;
    margin:0 auto 1em auto;
    width:200px;
    
    }

 

  .oran_lyrics{
    clear:both;
    float:none;
}
   #mainContent
    {
        width:100%;

    }

   .song_animation{
    clear:none;
    float:none;
    margin:0 auto 0 auto;
    position:fixed;
    bottom:0;
    right:0;
    max-width:200px;
}

   .song_animation img {
        float:right;
        max-width:200px;
    }
}


/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 650px) and (max-width: 1000px) {
    .farmerBackground
    {
        
       
        
        font-size: 1.2em;

        padding:3em 1em 3em 1em;
    }

    .farmerBackground h1 {
            font-size: 2em;
            -webkit-text-stroke-width: 1px;
        }

    #mainContent
    {
        width:100%;

    }
}