/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
  padding-top: 3.5rem;
  font-family: 'Roboto', sans-serif;
  background-color: #F1F1F1; /* Salt: Off White */
  color: #4E4E4E; /* Updated text color for better readability */
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
  .text-center-title {
      width: 100%; /* Take full width to utilize the space */
      margin-bottom: 20px; /* Add space between stacked items */
      justify-content: center; /* Ensure content is centered */
      text-align: center; /* Center the text within the block */
      padding: 5px;
  }
  .theme-card-title .floating {
      width: 90%; /* Adjust width for smaller screens */
  }
  .text-center-title a img {
      max-width: 100%; /* Adjust the Discord widget size on small screens */
  }
  .badge {
      padding: 5px;
      font-size: 12px;
  }
}
@media (max-width: 480px) {
    .server-status {
        padding: 10px;
    }

    .server-status h5 {
        font-size: 10px; /* Even smaller font size for very small screens */
    }

    .badge {
        padding: 3px;
        font-size: 8px;
    }
}
.staff .owl-carousel .owl-item img {
  width: auto;
  display: inline;
  margin-top: 10px;
}

.staff .staff-box {
  text-align: center;
  display: block;
  margin: 5px;
  background-color: rgba(108, 122, 137, 0.5); /* Moss green with 50% transparency */
  border: 1px solid rgba(58, 95, 11, 0.5); /* Kelp green border with 50% transparency */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.staff-box.card {
  position: relative; /* Needed for pseudo-element positioning */
  color: black; 
  overflow: hidden; /* Prevents any overflow from the pseudo-element */
}
.staff-box.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.85; /* Adjust opacity here */
  z-index: -1; /* Positions the background behind the content */
}
.sotkra::before {
  background-image: url('https://static.wikia.nocookie.net/minecraftpocketedition/images/a/a7/Kelp_Plant.gif');
}
.destratus::before {
  background-image: url('https://corn.gg/assets/images/moss.png');
}
.satadrive420::before {
  background-image: url('https://corn.gg/assets/images/raw-gold.png');
}
.kuraz::before {
  background-image: url('https://corn.gg/assets/images/ohio.png');
  background-size: cover; /* Cover ensures the background covers the entire box */
  background-position: center; /* Centers the background within the box */

}
.saltcommander::before {
  background-image: url('https://corn.gg/assets/images/calcite.png');
  background-size: cover; /* Cover ensures the background covers the entire box */
  background-position: center; /* Centers the background within the box */

}

.button-container {
  display: flex;
  justify-content: space-between; /* Centers the buttons in the container */
  gap: 10px; /* Adds some space between the buttons */
}
.votes .vote, .rules .rule {
  text-align: center;
}

.rules .rule {
  padding-bottom: 20px; /* Added padding for better spacing */
}

* {
  box-sizing: border-box;
}

.footer {
  text-align: center;
  background-color: rgba(58, 95, 11, 1);
  color: #F1F1F1; /* Salt: Off White */
  padding: 20px 0; /* Additional padding for better spacing */
}

/* Navbar styles */
.navbar, .navbar-brand, .nav-link {
  background-color: rgba(58, 95, 11, 1);
  color: #F1F1F1; /* Salt: Off White */
}

.nav-link {
  transition: color 0.2s ease-in-out;
}

.nav-link:hover, .navbar-brand:hover {
  color: #F4C430; /* Corn: Saffron */
  border-color: rgba(58, 95, 11, 1) !important;
  text-decoration: none;
}

/* Button styles */
.btn-primary {
  background-color: #3A5F0B; /* Kelp green for text */; /* Corn: Saffron */
  border-color: #F4C430; /* Corn: Saffron */
}

.btn-lg {
  background-color: #3A5F0B; /* Moss Green background */
  color: #F1F1F1; /* Salt White text */
  border: 1px solid #3A5F0B; /* Optional: Kelp Green border for contrast */
}

.btn-lg:hover, .btn-lg:focus {
  background-color: #F4C430; /* Darker Kelp Green for hover/focus states */
  color: #F1F1F1;
  border-color: #8A9A5B; /* Moss Green border color on hover/focus */
}
.btn-sm {
  background-color: #3A5F0B; /* Moss Green background */
  color: #F1F1F1; /* Salt White text */
  border: 1px solid #3A5F0B; /* Optional: Kelp Green border for contrast */
}

.btn-sm:hover, .btn-sm:focus {
  background-color: #3A5F0B; /* Darker Kelp Green for hover/focus states */
  color: #F1F1F1; /* Corn Yellow text color for hover/focus states */
  border-color: #8A9A5B; /* Moss Green border color on hover/focus */
}

