body{
 /*  background-color: rgb(2, 0, 8);*/
    overflow: hidden;
    display: cover; 
    height: 100vh;
    margin: 0;
    min-height: 100vh;
  }
   
 
  .water img {
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    filter: url("#turbulence");
  }
  

 #title h1{
    position: absolute;
    margin-top:790px;
    margin-left:23%;
    font-size: 20px;
    width: 100%;
    font-family: 'Philosopher', sans-serif;
    text-align: center; 
    font-weight: bolder;
    color: #0c0c0c;
    text-shadow: 2px 2px 2px rgb(0, 6, 0);
    /*animation: fade 2s linear;
    animation-iteration-count: infinite;*/ 
  animation-name: example;
    animation-duration: 11s;
    animation-iteration-count: infinite;
  }
  
  @keyframes example {
    from {color: #050505;}
    to {color: rgb(253, 249, 252);}
  }

  .footer{
    position: absolute;
    width:22%;
    bottom: 0%;
    padding: 0px 0px 0px;
    z-index: 5;
    background-color: rgb(11, 0, 0); 
    z-index: 1;
    display: flex;
   
    }   
     .footer img {      
    background-color: rgb(253, 249, 249);
    padding: 10px ;
     width: 60px;
    height: 60px;
    border-radius: 50%;
    }  

    .footer  #home h3{
    position:  relative;
    padding-left: 20px;
    padding-right: 10px;
    width: 100px;
    height: 30px;
    background-color: rgb(253, 249, 249);
    font-size: 25px;
    z-index: 1;
    border-radius: 50%;
    } 

    
    .footer #home h3:hover {
    background-color: #000609;
    color: white;
    border-radius: 50%;
    }

    .footer  #mail h3{
    position:  relative;
    padding-left: 20px;
    padding-right: 10px;
    width: 280px;
    height: 30px;
    color: black;
    background-color: rgb(253, 249, 249);
    font-size: 25px;
    z-index: 1;
    border-radius: 50%;
    }

    
    .footer #mail h3:hover {
    background-color: #000609;
    color: white;
    border-radius: 50%;
    }
   
    .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);
     }


@media only screen and (max-width: 768px) {
    .footer {
        width: 100%;
        padding: 10px;
    }

    .footer img {
        width: 20px;
        height: 20px;
        margin-top: 10px;
    }

    .footer h3 {
        width: 80px;
        height: 26px;
        display: flex;
        font-size: 12px;
        padding: 5px 10px;
    }

    .footer  #home h3{
    position:  relative;
    padding-left: 20px;
    padding-right: 10px;
    width: 60px;
    height: 20px;
    background-color: rgb(253, 249, 249);
    font-size: 15px;
    z-index: 1;
    border-radius: 50%;
    } 

    
    .footer #home h3:hover {
    background-color: #000609;
    color: white;
    border-radius: 50%;
    }

    .footer #mail h3{
    position: relative;
    padding-left: 20px;
    padding-right: 10px;
    width: 180px;
    height: 20px;
    background-color: rgb(253, 249, 249);
    font-size: 15px;
    z-index: 1;
    border-radius: 50%;
    } 

    
    .footer #mail h3:hover {
    background-color: #000609;
    color: white;
    border-radius: 50%;
    }
}