body, html {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'Montserrat', sans-serif;
color: #fff;
background-color: #333;
margin: 0;
padding: 0;
width: 100%;
}
.content {
flex: 1;
}
.content-container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Your existing CSS code continues... */
#navbar {
background-color: #333;
background-color: rgba(51, 51, 51, 0.8); /* 80% opacity */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000; /* high value to keep navbar on top */
}
#navbar ul {
list-style-type: none;
display: flex;
justify-content: center;
margin: 0 auto;
padding: 0;
}
#navbar ul li {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition: background 0.3s;
position: relative;
margin-right: 50px;
}
#navbar ul li:first-child {
margin-right: auto;
padding-top: 5px;
}
#navbar ul li a {
color: #fff;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#navbar ul li a:hover,
#navbar ul li:hover a::before,
#navbar ul li a:hover::before {
color: #f1f1f1;
visibility: visible;
transform: scaleX(1);
}
#navbar ul li a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #f1f1f1;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
#navbar .toggle-button {
position: absolute;
top: 0.8rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
#navbar .toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
#navbar .nav-logo {
font-size: 1.3em;
font-family: 'Great Vibes', cursive;
color: #FFFFFF;
text-decoration: none;
align-items: center;
padding-top: 4px;
padding-left: 10px;
display: inline-block;
}
.parallax-section {
background-image: url("https://images.unsplash.com/photo-1609619385002-f40f1df9b7eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center; /* centers items along the column */
align-items: center; /* centers items along the row */
text-align: center; /* centers text */
}
.video-container1, .video-container2 {
text-align: center;
padding: 10px;
padding-top:20px;
}
.video-container1 {
background-color: #405052;
}
.video-container2 {
background-color: #69654D;
}
.video-wrapper {
display: flex;
justify-content: center;
max-width: 1200px;
margin: auto;
}
.iframe-container {
position: relative;
overflow: hidden;
/* This padding-bottom value will give a 16:9 aspect ratio */
padding-bottom: 50%;
height: 0;
width: 100%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.dropdown-content {
display: none;
}
.dropdown-btn {
background-color: #222222;
color: #ffffff;
padding: 8px 15px;
border: none;
cursor: pointer;
margin-bottom: 10px;
}
.dropdown-btn:focus {
box-shadow: 0 0 0 3px #007bff;
}
.dropdown-btn:hover {
background-color: #000000;
}
.dropdown-btn .active {
background-color: #ccc;
}
.dropdown-content p {
margin-bottom: 10px;
}
.section-color1, .section-color2 {
text-align: center;
padding: 10px;
padding-top:20px;
}
.section-color1 {
background-color: #405052;
}
.section-color2 {
background-color: #69654D;
}
.name-logo {
display: none; /* hidden by default */
}
.wrap-text {
padding: 0 15%;
}
.titlevid {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.titlevid2 {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.linkgallery {
text-align: center;
}
.linkgallery img {
display: inline-block;
margin: 5px;
max-width:14%;
height: 14%;
border-radius: 15px;
}
@media (max-width: 768px) {
iframe {
height: 100%;
}
#navbar ul {
flex-direction: column;
align-items: center;
justify-content: center; /* New rule to center items */
width: 100%; /* set the width of the ul to 100% */
padding: 0; /* reset padding */
margin: 0; /* reset margin */
}
#navbar ul li {
margin-bottom: 10px;
flex: none;
text-align: center; /* center the text within the li elements */
padding: 0; /* reset padding */
margin: 0; /* reset margin */
}
#navbar .nav-links {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
height: 0;
transition: height 1s ease-out;
overflow: hidden;
}
#navbar .nav-links li {
margin-bottom: 1rem;
font-weight: bold; /* makes the text bold */
font-size: 1.5em; /* increases the font size */
justify-content: flex-start; /* left aligns the text */
}
#navbar.responsive .nav-links {
display: flex;
height: 50%;
}
#navbar .toggle-button {
display: flex;
}
#navbar.responsive {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 200;
background-color: #000000; /* Fallback value */
background-color: rgba(0, 0, 0, 0.9); /* Desired value */
align-items: center;
}
#navbar.responsive .toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
}
.name-logo {
display: block; /* visible on small screens */
position: fixed;
top: 10px;
left: 10px;
font-size: 1.3em;
font-family: 'Great Vibes', cursive;
color: #FFFFFF;
text-decoration: none;
align-items: center;
padding-top: 2px;
}
/* Hide the original name link in the list */
#navbar ul li:first-child {
display: none;
}
#navbar {
background-color: #333;
background-color: rgba(51, 51, 51, 0.8); /* 80% opacity */
z-index: 2000; /* higher than the existing z-index value */
height: 45px; /* adjust according to your design */
}
.wrap-text {
padding: 0 10%;
}
}
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
position: relative;
bottom: 0;
width: 100%;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-content {
font-size: 0.9em;
}
.footer-socials {
display: flex;
}
.footer-socials a {
color: #fff;
margin-left: 15px;
text-decoration: none;
}
.footer-socials a:hover {
color: #f1f1f1;
}
#navbar ul li a.nav-logo::before {
content: none;
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
}
.footer-content {
margin-bottom: 20px;
}
.footer-socials a {
margin-left: 0;
margin-right: 15px;
}
.linkgallery img {
display: inline-block;
margin: 5px;
max-width:40%;
height: 40%;
border-radius: 5px;
}
}
/* ─────────── Editor accents (card/section highlights) ─────────── */
[data-role]{
/* set via JS: --hl (solid); we derive soft tints below for BGs and rings */
--hl: var(--acc-1, #60a5fa);
--hl-04: color-mix(in srgb, var(--hl) 4%, transparent);
--hl-10: color-mix(in srgb, var(--hl) 10%, transparent);
--hl-18: color-mix(in srgb, var(--hl) 18%, transparent);
--hl-28: color-mix(in srgb, var(--hl) 28%, transparent);
}
/* Card container accent */
[data-role="card"]{
border-left: 3px solid var(--hl);
box-shadow: 0 0 0 1px var(--hl-10) inset;
border-radius: 12px;
}
/* Card header (summary) gets a soft gradient swash */
[data-role="card"] > summary{
background: linear-gradient(90deg, var(--hl-10), transparent 55%);
}
/* Section container accent (slightly lighter) */
[data-role="section"]{
border-left: 2px solid var(--hl);
box-shadow: 0 0 0 1px var(--hl-04) inset;
border-radius: 10px;
}
/* Section header */
[data-role="section"] > summary{
background: linear-gradient(90deg, var(--hl-04), transparent 55%);
}
/* Stronger emphasis when open */
[data-role][open]{
box-shadow:
0 0 0 2px var(--hl-28),
0 0 0 6px var(--hl-10);
}
/* Form focus rings inside a scoped role use the accent */
[data-role] input:focus,
[data-role] select:focus,
[data-role] textarea:focus,
[data-role] button:focus{
outline: 2px solid var(--hl);
box-shadow: 0 0 0 3px var(--hl-10);
}
/* Little accent chip next to legends (if you use