body {
  font-family: 'rieim', var(--sans101-font);
}
main {
  position: relative;
  margin: 0 auto;
  z-index: 1; /* Places text above the floating letters */
}
      main a {
    color: var(--main-mid);      } 
    main p, h3 {
        text-align: start;
    }

    main p {font-size: 1.4em;}
    main h1 {font-size: 2.5em;}
    main h3 {font-size: 1.8em;text-indent: 30px;}

    html[lang="he"] main p {font-family: hadassah;}
    html[lang="he"] h3, html[lang=he] h1 {font-family: avot; font-weight: 400;}
   
      @font-face {font-family: 'hadassah';src: url('https://otfiles.netlify.app/file/OT Hadasah-VF.ttf');font-weight: 100 900;}
      @font-face {font-family: 'heilig';src: url('https://otfiles.netlify.app/file/OT Heilig.ttf');font-weight:400;}  
            @font-face {font-family: 'heilig_plus';src: url('https://files.otzar.io/file/OT Heilig Plus.woff2');font-weight:400;}  

      @font-face {font-family: 'ksavyad';src: url('https://otfiles.netlify.app/file/OTZAR ksavYadk old real.ttf');font-weight:400;}  
      @font-face {font-family: 'ksavchabad';src: url('https://otfiles.netlify.app/file/OT ksav-chabad.ttf');}  
      @font-face {font-family: 'siddur_classic';src: url('https://otfiles.netlify.app/file/OT Siddur - Classic.ttf');}  
      @font-face {font-family: 'siddur_micro';src: url('https://otfiles.netlify.app/file/OT Siddur - Micro.ttf');}  
      @font-face {font-family: 'siddur_square';src: url('https://otfiles.netlify.app/file/OT Siddur - Square.ttf');}  
      @font-face {font-family: 'yiddish';src: url('https://otfiles.netlify.app/file/OT yiddish Regular-VF.ttf');}  
      @font-face {font-family: 'rieim';src: url('https://otfiles.netlify.app/file/OT Rieim-VF.ttf');} 
      @font-face {font-family: 'gurary';src: url('https://otfiles.netlify.app/file/OT Gurary.ttf');}  
      @font-face {font-family: 'avot';src: url('https://files.otzar.io/file/OT Avot.ttf');}  
      @font-face {font-family: 'talmudis';src: url('https://otfiles.netlify.app/file/OT Talmudis.ttf');}  
      @font-face {font-family: 'rayatz';src: url('https://otfiles.netlify.app/file/OT Rayatz.ttf');} 
      @font-face {font-family: 'rayatz_des';src: url('https://otfiles.netlify.app/file/OT Rayatz-destorted.ttf');}
      @font-face {font-family: 'hatzvi';src: url('https://otfiles.netlify.app/file/OT hatzvi-VF.ttf');}  
      @font-face {font-family: 'comico';src: url('https://files.otzar.io/file/OT%20Rieim-VF.ttf');}
      @font-face {font-family: 'holtz_condensed';src: url('https://otfiles.netlify.app/file/OT-Holtz-VF.ttf') format('truetype-variations') ;font-stretch: condensed;      }
      @font-face {font-family: 'holtz';src: url('https://otfiles.netlify.app/file/OT-Holtz-VF.ttf');}   
      @font-face {font-family: 'vilna';src: url('https://otfiles.netlify.app/file/OT Vilna-VF.ttf');}  
      @font-face {font-family: 'vilna_basic';src: url('https://otfiles.netlify.app/file/OT Vilna Basic-VF.ttf')}
      @font-face {font-family: 'vilna_headline';src: url('https://otfiles.netlify.app/file/OT Vilna Headline.ttf')}    
      @font-face {font-family: 'yaakov';src: url('https://otfiles.netlify.app/file/OT-Yaakov.ttf');}
      @font-face {font-family: 'yiddish';src: url('https://otfiles.netlify.app/file/OT-Yaakov.ttf');}

      @font-face {font-family: 'oyvey_reg';src: url('https://files.otzar.io/file/OT OyVey-Regular.otf');}
      @font-face {font-family: 'oyvey_bold';src: url('https://files.otzar.io/file/OT OyVey - Bold.otf');}
      @font-face {font-family: 'lechaim';src: url('https://files.otzar.io/file/OT Lechaim.otf');}

        
      @keyframes float-up {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) rotate(-30deg);
                opacity: 0;
            }
        }
        
        @keyframes float-3d {
            0% {
                transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
                opacity: 1;
            }
            100% {transform: translate3d(100px, -100vh, 100px) rotateX(90deg) rotateY(180deg);opacity: 0;}
        }
        
      
      
      @keyframes float-clockwise {
        0% {transform: translateY(0) rotate(0deg);opacity: 1;}
        100% {transform: translateY(-100vh) rotate(30deg);opacity: 0;}
      }
      
      
     .fofm {
        display:flex;
        height:100vh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        text-shadow: 0px 0px 105px #000;
        gap:10px;
      }
        
        .letter {
            position: absolute;
            animation-fill-mode: forwards;
            color:#fff;
            font-weight: normal;
            pointer-events: none;
            user-select: none;
            font-family: ot vilna;
            will-change: transform, opacity;
          bottom:0;
          z-index:-2;
        }

       #letters-container {
  width: 100%;
  height: 100%;
  top: 0; 
  left: 0; 
  position: fixed; /* Changed from absolute to fixed */
  transform: perspective(700px) rotateX(20deg) scale(1);
  z-index: -8;
  overflow: hidden;
  pointer-events: none; /* Allows clicks to pass through to the text/links */
  filter: blur(2px) opacity(0.4);
}
      
      .return_home {
        backdrop-filter: blur(10px);
        background:rgba(255, 255, 255, 0.075);
        display: inline-block;
    padding: 0.75rem 1.5rem;
        border-radius: 8px;
        color:white;
        text-decoration: none;
        transition: 0.3s;
        box-shadow: 1px 4px 15px #00000028;
        margin-top:10px;
      }
      
      .return_home:hover {
                background:rgba(255, 255, 255, 0.2);

      }
      
      
   .fofm svg {
      height: 150px; /* bigger */
      width: auto;
      margin: 0px auto;
    }
   .fofm  path {
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 9;
    fill: none;

    stroke-dasharray: 1100 100;
    stroke-dashoffset: 0;
    animation: dashMove 8s linear infinite;
  }

  .fofm h1, .fofm p {
    margin:0;
  }

  @keyframes dashMove {
    to {
      stroke-dashoffset: -1200;
    }
  }