/* source: https://codepen.io/alvarotrigo/pen/GRxxWdQ */

.footer {
   position: fixed;
   bottom: 0px;
   width: 100%;
   background: #3586ff;
   min-height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

   color: white;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 3.5vw;
 }
 
 .social-icon {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 0;
   flex-wrap: wrap;
   padding-inline-start: 0px;
 }
 
 .social-icon__item{
   list-style: none;
 }
 
 .social-icon__link {
   font-size: 2rem;
   color: #fff;
   margin: 0 20px;
   display: inline-block;
   transition: 0.5s;
 }
 
 .wave {
   position: absolute;
   top: -18px;
   left: 0;
   width: 100%;
   height: 20px;
   background: url("https://isdrage.dk/images/wave.png");
   background-size: 1000px 20px;
 }
 
 .wave#wave1 {
   z-index: 1000;
   opacity: 1;
   bottom: 0;
   animation: animateWaves 4s linear infinite;
 }
 
 .wave#wave2 {
   z-index: 999;
   opacity: 0.5;
   bottom: 10px;
   animation: animate 4s linear infinite !important;
 }
 
 .wave#wave3 {
   z-index: 1000;
   opacity: 0.2;
   bottom: 15px;
   animation: animateWaves 3s linear infinite;
 }
 
 .wave#wave4 {
   z-index: 999;
   opacity: 0.7;
   bottom: 20px;
   animation: animate 3s linear infinite;
 }
 
 @keyframes animateWaves {
   0% {
     background-position-x: 1000px;
   }
   100% {
     background-positon-x: 0px;
   }
 }
 
 @keyframes animate {
   0% {
     background-position-x: -1000px;
   }
   100% {
     background-positon-x: 0px;
   }
 }