body {
     text-align: center;
     font-family:Comic Sans MS;
     font-size:15px;
     padding-inline:100px;
     color:var(--dkest-color);
     background-color:#10041a;
     background-image: url('heart-02-export.png');
     background-size: 90px;
     cursor: url("https://file.garden/aGVgARL4OBP7L4sn/sym599.cur"), auto;
     justify-content: center;
     align-items: center;
      max-width: 1200px;   /* keeps content from stretching too wide */
      margin: 0 auto;      /* centers wrapper */
      padding: 20px;       /* space inside */
}

        :root {
     --dk-color:#683da0;
     --mid-color:#6666ff;
     --lt-color:#b3b3ff;
     --dkest-color:#3b255f;
     --accent:#6c4cdf;
       }



 h1, h3, h5 {
     color:var(--dk-color);
     filter: drop-shadow(2px 2px rgba(10, 10, 12, 0.267))
}
 h2, h4, h6 {
     color:var(--accent);
     filter:drop-shadow(2px 2px rgba(10, 10, 12, 0.267));
}

.container {
  background-color: rgb(253, 235, 255);   
  max-width: 800px;           
  margin: 20px auto;          
  padding: 20px;          
  border-radius: 12px;         
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* soft shadow */
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.15;
}
 
.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 51%, rgb(0, 0, 0) 10%);
background-size: 100% 4px;
will-change: background, background-size; animation: scanlines 0.2s linear infinite;
}
 
@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 10%, rgb(0, 0, 0) 51%); background-size: 100% 4px; }
to {
background: linear-gradient(to bottom, rgb(0, 0, 0) 50%, transparent 51%);
background-size: 100% 4px;
}
}


.video-container {
  position: relative;
  display: inline-block;
  width: 360px;   
  height: 280px;  
  overflow: hidden; 
}


.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;  
  height: 240px;
  transform: translate(-50%, -50%); 
  z-index: 1;
}


.video-container .frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;   
  height: 280px;
  z-index: 2;
  pointer-events: none;
}

    .divider {
      background-color:rgb(66, 66, 211);
      color:white;
      font-size:20px;
      margin-block:30px;
    }

    .parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}