:root {
    --main-color: #ecf0f1;
    --point-color: #ff0000;
    --size: 5px;
  }
  body{
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .loader {
    overflow: hidden;
    width: 100%;
    height: 100%;
   
    top: 0; left: 0;
    display: flex;
    align-items: center;
    align-content: center; 
    justify-content: center;  
    z-index: 0;
  }
  
  .loader__element {
    border-radius: 100%;
    border: var(--size) solid var(--point-color);
    margin: calc(var(--size)*2);
  }
  
  .loader__element:nth-child(1) {
    animation: preloader .6s ease-in-out alternate infinite;
  }
  .loader__element:nth-child(2) {
    animation: preloader .6s ease-in-out alternate .2s infinite;
  }
  
  .loader__element:nth-child(3) {
    animation: preloader .6s ease-in-out alternate .4s infinite;
  }
  
  @keyframes preloader {
    100% { transform: scale(2.5); }
  }



  .loader2 {
    overflow: hidden;
    width: 100%;
    height: 100%;
   
    top: 0; left: 0;
    display: flex;
    align-items: center;
    align-content: center; 
    justify-content: center;  
    z-index: 0;
  }
  
  .loader__element2 {
    border-radius: 10%;
    border: var(--size) solid black;
    margin: calc(var(--size)*2.5);
  }
  
  .loader__element2:nth-child(1) {
    animation: preloader2 .6s ease-in-out alternate .4s infinite;
  }
  .loader__element2:nth-child(2) {
    animation: preloader2 .6s ease-in-out alternate .2s infinite;
  }
  
  .loader__element2:nth-child(3) {
    animation: preloader2 .6s ease-in-out alternate infinite;
  }
  
  @keyframes preloader2 {
    100% { transform: scale(1.8); }
  }




  nav{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    z-index: 10000;
 

  }
  nav a{
    color: black;
    font-size: 2em;
    text-decoration: none;
    padding: 30px;
    margin-bottom: 100px;
  }