@font-face {
	font-family: Emulogic;
	src: url(/fonts/emulogic-webfont.woff2) format("woff2"), url(/fonts/emulogic-webfont.woff) format("woff")
}

@font-face {
	font-family: Shredded;
	src: url(/fonts/shredded-webfont.woff2) format("woff2"), url(/fonts/shredded-webfont.woff) format("woff")
}

/* General Body Style */
body {
  font-family: 'Emulogic', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #1f1f1f;
  color: #fff;
  line-height: 1.6;
}

/* Page Wrapper */
#page-wrapper {
  margin: 0;
  padding: 0;
}

/* Banner Section */
#banner {
background-color: transparent;
    background-image: url(https://gghacks.com/multiverse/images/banner.jpg);
    padding: 67px 20px;
    text-align: center;
    border-bottom: 19px solid #1f1f1f;
}

/* Title Inside Banner */
#banner p {
  color: white;
  margin: 0;
}

#banner b {
  font-size: 40px; /* Increased title size */
  font-weight: bold;
  font-family: 'Arial', sans-serif; /* Original font restored for strokeme */
}

#banner .strokeme {
  color: white;
}

/* Section One */
#one {
  padding: 40px 20px;
  background: #282828;
  text-align: center;
}

/* Spotlights for Articles */
#one .spotlights {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* Individual Article Style */
#one article {
  background-color: #3c3c3c;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 45%;
  box-sizing: border-box;
}

/* Image Styling inside Articles */
#one article img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px; /* Reduced space between images and text */
}

/* Headings Inside Articles */
#one article header.major {
  margin-bottom: 10px; /* Reduced margin */
}

/* Text Inside Articles */
#one article p {
  font-size: 15px;
  font-family: 'Emulogic', sans-serif;
  color: black;
}

/* Section Two (Features Section) */
#two {
  background: #333;
  padding: 20px 20px; /* Reduced padding */
}

ul.features {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.features li {
  width: 30%;
  background-color: #444;
  padding: 9px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: white;
}

ul.features h4 {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
  font-family: 'Emulogic', sans-serif;
}

/* iFrame Styling */
iframe {
  width: 100%;
  height: 220px;
  background-color: #ffffff; /* Changed background to black */
  border: 0;
  border-radius: 8px;
  margin: 20px 0;
}
.strokeme p{
	color: #fff;
	text-shadow: -2px -2px 0#000, 2px -2px 0#000, -2px 3px 0#000, 2px 3px 0#000;
	font-family: Shredded;
	font-size: 40px;
	letter-spacing: 6px;
	text-transform: uppercase
}

.geninfo {
	font-size: 6px;
	text-transform: uppercase;
	-webkit-text-stroke: 0.5px black;

}

 /* Mobile responsiveness */
@media (max-width: 768px) {
    .dl_button {
        width: 50%;
        font-size: 8px;
        margin-top: 40px;
        text-align: center; /* Center the text inside the button */
    }

    ul.features p {
        display: flex;
        justify-content: center; /* Center items within the paragraph */
        list-style: none;
        font-size: 7px;
        padding: 0;
        margin: 0;
        text-align: center; /* Ensures text inside the p is centered */
    }

    ul.features h4 {
        display: flex;
        justify-content: center; /* Center items within the heading */
        list-style: none;
        font-size: 9px;
        padding: 0;
        margin: 0;
        text-align: center; /* Ensures text inside the h4 is centered */
    }

    ul.features li {
        /* You can add specific styles for list items here if needed */
    }

    .strokeme p {
        color: #fff;
        text-shadow: -2px -2px 0#000, 2px -2px 0#000, -2px 3px 0#000, 2px 3px 0#000;
        font-family: Shredded;
        font-size: 16px;
        letter-spacing: 6px;
        text-transform: uppercase;
        text-align: center; /* Center the text inside the p element */
    }
}