 
    <style> 
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            /* overflow: hidden;  */
            position: relative;
        }

        /* Video background */
        #bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cover the entire screen */
            z-index: -1; /* Behind other content */
        }

        /* Main centered div */
        .main-div {
			position: relative;
			top: 50px;
		    left: 50%;
			transform: translate(-50%, 0%);
            background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent for visibility */
            padding: 20px;
            border-radius: 8px;
            text-align: left;
            width: 70%; /* Adjust as needed */
			max-width: 80%;
			z-index: 1;
        }

        /* Footer at the bottom, centered */
        footer {
            position: relative;
            top: 100px;
            left: 50%;
            transform: translate(-50%, 0%);
            background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent for visibility */
            padding: 5px 20px;
            border-radius: 8px;
            text-align: center;
            width: 70%; /* Adjust as needed */
			max-width: 80%;
			z-index: 1;
        }
		
		h1 {
            font-size: 3;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }
		
		
        p {
            font-size: 1.1em;
            line-height: 1.25;
            animation: slideUp 1.5s ease-out;
        }
        
        p.newSection{
        	   font-size: 1.5em;
            line-height: 1.25;
				text-align: center;
            animation: slideUp 1.5s ease-out;
            
        }
        
        
        p.ll{
        	   font-size: 1.5em;
            line-height: 1.25;
				text-align: center;
				text-shadow: 2px 2px 2px yellow;
				font-style: italic;
        }
        
        p.ll2{
            font-size: 1.1em;
            line-height: 1.;
				text-align: left;
				background-color: rgb(255, 238, 255);
				border: 2px solid black; 
				
        }
        
        h1 {
        	text-align: center;
        }

        /* Keyframe animations for dynamism */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
		
.patriotic-menu {
    max-width: 800px;
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff; /* White background */
    border: 2px solid #b22222; /* Red border */
    border-radius: 5px; /* Slight rounding for aesthetics */
    margin: 0 auto; /* Center the menu */
    padding: 10px; /* Add some padding to handle wrapping */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

.patriotic-button {
    padding: 10px 20px;
    background-color: #000080; /* Navy blue */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin: 5px; /* Add margin to buttons for spacing when wrapped */
    flex: 1 0 auto; /* Allow buttons to grow but not shrink below content */
}

.patriotic-button:hover {
    background-color: #b22222; /* Red on hover */
}


.text-preview {
  max-width: 600px;
  line-height: 1.6;
  position: relative;
}

/* Show only first few lines by default */
.short-text {
  display: block;
  /* Adjust these 3 values to control how many lines are visible initially */
  max-height: 13.2em;           /* ≈at 3.2 = 3 lines with line-height 1.6 */
  overflow: hidden;
  position: relative;
}

/* Gradient fade-out effect at the bottom */
.short-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, white 60%);
  pointer-events: none;
}

/* The full text is hidden by default */
.full-text {
  display: none;
  max-height: none;
}

/* When checkbox is checked → show full text, hide short version + gradient */
.read-more-toggle:checked ~ .short-text {
  display: none;
}

.read-more-toggle:checked ~ .full-text {
  display: block;
}

/* The "Read more..." / "Show less" links */
.read-more-label {
  color: #0066cc;
  cursor: pointer;
  font-weight: 500;
  display: inline-block;
  margin-top: 0.4em;
}

.read-more-label:hover {
  text-decoration: underline;
}

/* Hide "Show less" when collapsed, hide "Read more" when expanded */
.text-preview .full-text .read-more-label {
  display: none;
}

.read-more-toggle:checked + .short-text + .full-text .read-more-label {
  display: inline-block;
}

.read-more-toggle:checked ~ .read-more-label {
  display: none;
}

/* Optional: nicer checkbox hiding */
.read-more-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}



		
    </style>
