/* 1. The Wrapper */
.content-wrapper {
    position: relative;
    z-index: 2; 
    
    background: linear-gradient(to bottom, #183135 0%, #30636A 100%);
    background-attachment: fixed;    
    background-repeat: no-repeat;
    background-size: cover;
    
    min-height: 100vh; 
    
    width: 100%;
    
    /* --- EXISTING SHADOW (Keep this, it helps the curve pop!) --- */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    padding-bottom: 130px; 

    /* --- NEW: ADD CURVES HERE --- */
    /* 0px on top corners, 60px on bottom corners */
    border-radius: 0 0 60px 60px; 
    
 
    
    /* Optional: If you want a physical border line (outline) */
    /* border-bottom: 1px solid rgba(255,255,255,0.1); */
}

/* 2. The Footer */
.reveal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto; /* Height calculated by JS */
    z-index: 1; /* Sits behind wrapper */
    
    /* Footer Styling */
    background-color: #1e3a3e; /* Slightly lighter/different than body */
    color: #CEE6E9;
    padding-top: 3rem;
    padding-bottom: 2rem;

  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

[data-theme="light"] .content-wrapper {
 background: linear-gradient(to bottom, #CEE6E9 0%, #FFFFFF 100%);
  background-attachment: fixed;   /* keeps gradient fixed while scrolling */
  background-repeat: no-repeat;
  background-size: cover;

  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
}

/* --- FOOTER LINK HOVER EFFECT --- */
.reveal-footer a {
    transition: color 0.2s ease;
}

.reveal-footer a:hover {
    color: #B4F701 !important;
}

    /* --- FALLING TEXT STYLES --- */
    #fallingLogo span {
        display: inline-block;
        white-space: pre; /* Preserves spaces */
        position: relative; 
        will-change: transform;
        color: #ffffff; /* default: white for all letters */
    }

    /* "another | " → first 10 characters */
    #fallingLogo span:nth-child(-n+7) {
        color: #B4F701; /* lime for "another | " */
        font-weight:600;
    }

    #fallingLogo span.fallen {
        /* This class is active when falling */
    }