/* ========================================================================
   Meyer Reset v2.0 (20110126)
   http://meyerweb.com/eric/tools/css/reset/
   License: public domain
   ======================================================================== */
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed,
   figure, figcaption, footer, header, hgroup,
   menu, nav, output, ruby, section, summary,
   time, mark, audio, video {
     margin: 0; padding: 0; border: 0;
     font-size: 100%; font: inherit;
     vertical-align: baseline;
   }
   article, aside, details, figcaption, figure,
   footer, header, hgroup, menu, nav, section {
     display: block;
   }
   body { line-height: 1; }
   ol, ul { list-style: none; }
   blockquote, q { quotes: none; }
   blockquote:before, blockquote:after,
   q:before, q:after { content: ''; content: none; }
   table { border-collapse: collapse; border-spacing: 0; }
   
/* MY STYLE */
body {
  font-family: "Playfair Display", serif;
  color: white;
  height: 100vh;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
section{
  scroll-snap-align: center;
}

.scene {
  position: relative;
  width: 100%; 
  height: 100vh;
  background: linear-gradient(to bottom, #10326d, #1e447b);
  overflow: hidden;
}
   

.star {
  --size: 2px;
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background: #fff;
  border-radius: 50%;
  animation: twinkle 3s infinite ease-in-out;
  animation-delay: var(--d);
  z-index: 0;
}
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
   }
   
/* MOON */
.scene::after {
  content: "";
  position: absolute;
  bottom: 20%;
  right: 25%;
  width: clamp(120px, 35vw, 200px);
  height: clamp(120px, 35vw, 200px);
  border-radius: 50%;
  background: radial-gradient(circle at center,
  #ffd25d 0%, #f7b733 60%, #e06e53 100%);
  box-shadow:
       0 0 60px rgba(224,110,83,0.5),
       0 0 120px rgba(247,183,51,0.4),
       inset 0 0 30px rgba(255,255,255,0.3);
  transition: transform 0.3s ease,
                 box-shadow 0.3s ease;
  z-index: 1;
  animation: move 5s 1 ease-in-out;
   }
@keyframes move{
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(30px);
  }
}
.scene:hover::after {
  transform: translate(-10px, -8px) scale(1.05);
  box-shadow:
       0 0 100px rgba(224,110,83,0.8),
       0 0 180px rgba(247,183,51,0.6),
       inset 0 0 50px rgba(255,255,255,0.5);
   }
   
   /* WAVE */
.scene::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; 
  height: 40vh;
  background: #1f4ea0;
  clip-path: polygon(
       0% 30%, 10% 35%, 20% 25%, 30% 40%,
       40% 30%, 50% 35%, 60% 25%, 70% 38%,
       80% 28%, 90% 35%, 100% 30%,
       100% 100%, 0% 100%
     );
  z-index: 1;
   }
   
/* Small-screen tweaks */
   @media (max-width: 500px) {
     .scene::after {
      width: 35vw;
      height: 35vw;
      bottom: 20%;
      right: 10%;
     }
     .scene::before {
       height: 40vh;
       clip-path: polygon(
         0% 35%, 15% 40%, 30% 30%, 45% 45%,
         60% 35%, 75% 40%, 90% 30%, 100% 35%,
         100% 100%, 0% 100%
       );
     }
}
/* SECOND SECTION */

.scenee {
  position: relative;
  width: 100%;
  min-height: 105vh;
  height: auto;
  background: linear-gradient(to bottom, #10326d, #1e447b);
}

/* candle body */
.candle {
  --cw: clamp(10px, 2vw, 20px);   /* candle width */
  --ch: clamp(40px, 6vw, 80px);   /* candle height */
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--cw);
  height: var(--ch);
  background: #f5f5dc;
  border-radius: 4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
  z-index: 1;
}
.footer-candles {
  position: relative;
  width: 100%;
  height: 80px;                  
  display: flex;
  justify-content: space-around;
  align-items: flex-end;         
  background: transparent;
  opacity: 0.6;                 
  pointer-events: none;         
  overflow: visible;
}
.footer-candles div:nth-child(1){
  margin-left: 2.3em;
  margin-bottom: 1em;
}
.footer-candles div:nth-child(10){
  margin-right: 2.3em;
  margin-bottom: 1em;
}
.footer-candles div:nth-child(4), .footer-candles div:nth-child(7){
  margin-bottom: 1em;
}