.btn-primary:hover {
  background-color: #8A9A5B; /* Moss: Olive Green */
  border-color: #8A9A5B; /* Moss: Olive Green */
}

.btn-outline-secondary a.nav-link, .btn-outline-secondary,{
    color: #F1F1F1; /* Kelp green for text */
    border-color: #F4C430; /* Keeping the corn color for the border */
}

.btn-outline-secondary:hover, .btn-outline-secondary:hover a.nav-link {
    color: #F1F1F1; /* Salt color for text on hover for better contrast */
    background-color: #F4C430; /* Corn color for background on hover */
    border-color: #3A5F0B; /* Kelp green for border on hover */
}

/* Targeting buttons more specifically within .theme-card */
.theme-card .btn, .theme-card .btn-lg,
.theme-card a.btn, .theme-card a.btn-lg {
  color: #FFFFFF !important; /* Force text color to white */
}

/* Addressing hover and focus states explicitly */
.theme-card .btn:hover, .theme-card .btn-lg:hover,
.theme-card a.btn:hover, .theme-card a.btn-lg:hover,
.theme-card .btn:focus, .theme-card .btn-lg:focus,
.theme-card a.btn:focus, .theme-card a.btn-lg:focus {
  color: #FFFFFF !important; /* Ensuring text remains white on hover/focus */
}
/* Hover effects for links */
a:hover {
  color: #F1F1F1; /* Kelp: Dark Olive Green */
  text-decoration: underline;
}

/* Adjusting the .vote and .rule for consistency with theme */
.votes .vote a, .rules .rule a {
  color: #8A9A5B; /* Moss: Olive Green */
}

.votes .vote a:hover, .rules .rule a:hover {
  color: #3A5F0B; /* Kelp: Dark Olive Green */
}
.theme-card {
  position: relative;
  background-color: rgba(138, 154, 91, 0.5); /* Semi-transparent background color for additional styling */
  border: 1px solid rgba(58, 95, 11, 0.5);
  color: #000000; /* This is the text color and will remain opaque */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden; /* Ensures the pseudo-element does not overflow the boundaries of the card */
  padding: 16px; /* Add padding to ensure content does not touch the edges */
}

.theme-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://corn.gg/assets/images/moss.png') center repeat;
  opacity: 0.5; /* Adjust this value to set the transparency of the image */
  z-index: -1; /* Positions the image behind the content of the card */
}
.theme-card-2{
  position: relative;
  background-color: rgba(138, 154, 91, 0.5); /* Semi-transparent background color for additional styling */
  border: 1px solid rgba(58, 95, 11, 0.5);
  color: #000000; /* This is the text color and will remain opaque */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden; /* Ensures the pseudo-element does not overflow the boundaries of the card */
  padding: 16px; /* Add padding to ensure content does not touch the edges */
}
.theme-card-title{
  position: relative;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background color for additional styling */
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #F1F1F1; /* This is the text color and will remain opaque */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden; /* Ensures the pseudo-element does not overflow the boundaries of the card */
  padding: 16px; /* Add padding to ensure content does not touch the edges */
}

.card-body {
  padding: 20px; /* Adequate padding for content */
}

.card-title {
  color: #3A5F0B; /* Kelp: deep green for contrast and readability */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

.container {
  padding-top: 20px; /* Space above the card */
  padding-bottom: 20px; /* Space below the card */
  max-width: 1000px; /* Adjust the max width as needed for your design */
  margin: auto; /* Center the container */
}
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}
.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.theme-card hr {
  height: 2px; /* Increase the height for a thicker line */
  background-color: rgba(138, 154, 91, 0.4); /* Kelp green with custom opacity */
  border: none; /* Removes the default border */
  margin: 20px 0; /* Adds vertical spacing around the hr */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
}
.theme-card-title {
    display: flex; /* Enables Flexbox */
    justify-content: space-between; /* Spaces out children evenly */
    align-items: center; /* Vertically centers the content in each column */
    width: 100%; /* Ensures the card stretches to full container width */
}

.theme-card-title .col-md-4 {
    flex: 1; /* Each column takes equal space */
    display: flex; /* Enables Flexbox within the column */
    justify-content: center; /* Horizontally centers content in the column */
    align-items: center; /* Vertically centers content in the column */
    text-align: center; /* Centers the text inside the column */
}



.theme-card-title .floating {
    width: 80%; /* Adjust the width of the logo if needed */
}
.text-center a img {
    width: 50%; /* Set a smaller fixed width */
    height: auto; /* Maintains aspect ratio */
    max-width: 100%; /* Ensures it does not exceed the width of its container */
}