body{
 /* background-color: rgb(2, 0, 8);*/
    overflow: hidden;
    display: cover; 
    height: 100vh;
    margin: 0;
    min-height: 100vh;
  }
   
 
  .water img {
    position: absolute;
    margin: bottom 0;
    margin-right:0;
    height: 100%;
    width: 100%;
    filter: url("#turbulence");
    background-color: rgb(247, 247, 245);
    -ms-transform: rotate(0deg); /* IE 9 */
    transform: rotate(0deg);
  }
  
 
  #title h1{
    position: absolute;
    background-image: linear-gradient(to right, rgba(168,247,247,0.3), rgba(237, 188, 197,0.5));
    padding:10px 0px 10px 0px;
    left: 39.5%;
    width: 100%;
    bottom:-170px;
    font-size: 20px;
    font-family: 'Philosopher', sans-serif;
    font-weight: bolder;
    color: rgb(205, 208, 212); 
    text-shadow: 2px 2px 2px rgb(30, 30, 5);
    animation-name: example;
    animation-duration: 11s;
    animation-iteration-count: infinite;
  } 

  
  @keyframes example {
    from {color: rgba(168,247,247,0.3);}
    to {color:  rgba(237, 188, 197,0.5);}
  } 


.footer{
position: absolute;
width: 100%;
bottom: -15px;
padding:0px 0px -10px 0px;
z-index: 5;
background-color: transparent;
text-align: center;
display: flex;
/*justify-content: center;*/
 align-items: center;

 
}   

.footer img {
position: relative;
padding: 10px ;
width: 30px;
height: 30px;
}

      
.footer h3 {
        position: relative;
        margin-left: 0px;
        padding-left: 50px ;
        padding-right: 100px;
        font-family: 'Philosopher', sans-serif;
        font-size: 14px;
        color: #877477;
        border-radius: 25%;
        font-family: 'Philosopher', sans-serif;
         font-size: 14px;
       
        }   

.footer #t :hover {
background-color: #049ef7;
border-radius: 50%;
transform: scale(1.2);
}

.footer #f :hover {
background-color: #0b0bd2;
border-radius: 50%;
  transform: scale(1.2);
}

.footer #i :hover {
    background-color: #d20ba7;
    border-radius: 50%;
      transform: scale(1.2);
}

    .footer #yt :hover {
        background-color: #ad2509;
        border-radius: 50%;
          transform: scale(1.3);
 }

    .footer #hom {
    font-family:'Philosopher', sans-serif; ;
    color: #a8f7f7;
    font-size: 20px;
    padding: 0px;
    padding-left: 25px;
    margin-left: 0%;
    
}
   .footer #hom :hover  {   
    background-color: rgb(73, 254, 254); 
    transform: scale(1.3);  
    color:rgb(2, 38, 38);          
}

  
  .footer #ingles :hover  {       
    transform: scale(1.3);
    color:rgb(101, 169, 170); 
    }

  a {
    text-decoration: none;
    color: rgb(191, 128, 137);
  }

  a b:hover {
    
    color: rgb(167, 11, 37);
    transform: scale(1.3);
    
  }

  p {
    /* con relative, sparisce il sommario...così posso allungarmi!! con absolute rimane il sommy*/
    position: absolute;
 
    padding-left: 10px;
    margin-top:10px;
    padding-top: 10px;
    margin-left: 0px;
    padding-bottom: 10%;
    font-family: 'Shadows Into Light', cursive;
    border-radius: 18px;
    border-top-right-radius: 90%;
    border-bottom-left-radius: 30%;
    font-size: 19px;
    line-height:19px;
    
     color: #7d5f64;
     font-weight: bolder;
     background-color: rgb(73, 254, 254); 
     transition: all 1.5s ease; 
     text-align: left;
     width: 600px;

    }
  
 
     #works11 p {
       /* con relative, sparisce il sommario...così posso allungarmi!! con absolute rimane il sommy*/
       position: absolute;
  
       padding-bottom:10px;
       margin-top:-25px;
       padding-left: 0px;
       padding-right: 0px;
       font-family: 'Shadows Into Light', cursive;
       border-top-left-radius: 90%;
       border-bottom-right-radius: 30%;
       border-top-right-radius: 18px;
       font-size: 19px;
        line-height:19px;
       color: transparent;
        opacity: 0.7;
        background-color: rgb(244, 203, 209,210);
        background-image: linear-gradient(to right, rgb(191, 128, 137),rgb(246, 231, 233));
        transition: all 0.5s ease; 
        text-align: left;
        width: 600px;
        }
 
 

@media only screen and (max-width: 950px) {

    .footer {
        width: 100%;
        padding: 10px;
    }

  #title h1{
    position: absolute;
    width: 100%;
    font-size: 16px;
  }

  .footer h3 {
    position: relative;
    display: flex;
    font-size: 12px;
    width: auto;
    height: 50px;
  }

  p{
    position: absolute;
    margin: 0px;
    font-size: 19px;
    line-height: 19px;
    width: auto;
  }

  .footer img {
    position: relative;
    display: flex;
    padding: 5px;
    width: auto;
    height: 30px;
    }

}