body 	{
background-image: url("../bg.jpg");
background-color: #3586ff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
text-align: center;
}

img.logo{
position: fixed;
width: auto;
height: auto;
top: 40%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -120px; /* Negative half of width. */
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
display: flex;
justify-content: flex-end;
align-items: flex-end;
min-height: 100vh;
}

.shade {
background: rgba(0,0,0,0.5);
}

.footer {
position: relative;
width: 100%;
background: #3586ff;
min-height: 100px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.social-icon,
.menu {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
}

.social-icon__item,
.menu__item {
list-style: none;
}

.social-icon__link {
font-size: 1.8rem;
color: #fff;
margin: 0 10px;
display: inline-block;
opacity: 0.4;
transition: 0.5s;
}
.social-icon__link:hover {
transform: translateY(-10px);
opacity: 1.1;
}

.menu__link {
font-size: 1rem;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
text-decoration: none;
opacity: 0.6;
font-weight: 300;
}

.menu__link:hover {
opacity: 1;
}

.footer p {
color: #fff;
margin: 15px 0 10px 0;
font-size: 0.8rem;
opacity: 0.4;
font-weight: 300;
}

.wave {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url("../assets/wave.png");
background-size: 1000px 100px;
}

.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;
}
}

   .container {
      width: 90%;
      max-width: 600px;
      padding: 20px;
      border: 2px dashed #888;
      border-radius: 10px;
      background: #1a1a1a;
    }

    h4 {
      text-align: center;
      color: #fff;
      margin-bottom: 15px;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    li {
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 6px;
      background: #3586ff;
      transition: background 0.2s;
    }

    a {
      color: #3586ff;
      text-decoration: none;
      font-weight: bold;
    }

    a:hover {
      text-decoration: underline;
    }