body {
  font-family: 'Pixelify Sans', Arial, sans-serif;
  overflow-x: hidden;
  background-color: #2e2e2e;
  color: #fff;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #2e2e2e, #0e0e0e);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Pixelify Sans', Arial, sans-serif;
}

.logo-navbar {
  image-rendering: pixelated;
  height: auto;
}

.logo-main {
  image-rendering: pixelated;
  height: 50%;
}

.content-img {
  border-radius: 15px; /* Adjust the value as needed */
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}

.scroll-section {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}

.banner-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.banner-section::before {
  content: "";
  display: block;
  padding-top: 36.36%; /* 1 / (2.75/1) * 100% to maintain the aspect ratio */
}

.banner-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100.25%;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
}

.banner-section-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100.25%;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
  image-rendering: pixelated;
}

.content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.content-overlay h1, .content-overlay p {
  margin: 0;
}

.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.connect-button {
  background-color: #32CD32;  /* Vibrant green color */
  border: 2px solid #008000;  /* Green border */
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;  /* Larger font size */
  margin: 4px 2px;
  cursor: pointer; /* No rounded corners */
  border-radius: 4px; 
}

.connect-button:hover {
  background-color: #28a745;  /* Darker green on hover */
  border-color: #006400;    /* Darker border on hover */
}

.connect-slim-button {
  background-color: #32CD32;  /* Vibrant green color */
  border: 2px solid #008000;  /* Green border */
  color: white;
  padding: 5px 10px;  /* Reduced padding for a thinner button */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;  /* Reduced font size */
  margin: 2px;  /* Reduced margins for better fit */
  cursor: pointer;
  border-radius: 4px;  /* Slightly rounded corners for aesthetics */
  white-space: nowrap;  /* Prevent text wrapping */
  min-width: 100px;  /* Set a minimum width */
}

.connect-slim-button:hover {
  background-color: #28a745;  /* Darker green on hover */
  border-color: #006400;    /* Darker border on hover */
}

.container-background {
  background-image: url('/site-assets/images/background.webp'); /* Image path */
  background-repeat: repeat-y; /* Repeat the background image vertically */
  background-position: top center; /* Align the image at the top center */
  background-size: 100% auto;
  image-rendering: pixelated;
}

.container-main {
  width: fit-content;
  margin: 0 auto;
  background-image: url('/site-assets/images/contentbackdrop1.webp'); /* Image path */
  background-repeat: repeat-y; /* Repeat the background image vertically */
  background-position: top center; /* Align the image at the top center */
  background-size: 100% auto;
  image-rendering: pixelated;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
}

.nav-link-e {
  font-size: 25px;
}

.divider {
  width: 100%;
  height: 10px;             /* Adjust the thickness of the divider */
  background-color: #131313; /* Choose the color of your divider */
}
.nav-gap {
  width: 100%;
  background-color: #131313; /* Choose the color of your divider */
}

.item_icon {
  image-rendering: pixelated;
}

.align-bottom {
  flex-direction: column;
}

.align-bottom img {
  margin-top: auto;
  width: 75%;
}

.align-bottom p {
  margin-top: auto;
}

.shop-box {
  position: relative;
  padding: 20px; /* Optional: Adjust padding as needed */
  padding-top: 0px;
  padding-bottom: 80px;
  border-radius: 15px; /* Adjust the radius to make the corners more or less rounded */
  background-color: rgba(60, 60, 60, 0.8); /* Transparent background color (black with 50% transparency) */
  color: white; /* Optional: Text color inside the box */
  height: auto; /* Optional: Specify height */
  border: 2px solid rgba(0, 0, 0, 0.8); /* Optional: Border with transparency */
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0);
  text-shadow: none;

  transition: background-color 0.5s ease, border 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease, text-shadow 0.5s ease;
}

.shop-box:hover {
  border: 2px solid rgba(216, 169, 40, 1);
  background-color: rgba(160, 140, 89, 0.8);
  box-shadow: 0px 0px 16px rgba(216, 169, 40, 1);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
  transform: translateY(-3%);
}

.shop-purchase-button {
  background-color: #32CD32;  /* Vibrant green color */
  border: 2px solid #008000;  /* Green border */
  color: white;
  padding: 5px 10px;  /* Reduced padding for a thinner button */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;  /* Reduced font size */
  margin: 2px;  /* Reduced margins for better fit */
  cursor: pointer;
  border-radius: 4px;  /* Slightly rounded corners for aesthetics */
  white-space: nowrap;  /* Prevent text wrapping */
  min-width: 100px;  /* Set a minimum width */
  position: absolute;
  bottom: 20px;
  transform: translateX(-50%);
}

.shop-purchase-button:hover {
  background-color: #28a745;  /* Darker green on hover */
  border-color: #006400;    /* Darker border on hover */
}