/* 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 {
  background-color: #030954;
  color: #FFD700;
  font-family: 'Yusei Magic';
  font-size: 1.2rem;
  

}

.loader-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }


.spinner {
            width: 60px;
            height: 60px;
            border: 5px solid rgba(255, 255, 255, 0.1);
            border-top: 5px solid #ff8844;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
  /* HTML: <div class="grid-lines"></div> */
.grid-lines {
  --s: 80px;  /* control the size of the grid */
  --n: 4;     /* control the granularity */
  --t: 2px;   /* the thickness */
  --g: 10px;  /* the gap between dashes */
  
  --c:#556270 25%,#0000 0;
  background: 
    conic-gradient(at var(--g) var(--t),var(--c))
     calc((var(--s)/var(--n) - var(--g) + var(--t))/2) 0/
     calc(var(--s)/var(--n)) var(--s),
    conic-gradient(from 180deg at var(--t) var(--g),var(--c))
     0 calc((var(--s)/var(--n) - var(--g) + var(--t))/2)/
     var(--s) calc(var(--s)/var(--n));
  /* you probably don't need to set any size in your case */
  width: calc(round(down,100%,var(--s)) + var(--t));
  height: calc(4*var(--s) + var(--t));
}

/* HTML: <div class="spiral"></div> */
.spiral {
  --b: 15px;  /* border thickness */
  --s: 300px; /* preferred size shape */
  --c: #CD8C52;

  width: round(var(--s),4*var(--b));
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    repeating-radial-gradient(calc(2*var(--b)) at top,#0000 -1px,var(--c) 0 calc(50% - 1px),#0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%, 
    repeating-radial-gradient(calc(2*var(--b)) at bottom,var(--c) -1px,#0000 0 calc(50% - 1px),var(--c) 50% calc(100% - 1px)) 50% 0;
  background-size: 150% 50%;
  background-repeat: no-repeat;
  mask: 
    radial-gradient(calc(1.5*var(--b)) at calc(100% - var(--b)/2) 0, #0000 calc(100%/3), #000 calc(100%/3 + 1px) 110%, #0000 0) calc(50% + var(--b)/2) 
     100%/calc(3*var(--b)) 50% exclude no-repeat, 
    conic-gradient(#000 0 0);
}

body header div#heading{
    display: flex;
  justify-content: center;
  align-items: baseline;
  
  }


body header h1 {
  text-align: center;
  text-shadow: #ffcc00 1px 0 10px;
  display: inline-block;
  
}
body section {
  margin-left:3rem;
  
  }
body section p{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  
}

body section p::first-letter {
  
    font-size: 3.0rem;
  }

body section p span {
  font-size:1.8rem;
  
}

body section p span:nth-child(odd){
  align-self: flex-start;
  text-align: left;
}

body section p span:nth-child(even){
  align-self: flex-end;
  text-align: right;
}

body section.entrance-section{
  display: flex;
  justify-content: center;
  align-items: center;
}
.lfp-overlay{
    color: #c3854e;
    font-size: 5rem;
    text-align: center;
  }
  .hidden {
    display: none !important;
}