/* Variables */
:root {
    --font-size:1rem;
  }
  .light-mode {
    --navbar-color: #222;
    --navbar-bg-color: #F0F0F0;  
  }
/* rest */
* {
    box-sizing:border-box; 
    outline:none;
    margin:0;
    padding:0;
  }
html, body {
    width: 100%;
    height: 100%;
}
body::after {
  content: '';
  width: 100%;
  height: 10px;
  background-color: white;
  position: fixed;
  top: 0;
  box-shadow: 0px 0px 80px 200px white;
}

ul {
    list-style:none;
  }
  .main-content {
    padding:1rem;
  }
  
  /* Navbar */
  .navbar {  
    display:flex;
    align-items:center; 
    justify-content:center;   
    padding:10px;
    font-size:1.1rem;
    background: transparent;
    color:var(--navbar-color);
    height: 150px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
  .navbar__logo{
    position: fixed;
    top: 20px;
    left: 20px;
    width: 100px;
    min-width: 100px;
    height: 100px;
    min-height: 100px;
    background-image: url(https://i.ibb.co/BZ4qF84/Deportes-Mar-a-Cano-1-removebg-preview.png);
    background-size: cover;
    z-index: 9999;
  }
  .navbar__links { 
    display:flex;
  }
  .navbar__link { 
    padding:0 10px;
    z-index: 9999;
  }
  .navbar__link > a { 
    color:var(--navbar-color);
    text-decoration:none;
    font-size: 1.5em;
  }
  .burger {
    top: 20px;
    display:none;
    margin: 15px;
    z-index: 9999;
  }
  /*  Small device */
  @media screen and (max-width: 580px) {
    .user,#login,.login {
      display: none;
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .navbar__links { 
      overflow:hidden;
      display: flex;
      flex-direction:column;
      position:fixed;
      top:140px;
      right:0;
      background-color: #47a8ea;
      transform: translateX(110%);
      border-radius: 20px;
      opacity: 0;
      transition: 0.3s;
      z-index: 9999;
    }
    .show-nav .navbar__links { 
      
      width:80vw;
      transform: translateX(-12%);
      display: flex;
      transition: 0.3s;
      opacity: 1;
    }
    .navbar__link {    
      transform: translateX(101%);
      transition: all .5s ease-in-out;
    }
    
    .show-nav .navbar__link  {        
      transform: translateX(0);    
    }   
    .navbar__link > a {
      display:block;
      padding:1rem;
      font-size:1.6rem;
      color:var(--navbar-color);  
      transition: all .4s ease-in-out;
    }
    .navbar__link > a:hover {
      padding-left:2rem;
      letter-spacing:5px;
    }
    
    /* Toggle menu */
    .burger {
      display:block;
      position:fixed;
      right: 0;
      padding:0;
      width:45px;
      height:45px;
      border:none;
      background:transparent;
      cursor:pointer;
    }
    .bar {
      display:block;    
      width:45px;
      height:4px;  
      border-radius:3px;
      background:var(--navbar-color); 
      transition: all .5s ease-in-out;   
    }
    .bar::before, .bar::after {
      content:"";
      width:45px;
      height:4px;
      position:absolute; 
      left:0;  
      background:var(--navbar-color); 
      border-radius:3px;    
      transition: all .5s ease-in-out;
    }
    .bar::before {
      transform:translateY(-12px)
    }
    .bar::after {
      transform:translateY(12px)
    }
    .show-nav .bar {
      width:0;
      background:transparent;    
    }
    .show-nav .bar::before {
      transform:rotate(45deg);
    }
    .show-nav .bar::after {
      transform:rotate(-45deg);
    }
    
    /* Bonus - Animations */
    .show-nav .first {      
      transition: all 1s ease-out;
      display: flex;
      justify-content: center;
    } 
    .show-nav .second {      
      transition: all 1.1s ease-out;
      display: flex;
      justify-content: center;
    } 
    .show-nav .third {      
      transition: all 1.2s ease-out;
      display: flex;
      justify-content: center;
    } 
    .show-nav .four {      
      transition: all 1.3s ease-out;
      display: flex;
      justify-content: center;
    } 
    .show-nav .fifth {      
      transition: all 1.4s ease-out;
      display: flex;
      justify-content: center;
    }
  }
  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
  }
  #login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    margin: 10px;
    border: 1px solid black;
    border-radius: 50%;
  }
  .red{
    color: #ff3434;
  }
  .login {
    text-decoration: none;
    color: #3b3b3b;
  }
  @media screen and (min-width:768px) {
    .navbar__link > a::after {
      display:block;
      content:"";
      width:0;
      height:1px;
      background:var(--navbar-color);
      transition:width .4s;
    }
    .navbar__link:hover > a::after {
      width:100%;
    }
  }
  li.navbar__link.four {
    display: none;
  }
  @media screen and (max-width:580px) {
    li.navbar__link.four {
      display: flex;
    }    
  }
/* Estilo para el cuadro rojo */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Color rojo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; /* Asegura que esté por encima de todo */
  display: none; /* Inicialmente oculto */
  transition: background-color 0.3s, opacity 0.3s;
}

.red-box {
  width: 100px;
  height: 100px;
  background-color: transparent;
}

.overlay.active {
  display: flex;
}