@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');


:root {
    --color-dark: #222222;
    --color-light: #eeeeee;
    --color-style: #010111;
}

/* BASE STYLES */

html {
    background-color: var(--color-style);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
    scroll-behavior: smooth;
}

body {
    font-weight: 300;
    font-size: 16px;
    height: 100vh;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--color-light);
}

div.main {
    position: absolute;
    width: 100%;
    padding-top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 36px;
    z-index: 10;
}

hr {
    width: 256px;
    background-color: var(--color-light);
    margin: 20px auto;
}

footer {
    position: absolute;
    display: flex;
    justify-content: center;
    top: auto;
    bottom: 14vh;
    width: 100%;
    z-index: 10;
}

section{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 5;
  }

section .air{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('/static/images/wave.png');
    background-size: 1000px 100px
  }

section .air.air1{
    animation: wave 30s linear infinite;
    z-index: 1000;
    opacity: 1;
    animation-delay: 0s;
    bottom: 0;
  }

section .air.air2{
    animation: wave2 15s linear infinite;
    z-index: 999;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10px;
  }

section .air.air3{
    animation: wave 30s linear infinite;
    z-index: 998;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 15px;
  }

section .air.air4{
    animation: wave2 5s linear infinite;
    z-index: 997;
    opacity: 0.7;
    animation-delay: -5s;
    bottom: 20px;
  }

@keyframes wave{
    0%{
      background-position-x: 0px; 
    }
    100%{
      background-position-x: 1000px; 
    }
}
@keyframes wave2{
    0%{
      background-position-x: 0px; 
    }
    100%{
      background-position-x: -1000px; 
    }
}

@media (max-width: 768px) {                                                                                                               
    div.main {                                                                                                                            
        font-size: 24px;                                                                                                                  
    }                                                                                                                                     
}                                                                                                                                         
                                                                                                                                          
.moon {                                                                                                                                   
  width: 100px;                                                                                                                          
  height: 100px;                                                                                                                         
  border-radius: 50%;                                                                                                                   
  background-color: var(--color-light);                                                                                                 
  box-shadow: 0 0 20px 10px rgba(238, 238, 238, 0.5);                                                                                    
  margin-bottom: 20px;                                                                                                                  
}                                                                                                                                         
                                                                                                                                          
@keyframes twinkle {                                                                                                                      
  0% {                                                                                                                                  
      opacity: 0;                                                                                                                       
  }                                                                                                                                     
  50% {                                                                                                                                 
      opacity: 1;                                                                                                                       
  }                                                                                                                                     
  100% {                                                                                                                                
      opacity: 0;                                                                                                                       
  }                                                                                                                                     
}                                                                                                                                         
                                                                                                                                          
#stars, #stars2, #stars3 {                                                                                                                
  position: absolute;                                                                                                                   
  top: 0;                                                                                                                               
  left: 0;                                                                                                                              
  width: 100%;                                                                                                                          
  height: 100%;                                                                                                                         
  z-index: 0;                                                                                                                           
}                                                                                                                                         
                                                                                                                                          
#stars::after, #stars2::after, #stars3::after {                                                                                           
  content: "";                                                                                                                          
  position: absolute;                                                                                                                   
  width: 1px;                                                                                                                           
  height: 1px;                                                                                                                          
  background: white;                                                                                                                    
  box-shadow:
      5vw 95vh #fff, 92vw 15vh #fff, 10vw 20vh #fff, 80vw 5vh #fff, 50vw 50vh #fff,
      30vw 80vh #fff, 75vw 70vh #fff, 15vw 45vh #fff, 60vw 30vh #fff, 40vw 65vh #fff,
      88vw 85vh #fff, 22vw 55vh #fff, 58vw 25vh #fff, 73vw 40vh #fff, 95vw 60vh #fff;                                                        
  animation: twinkle 2s infinite;                                                                                                       
}                                                                                                                                         
                                                                                                                                          
#stars2::after {                                                                                                                          
  width: 2px;                                                                                                                           
  height: 2px;                                                                                                                          
  box-shadow:
      18vw 88vh #fff, 95vw 23vh #fff, 8vw 12vh #fff, 33vw 44vh #fff, 67vw 78vh #fff,
      49vw 62vh #fff, 82vw 53vh #fff, 25vw 31vh #fff, 55vw 5vh #fff, 70vw 92vh #fff;                                                   
  animation-delay: 0.5s;                                                                                                                
  animation-duration: 3s;                                                                                                               
}                                                                                                                                         
                                                                                                                                          
#stars3::after {                                                                                                                          
  width: 3px;                                                                                                                           
  height: 3px;                                                                                                                          
  box-shadow:
      10vw 10vh #fff, 80vw 20vh #fff, 30vw 70vh #fff, 90vw 85vh #fff, 50vw 40vh #fff;                                                     
  animation-delay: 1s;                                                                                                                  
  animation-duration: 4s;                                                                                                               
}