@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'JANGKUY';    src: url('fonts/jangkuy/JANGKUYFONT-BlackExpanded.eot'); /* IE9 Compat Modes */
    src: url('fonts/jangkuy/JANGKUYFONT-BlackExpanded.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/jangkuy/JANGKUYFONT-BlackExpanded.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/jangkuy/JANGKUYFONT-BlackExpanded.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/jangkuy/JANGKUYFONT-BlackExpanded.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/jangkuy/JANGKUYFONT-BlackExpanded.svg#JANGKUY') format('svg'); /* Legacy iOS */
    font-weight: 900; /* Black/Bold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JANGKUY';    src: url('fonts/jangkuy/JANGKUY-Expanded.eot'); /* IE9 Compat Modes */
    src: url('fonts/jangkuy/JANGKUY-Expanded.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/jangkuy/JANGKUY-Expanded.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/jangkuy/JANGKUY-Expanded.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/jangkuy/JANGKUY-Expanded.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/jangkuy/JANGKUY-Expanded.svg#JANGKUY') format('svg'); /* Legacy iOS */
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JANGKUY';    src: url('fonts/jangkuy/JANGKUY-BoldExpanded.eot'); /* IE9 Compat Modes */
    src: url('fonts/jangkuy/JANGKUY-BoldExpanded.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/jangkuy/JANGKUY-BoldExpanded.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/jangkuy/JANGKUY-BoldExpanded.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/jangkuy/JANGKUY-BoldExpanded.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/jangkuy/JANGKUY-BoldExpanded.svg#JANGKUY') format('svg'); /* Legacy iOS */
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    background-color: #75469f; /* Updated background color */
    color: #fff;
}
h1, h2, h3 {
    font-family: 'JANGKUY', sans-serif;
    font-weight: 700; /* Bold */
    text-align: center
}
p {
        font-size: 18px; /* Default font size for larger screens */

}

/* Token Image Section */
.token-image {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  padding: 50px 20px; /* Spacing around the section */
  background-color: #8f55b1; /* Matching story section background */
}
.token-image img {
  max-width: 300px; /* Set a max size for the image */
  height: auto; /* Maintain aspect ratio */
  display: block;
}
@media screen and (max-width: 768px) {
  .token-image img {
    max-width: 200px; /* Slightly smaller on mobile */
  }
}
/* New Section Styling */
.story-section {
  padding: 50px 20px;
  text-align: center;
  margin: 0 auto; /* Center the section */
  max-width: 820px; /* Set max width */
  box-sizing: border-box; /* Include padding in the width */
}
.story-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #ffda44; /* Highlight color for heading */
}
.story-section p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 0 auto 20px auto;
  max-width: 900px;
}
.story-section .joke {
  font-size: 1.5rem;
    font-family: 'JANGKUY', sans-serif;
    font-weight: 700; /* Black/Bold */
  color: #ffda44;
  margin-top: 30px;
}
h2 {
  font-family: 'JANGKUY', sans-serif;
  font-weight: 700; /* Bold */
  color: #ffda44;
  text-align: center;
  font-size: 2.5rem;
}
/* Background Div */
.background-container {
  width: 100%; /* Full width */
  background-color: #75469f; /* Fallback background color */
  background-image: url('background.png'); /* Background image */
  background-repeat: repeat-x; /* Repeat horizontally */
  background-position: top center; /* Align at the top */
  display: flex;
  justify-content: center; /* Center main image horizontally */
  align-items: center; /* Center main image vertically */
  height: auto; /* Allow height to adjust dynamically */
}
/* Main Image */
.main-image img {
  max-width: 100%; /* Ensure it scales responsively */
  height: auto; /* Maintain proportions */
  display: block;
}
/* Social Media Section *//* Social Media Section */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 30px; /* Space between icons */
  flex-wrap: wrap; /* Wrap icons on smaller screens */
}

.social-icons a {
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
  display: inline-flex;
}

.social-icons img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: invert(33%) sepia(96%) saturate(1520%) hue-rotate(310deg) brightness(100%) contrast(95%);
}

.social-icons img:hover {
  transform: scale(1.2);
}

.social-icons img {
  width: 50px; /* Ensure a fixed size */
  height: 50px; /* Consistent size across browsers */
  object-fit: contain; /* Preserve aspect ratio */
}
/* Responsive Styling for Smaller Screens */
@media screen and (max-width: 768px) {
  .social-icons img {
    width: 40px; /* Slightly smaller size on mobile */
    height: 40px;
  }
  .story-section h2 {
    font-size: 2rem;
  }
  .story-section p {
    font-size: 1rem;
    line-height: 1.6;
  }
  .story-section .joke {
    font-size: 1.2rem;
  }
}