.footer-candles::before {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 50%;
  width: 120%;
  height: 100px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at center bottom,
    rgba(255, 183, 51, 0.3) 0%,
    transparent 70%
  );
  filter: blur(20px);
  z-index: 0;
}
.mini-candle {
  --cw: clamp(6px, 1.5vw, 12px);
  --ch: clamp(24px, 4vw, 48px);
  width: var(--cw);
  height: var(--ch);
  background: #f5f5dc;
  border-radius: 3px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
}
.mini-candle::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  --fw: calc(var(--cw) * 1.4);
  --fh: calc(var(--cw) * 1.4);
  width: var(--fw);
  height: var(--fh);
  background: radial-gradient(
    circle at center,
    #ffeb3b 0%,
    #fbc02d 60%,
    transparent 75%
  );
  border-radius: 50% 50% 40% 40%;
  filter: blur(1.5px);
  animation: mini-flicker 0.2s infinite alternate ease-in-out;
}
@keyframes mini-flicker {
  0%   { transform: translateX(-50%) scale(1); opacity: 0.8; }
  100% { transform: translateX(-50%) scale(1.1); opacity: 0.5; }
}
/*TEXT*/


h1, h2{
    text-align: center;
    font-weight: bold;
    font-size: 2.2em;
    margin-top: 3em;
    color: white;
}
h2{
    margin-top: 0;
    font-size: 2em;
    color: rgb(189, 189, 189);
    padding-top: .7em;
}
.content p:first-of-type{
    text-align: center;
    font-size: 1.4em;
    margin-top: .5em;
    padding: 0;
    color: rgb(189, 189, 189);
}
.content{
    margin: 0 2em;
    color: white;
}
.text{
  margin: 0 2em;
  padding-top: 2em;
  animation: fadeIn 5s ease-out;
}
.text p{
    padding-top: 2em;
    line-height: 1.5em;
}
.content p:first-of-type{
    text-align: center;
    font-size: 1.2em;
    margin-top: .5em;
    padding: 0;
    color: rgb(189, 189, 189);
}
.cursor{
    position: relative;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
      
  }
  /* Animation */
  .typewriter-animation {
  animation: 
    typewriter 5s 1s 1 normal both, 
    blinkingCursor 500ms steps(50) infinite normal;
  }
.content p{
    animation-delay: 5s;
}
  @keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
    
    }

.grid{
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: .5em;
}
figure{
  text-align: center;
  margin-top: 2em;
  border: 2px solid grey;
  padding: .5em;
  animation: fadeIn 5s ease-out;
}
figure img{
  width: 70%;
  height: auto;
}
figcaption{
  font-size: 1em;
  margin-top: .3em;
}
.poem{
  text-align: center;
  margin: 1.5em auto 0 auto;
  border: 2px solid grey;
  padding: .5em;
  background-color: rgb(189, 189, 189 /50%);
  animation: fadeIn 5s ease-out;
}
.poem p{
  color: black;
  background-color: rgb(189, 189, 189, 0.5);
  font-size: 1em;
  padding: .2em 0;
}
.poem p:nth-child(3){
  text-align: right;
  padding-top: .3em;
  padding-right: 2em;
}
.center{
  margin-left: auto;
  margin-right: auto;
}
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@media (min-width:650px) {
h1{
  font-size: 2.6em;
}
.content p{
  font-size: 1.7em;
}
  
h2{
    font-size: 2.4em;
  }
.text{
  margin-left: 6em;
  margin-right: 6em;
}
.text p, figcaption{
  font-size: 1.2em;
}
.poem p{
  font-size: 1.1em;
}

}
@media (min-width:1000px) {
  .content h1{
    font-size: 3.6em;
  }
  .content p{
    font-size: 3em;
  }
    
  h2{
      font-size: 3.4em;
    }
  .text{
    margin-left: 11em;
    margin-right: 11em;
  }
  .text p, figcaption{
    font-size: 1.4em;
  }
  .poem p{
    font-size: 1.3em;
  }
  .grid{
    width:80%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }
  .poem{
    width: 65%;
    height: auto;
  }
  }
@media (max-width: 400px) {
  .content p:first-of-type{
    font-size: 1em;
  }
}