/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  /* Substitua o link abaixo por uma imagem de grama ou céu se preferir */
  background-color: #004a7c; 
  background-image: linear-gradient(180deg, #005a9c 0%, #002a4d 100%);
  
  color: white; /* Texto branco para destacar no fundo escuro */
  font-family: 'Segoe UI', Tahoma, sans-serif;
  margin: 40px;
}
main, .container {
  background: rgba(255, 255, 255, 0.2); 
  /* O nome correto é backdrop-filter */
  -webkit-backdrop-filter: blur(10px); /* Para navegadores como Safari/Chrome antigo */
  backdrop-filter: blur(10px); 
  
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 15px;
  padding: 20px;
}
a {
  color: #00ffcc; /* Um ciano brilhante */
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  text-shadow: 0 0 10px #00ffcc; /* Brilho ao passar o mouse */
}
body {
    background: linear-gradient(180deg, #005a9c 0%, #002a4d 100%);
    background-attachment: fixed; /* Isso faz o fundo ficar parado enquanto você rola o site */
    color: white;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}
main {
    background: rgba(255, 255, 255, 0.15); /* Branco bem clarinho e transparente */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    
    /* Brilho interno para parecer vidro */
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2), 0 10px 30px rgba(0,0,0,0.5);
    
    /* Se o navegador reclamar, ignore, ele vai funcionar no site! */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
main {
    background: rgba(255, 255, 255, 0.1); /* Vidro bem sutil */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    
    max-width: 800px; /* Não deixa o texto espalhar demais */
    margin: 40px auto; /* Centraliza na tela */
    padding: 30px;
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Sombra pesada para dar altura */
}
<div class="container-geral">

    <nav class="barra-lateral">
        <a href="#" class="link-categoria">download.html</a>
        <a href="#" class="link-categoria">aero.html</a>
        <a href="#" class="link-categoria">good hacks.html</a>
    </nav>