.container-fluid {     
margin: 0;
}
.image-container {
position: relative;
height: auto; /* Set the height based on the aspect ratio */
overflow: hidden;
}
.image-container img {
width: 100%;
height: auto;
object-fit: cover;
}
.content {
position: relative;
z-index: 1;    
}
.row, .footer, .footer-bottom {
font-family: "Copperplate",  Times, serif;
}
/*  Colors from https://www.colorhexa.com/fdfef3 */
/* Accent Colors */
:root {
--dark-gray: #100E0F; /* rgb(16,14,15) */
--medium-gray: #424242; 
--light-buff: #fdfef3;
}
/* Complementary Colors to light-buff */
:root {
--split-complementary-light-purple: #d6c6f8 ;
--split-complementary-light-blue: #c6e8f8;
}
/* Analagous Colors to light-buff */
:root {
--analagous-light-pink: #f8d6c6;
--analagous-light-green: #e8f8c6;
}
/* Tetradic Colors - 90 degrees on the color wheel */
:root {
--tetradic-pink: #f8c6cf;
--tetradic-blue: #c6f8ef;
--tetradic-purple: #c6cff8;
}
/* Body Styles */
body {
background: linear-gradient(to bottom, #100E0F 0%, rgb(31, 27, 36) 50%, rgb(31, 27, 36) 100%);
color: var(--light-buff); /* Assuming you have a variable defined for light-buff color */
}
h2, h3 {
color: var(--light-buff);
}
.header {
background-color: var(--dark-gray);
color: var(--light-buff);
}
.footer, .footer-bottom, .theme-colored {
background-color: #000;
color: var(--tetradic-purple);
}
/* Hyperlinks */
a {
color: var(--split-complementary-light-blue); 
}
a:hover {
color: var(--analagous-light-pink); 
}
/* Followed Hyperlinks */
a:visited {
color: var(split-complementary-light-purple); 
}
/* Menuzord */
/* Text color */
#menuzord-right .menuzord-menu li a {
color: rgb(128,128,128) /* Change this to your desired text color */
}
/* Hover color */
#menuzord-right .menuzord-menu li a:hover {
color: var(--light-buff); /* Change this to your desired hover color */
}
/* Active color */
#menuzord-right .menuzord-menu li.active a {
color: var(--light-buff); /* Change this to your desired active color */
}
/* Background color for hover state */
#menuzord-right .menuzord-menu li a:hover {
background-color: var(--medium-gray); /* Change this to your desired hover background color */
}
/* Background color for active state */
#menuzord-right .menuzord-menu li.active a {
background-color: var(--medium-gray); /* Change this to your desired active background color */
}
/* Background color for stacked menu items */
@media (max-width: 767px) {
#menuzord-right .menuzord-menu {
background-color: var(--dark-gray);
}
}