body{
   
    background-image: url('/img/campo.JPG');
    background-repeat:no-repeat;
    background-color:rgb(194, 212, 40) ;
    background-size: 100%;
    text-align:center;
   margin: 0;
   padding: 0;
}

.mather{
    
    display: flex;
    flex-wrap: wrap;
   box-sizing: border-box;
 justify-content: space-around;
 background-color: #00f7ff00;
 margin:10px;
 border-radius: 3px;
 border:  solid 1px #00f7ff00;
  
}
.ball1{

 
   
}

.ball2{

  
}

.ball3{

  
}

.ball4{
  
}

.imgBall1{
    width: 240px;
}

.imgBall2{
    width: 150px;
   
}

.imgBall3{
    width: 240px;
    background-color: #0033ff;
}


.imgBall4{
    width: 260px;
   
    
}


.imgBallLog{
    width: 100px;
    margin: 0px;
    border-radius: 800px;
    border: solid 0px ;
}
.imgBallLog:hover{

    background-color: linear-gradient(to top right, rgb(0, 0, 0) 0%, #00860b 50%, rgb(0, 0, 0) 100%);
    border-radius: 100%;
    border: solid 30px rgba(43, 43, 43, 0.057); 
    transition: 1s;
   
    box-shadow: 53px 45px 50px rgb(43, 255, 0);
    box-shadow: 5px 5px 60px rgb(255, 0, 204);

   
}



.lucyVideo{

    width: 700px;
    background-color:rgb(195, 212, 40) ;
    border-radius: 100%;
    border: solid 30px rgb(242, 255, 0) ;
    text-align: center;
    margin-right: 20%;
}



.title{
    background-color:rgba(0, 0, 0, 0.293) ;
    color: rgb(0, 110, 255);
    text-align: center;
    width: 100%;
    border-radius: 10px;
    padding: 5px;
    text-decoration: none;
   
  
}
.title :hover{
    background-color:rgb(242, 255, 0) ;
    color: black;
}

.titleBtHome{
    
    background-color: #0033ff;
    color: white;
    border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
    padding: 2px;
    text-decoration: none;
}



  /* Smartphone o piccoli Tablet */
  @media all and (max-width: 480px) { 



    body{
   
        background-image: url('/img/campo.JPG');
        background-repeat: no-repeat;
        background-color:rgb(54, 54, 54) ;
        background-size: 100%;
        text-align:center;
        padding: 0;
        margin: 0;
       
    
    
    }



    .mather{
    
        display: flex;
        flex-wrap: wrap;
       box-sizing: border-box;
     justify-content: space-around;
     background-color: #00f7ff35;
     margin:10px;
     border-radius: 3px;
     border:  solid 1px #00f7ff7e;
    
       
        
    }


    .imgBall1{
        width: 150px;
       
    }
    
    .imgBall2{
        width: 100px;
       
    }
    
    .imgBall3{
        width: 100px;
      
    }
    
    
    .imgBall4{
        width: 140px;
      
       
    }
    
    
    .imgBallLog{
       
    background-color: linear-gradient(to top right, rgb(0, 0, 0) 0%, #00860b 50%, rgb(0, 0, 0) 100%);
    border-radius: 100%;
    border: solid 30px rgba(43, 43, 43, 0.057); 
    transition: 1s;
   
    box-shadow: 23px 25px 20px rgb(43, 255, 0);
    box-shadow: 5px 5px 60px rgb(255, 0, 204);
    }


    .lucyVideo{

        width: 250px;
        background-color:rgb(194, 212, 40) ;
        border-radius: 100%;
        border: solid 30px rgb(18, 18, 18) ;
        text-align: center;
    }

    .title{
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color:rgb(246, 255, 0) ;
        color: rgb(246, 255, 0);
        text-align: center;
        width: 100%;
        border-radius: 10px;
        padding: 0px;
        text-decoration: none;
        margin: 0px;
       
      
    }
    .title :hover{
        background-color:rgb(242, 255, 0) ;
        color: black;
    }
    
    .titleBtHome{
        
        background-color: #00f2ff00;
        color: rgb(0, 26, 255);
        border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
        padding: 2px;
        text-decoration: none;
    }


  }