/* style.css */

/* Alap stílus – sötétebb háttér, hogy a hó jobban látszódjon */
:root {
    --snowflake-color: #ffffff;
    --snowflake-min-size: 8px;
    --snowflake-max-size: 18px;
    --snowflake-min-duration: 6s;
    --snowflake-max-duration: 12s;
    --snowflake-sway: 30px; /* oldalirányú billegés */
  }
  
  html, body {
    height: 100%;
    margin: 0;
  }
  
  body {
    background: #00a9a5;
    color: #092327;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   /* overflow: hidden;  ne jelenjen meg görgetősáv a hó miatt */
    overflow-y: auto; /* függőleges görgetés engedélyezve */
  }
  
  /* Tartalom */
  .content {
    position: relative;
    z-index: 1; /* a hó alatt/felett megjelenítéshez módosítható */
    padding: 2rem;
  }
  
  /* Hó konténer, a hópelyhek ide kerülnek */
  #snow-container {
    position: fixed;
    inset: 0;  /* top/right/bottom/left: 0 */
    pointer-events: none; /* ne zavarja a kattintást */
    z-index: 0;
  }
  
  /* Hópelyhek */
  .snowflake { 
    position: absolute; 
    top: -10vh; 
    color: white; 
    font-size: 20px; 
    animation: fall 10s linear infinite; 
  }
  
  /* Lefelé hullás */
  @keyframes fall {
    0%   { transform: translateY(-10vh); }
    100% { transform: translateY(110vh); }
  }
  
  /* Oldalirányú billegés */
  @keyframes sway {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(var(--snowflake-sway)); }
    100% { transform: translateX(0); }
  }
  
  /* Finom elhalványulás a végén */
  @keyframes fade {
    0%   { opacity: 0.9; }
    85%  { opacity: 0.9; }
    100% { opacity: 0.0; }
  }

/* A lap aljan levö ho */

 /* #snowCanvas { 
    display: block; 
    position: fixed; 
    inset: 0; } */

#snowCanvas { 
      position: fixed; /* mindig a háttérben marad */ 
      top: 0; 
      left: 0;
      width: 100%;
      height: 100%; 
      pointer-events: none; /* ne takarja el a kattintásokat */ 
      z-index: 9999; /* ha biztosan felül akarod */ 
}