/* Base Style */
.wrapper {
  background-color: #f4f4f9; /* Light gray with a touch of warmth */
  max-width: 95%;
  width: 100%;
  border: 1px solid #ced4de; /* Subtle border for a clean look */
  padding: 10px;
 margin: 0 auto;
  border-radius: 15px; /* rounding for a softer design */
  transition: all 0.3s ease-in-out; /* Smooth resizing */
  padding:10px
}

.banner {
  background-color: #0077b6; /* Professional deep cyan blue */
  width: 100%; 
  max-width: 1200px; 
  height: auto;
  min-height: 80px; 
  padding: 20px;
  box-sizing: border-box; /* Include padding within width and height calculations */
  margin: 0 auto; /* Center the banner */
  color: white;
  border-radius: 10px; 
  text-align: center; /* Center the content */
  transition: all 0.3s ease-in-out; /* Smooth transitions for resizing */
}

.content {
  background-color: #edf2f4; /* Very light gray-blue - creates a neutral tone */
  width: 1100px;
  padding: 20px;
  margin: 20px auto; 
  border: 1px solid #ced4de; 
  border-radius: 10px; /* Consistent with banner */
  transition: all 0.3s ease-in-out; /* Smooth resizing */
}

img {
  border: 2px solid #ced4de; /* Light border around images */
  border-radius: 10px; /* Makes images look softer */
  transition: all 0.3s ease-in-out; /* Smooth hover and size adjustments */
  box-shadow: 0 12px 24px rgba(0, 123, 191, 0.9); /* Stronger shadow on hover */

}

body {
  background: linear-gradient(to bottom, #e0fbfc, #98c1d9); /* Light gradient for professionalism */
  font-family: 'Helvetica', sans-serif; /* Consistent fonts */
  margin: 0;
  padding: 0;
  transition: all 0.3s ease-in-out; /* Smooth adjustments for background changes */
}

div {
  border-radius: 15px; /* Creates consistency in overall design */
  transition: all 0.3s ease-in-out;
}

h1 {
  color: #B0C4DE; /* Strong contrast */
  font-family: 'Helvetica', sans-serif;
  font-size: 60px;
  margin: 10px;
  transition: all 0.3s ease-in-out;
}

h2 {
  color: #118ab2; /* Cyan shade */
  font-family: 'Helvetica', sans-serif;
  font-size: 2em;
  margin: 10px;
  transition: all 0.3s ease-in-out;
}

h3 {
  font-family: 'Helvetica', sans-serif;
  font-size: 2em;
  color: #073b4c; /* Match H1's navy blue */
  transition: all 0.3s ease-in-out;
}

p {
  color: #333; /* Near-black for readability */
  font-family: 'Helvetica', sans-serif;
  font-size: 1.3em;
  line-height: 1.6;
  margin: 10px;
  transition: all 0.3s ease-in-out;
}

/* Media Queries for Responsiveness */

/* For tablets and smaller screens (max-width: 1024px) */
@media (max-width: 1024px) {
  .wrapper {
    width: 90%; /* Use flexible width */
  }

  .banner {
    width: 100%; /* Full width for smaller screens */
    padding: 15px;
    min-height: 70px; /* Maintain visibility */
    font-size: 1.5em; /* Adjust font size for content */
  }

  .content {
    width: 95%; /* Adjust to fit screen */
    padding: 15px;
  }

  h1 {
    font-size: 50px; /* Adjusted font size */
  }

  h2, h3 {
    font-size: 1.7em;
  }
}

/* For smartphones in portrait mode (max-width: 768px) */
@media (max-width: 768px) {
  .wrapper {
    width: 95%; /* Narrower width for small devices */
    border-radius: 10px; /* Slight reduction in roundness */
  }

  .banner {
    width: 100%;
    padding: 10px;
    min-height: 60px; /* Maintain banner visibility */
    font-size: 1.2em; /* Further reduce font size for banner text */
  }

  .content {
    width: 100%; /* Full width for smaller devices */
    margin: 10px auto;
    border-radius: 5px;
  }

  img {
    width: 90%; /* Make images responsive */
    margin: 10px auto;
  }

  h1 {
    font-size: 40px;
  }

  h2, h3 {
    font-size: 1.4em;
  }

  p {
    font-size: 1em;
    line-height: 1.4;
  }
}

/* For extra-small smartphones (max-width: 480px) */
@media (max-width: 480px) {
  .wrapper {
    width: 100%; /* Utilize full width */
    padding: 5px;
  }

  .banner {
    width: 100%; /* Always full width */
    padding: 8px;
    min-height: 50px; /* Keep banner visible without overlap */
    font-size: 1em; /* Smaller font for extremely small screens */
    text-align: center;
  }

  .content {
    width: 100%; /* Full width */
    margin: 5px auto;
    padding: 10px;
    border-radius: 5px;
  }

  img {
    width: 100%; /* Ensure all images fit */
    margin: 5px auto;
  }

  h1 {
    font-size: 30px;
  }

  h2, h3, p {
    font-size: 1em; /* Smaller content fonts */
  }
}

h1.Content_Head {
  font-size: 3.5rem; /* Slightly smaller size */
  font-weight: 600; /* A slightly lighter font weight for a softer effect */
  color: #2c4e68; /* Keep the theme color */
  text-decoration: underline; /* Adds underline for emphasis */
}

.header-banner {
  background-color: #eef4fa; /* A light background color that complements the theme */
  padding: 20px;
  text-align: center;
  border: 2px solid #4b6a8a; /* Border matching theme color */
  border-radius: 10px;      /*  Rounded corners for a smooth design */
  margin: 20px auto;
  width: 80%;               /* Adjust width to fit the design */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
p {
  color: #333;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.3em;
  line-height: 1.6;
  margin: 10px;
  text-align: justify;
}

h2 {
  color: #118ab2;
  font-family: 'Helvetica', sans-serif;
  font-size: 2em;
  margin: 20px 0;
  text-align: center;
}

.video-container {
  margin: 0 auto; /* Center the video container */
  padding: 0;
  width: 1000px; /* Prevent fixed width forcing extra room */
  height: auto; /* Allow dynamic height based on the video itself */
  display: flex;
  align-items: flex-start;
  justify-content: center; /* Center the video horizontally if needed */
  box-shadow: 0px 4px 10px rgba(0, 123, 191, 0.9); /* Subtle shadow */
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
}

/* Reset video styles */
video {
  margin: 0;
  padding: 0;
  display: block; /* Prevent any inline spacing */
  max-width: 100%; /* Ensure responsive sizing */
  height: auto; /* Maintain aspect ratio */
}


/* General styling for game sections */
.game-section {
  text-align: center; /* Center content */
  margin-bottom: 40px; /* Add spacing between game sections */
}

/* Styling for the download button */
.download-button {
  display: inline-block; /* Make it behave like a button */
  background-color: #0077b6; /* Cyan-blue background */
  color: white; /* White text color */
  text-decoration: none; /* Remove underline from link */
  padding: 10px 20px; /* Add padding to make it look like a button */
  border-radius: 8px; /* Rounded corners for the button */
  font-size: 16px; /* Adjust font size for better readability */
  font-weight: bold; /* Make the text bold */
  margin-top: 15px; /* Add space between the video and the button */
  cursor: pointer; /* Make cursor look like a pointer when hovering */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow for a floating effect */
}

/* Hover effect for the download button */
.download-button:hover {
  background-color: #005f87; /* Slightly darker blue for hover effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
}

#back-to-top {
  position: fixed; /* Fixed in the viewport */
  bottom: 20px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
  display: none; /* Initially hidden */
  z-index: 1000; /* Ensures it stays above other elements */
  background-color: #333; /* Button color */
  color: white; /* Text color */
  border: none; /* Remove borders */
  padding: 10px 15px; /* Padding inside the button */
  font-size: 16px; /* Font size for the button text */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer;
  opacity: 0.8; /* Slightly transparent */
  transition: opacity 0.3s ease; /* Smooth hover effect */
}

#back-to-top:hover {
  opacity: 1; /* Fully opaque on hover */
}


/* Floating Navigation Styles */
/* Container for the navigation */
.floating-nav-container {
  position: fixed; /* Makes the navigation float on the screen */
  top: 120px;
  right: 20px; /* Move it to the right corner */
  z-index: 1000; /* Keep it above everything */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align everything to the right */
  gap: 15px; /* Space between the button and the menu */
}

/* Toggle button styling */
.nav-toggle-btn {
  background-color: #0077b6; /* Cyan background */
  color: white;
  border: none;
  border-radius: 50%; /* Circle the button */
  width: 60px; /* Larger width */
  height: 60px; /* Larger height */
  font-size: 2em; /* Larger icon */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-toggle-btn:hover {
  background-color: #005f8c; /* Darker shade for hover */
  transform: scale(1.1); /* Slightly larger on hover */
}

/* Navigation links styling */
.floating-nav {
  display: none; /* Initially hidden */
  background-color: #0077b6; /* Cyan background for menu */
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-width: 180px; /* Minimum size for links */
}

.floating-nav a {
  display: block; /* Each link on a new line */
  color: white;
  text-decoration: none;
  font-size: 1em;
  margin-bottom: 8px;
  padding: 5px;
  transition: background-color 0.3s, transform 0.2s;
}

.floating-nav a:hover {
  background-color: #005f8c; /* Highlight links on hover */
  border-radius: 5px; /* Rounded hover effect */
  transform: translateX(-5px); /* Shift the link slightly left on hover */
}

.fixed-home-btn {
  position: fixed;
  top: 200px; /* Distance from the top */
  right: 20px; /* Distance from the left */
  z-index: 1000; /* Keep it above other elements */
  background-color: #0077b6; /* Blue background */
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px; /* Smooth, rounded edges */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Add a shadow for depth */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.fixed-home-btn:hover {
  background-color: #005f8c; /* Darker blue on hover */
  transform: scale(1.1); /* Slight enlarge effect on hover */
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth; /* Smooth scrolling */
}


/* General Styling for iPhones */

/* Small devices in portrait mode (iPhones and screens max-width: 480px) */
@media (max-width: 480px) {
  body {
    background: linear-gradient(to bottom, #e0fbfc, #98c1d9);
    padding: 10px;
    margin: 0;
    font-size: 16px; /* Adjusted for readability */
  }

  .wrapper {
    width: 100%; /* Fullscreen layout */
    padding: 15px; /* Reduced padding for smaller screens */
    border-radius: 10px; /* Slightly smaller rounding */
  }

  .banner {
    width: 100%; /* Full width for iPhones */
    padding: 10px;
    min-height: 60px; /* Adjust height for visibility */
    font-size: 1.2em; /* Smaller font size for the title */
    text-align: center; /* Ensure proper centering */
    border-radius: 8px; /* Softer layout for smaller devices */
  }

  .content {
    width: 130%; /* Full width for content area */
    padding: 10px;
    margin: 5px auto;
    border-radius: 8px;
  }

  .content img {
    width: 100%; /* Ensure images fit within the screen width */
    height: auto; /* Maintain aspect ratio */
    margin: 10px auto;
  }

  .video-container {
    width: 100%; /* Allow the videos to scale for small screens */
    margin: 0 auto;
    height: auto;
  }

  video {
    width: 100%; /* Videos should also fit the full screen width */
    height: auto; /* Adjust height dynamically */
    display: block;
  }

  h1 {
    font-size: 1.8em; /* Adjust title text size for small screens */
    margin: 15px;
    padding: 5px;
  }

  h2 {
    font-size: 1.4em; /* Smaller heading sizes */
    margin: 10px 0;
  }

  h3 {
    font-size: 1.2em; /* Fit for smaller layouts */
    margin: 10px 0;
  }

  p {
    font-size: 1em; /* Adjust for readability */
    line-height: 1.5;
    margin: 10px;
  }

  /* Buttons */
  .download-button,
  .fixed-home-btn {
    font-size: 0.9em; /* Adjust the size of text within buttons */
    padding: 8px 12px; /* Reduce padding for smaller buttons */
    border-radius: 5px;
  }

  .fixed-home-btn {
    top: 10%;
    right: 10px;
    font-size: 1em; /* Fit the button text better */
    padding: 8px 15px;
    opacity: 90%;
  }

  .download-button {
    margin-top: 8px;
    font-size: 0.9em; /* Slightly smaller button */
    padding: 10px 20px; /* Adjust padding to fit screen */
  }

  /* Floating navigation improvements */
  .floating-nav-container {
    top: 10px;
    right: 10px; /* Closer position for smaller screens */
    gap: 10px;
    opacity: 90%;
  }

  .nav-toggle-btn {
    width: 50px;
    height: 50px; /* Slightly smaller for mobile screens */
    font-size: 1.5em;
    opacity: 100%;
  }

  .floating-nav {
    min-width: 150px; /* Reduce menu width for iPhones */
  }

  .floating-nav a {
    font-size: 0.9em; /* Smaller fonts for gadget-friendly layout */
    padding: 8px 10px;
  }

  /* Back-to-Top Button */
  #back-to-top {
    bottom: 10px; /* Move closer to edge */
    right: 10px;
    font-size: 0.9em; /* Slightly smaller font */
    padding: 8px 12px; /* Compact button size for mobile */
    border-radius: 6px;
  }
}

/* Medium devices in portrait or landscape mode (iPhones and screens max-width: 768px) */
@media (max-width: 768px) {
  body {
    font-size: 17px; /* Slightly bigger font for readability */
  }

  .wrapper {
    width: 95%; /* Adjust wrapper width for tablets */
    padding: 10px;
    border-radius: 10px;
  }

  .banner {
    font-size: 1.5em; /* Larger text for tablets */
    padding: 15px;
    text-align: center;
    min-height: 70px;
  }

  .content {
    width: 95%; /* Flexible layout for content */
    margin: 10px auto;
  }

  h1 {
    font-size: 2em; /* Smaller text for large headings */
    text-align: center;
  }

  h2 {
    font-size: 1.6em; /* Adjust secondary headings */
  }

  p {
    font-size: 1.1em; /* Easy text readability */
    line-height: 1.6;
  }

  img {
    width: 90%; /* Fit images within available space */
    margin: 10px auto;
    height: auto; /* Maintain aspect ratio */
  }

  .download-button {
    font-size: 1em; /* Full control on button readability */
    padding: 12px 25px;
  }

  .fixed-home-btn {
    top: 10%;
    right: 15px; /* Adjust margin for floating home button */
    font-size: 1em;
  }

  .nav-toggle-btn {
    font-size: 1.8em;
    width: 55px;
    height: 55px;
  }

  #back-to-top {
    font-size: 1em; /* Increase for medium devices */
    padding: 10px 15px;
  }
  /* Ensure images and links don't exceed the content wrapper */
  .content a img {
    width: 100%; /* Make the image responsive to its container */
    max-width: 500px; /* Prevent images from being too large */
    height: auto; /* Keep the aspect ratio */
    border-radius: 10px; /* Add slight rounding for aesthetic */
    margin: 10px 0; /* Add spacing around the images for readability */
    display: block; /* Prevent inline behavior and extra space */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow for depth */
    transition: transform 0.2s ease; /* Smooth scale effect on hover */
  }

  /* Center images within the content wrapper */
  .content {
    text-align: center; /* Center all content within this section */
    padding: 20px;
  }

  /* Center h2 headings below each image */
  .content h2 {
    font-size: 1.2rem; /* Adjust to a smaller size for readability */
    margin: 10px 0;
    text-align: center;
  }

  /* Improve interactivity with hover effects for images */
  .content a img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow */
  }

  /* Responsive styling for smaller screens (e.g., for iPhones) */
  @media (max-device-width: 480px) {
    /* Body and HTML adjustments with global padding */
    body, html {
      margin: 0; /* Ensure no extra margins */
      padding: 0; /* Ensure no extra paddings */
      box-sizing: border-box; /* Proper box-sizing for all contained elements */
    }

    /* General padding for the entire wrapper (adjust as needed) */
    .wrapper {
      padding: 0 15px; /* Add padding to left and right for breathing space */
      box-sizing: border-box; /* Include padding in size calculations */
    }

    /* Styling for the banner + left/right padding */
    .banner {
      width: 100%; /* Full width for responsiveness */
      padding: 10px 15px; /* Add left/right padding along with top/bottom */
      box-sizing: border-box; /* Include padding in size */
      background-color: #0077b6; /* Keep banner's background color */
      text-align: center; /* Center-align banner content */
    }

    .banner h1 {
      font-size: 1.8rem; /* Scale text down for smaller screens */
      word-wrap: break-word; /* Prevent text overflow */
      margin: 0; /* Remove unwanted margins */
      color: white; /* Ensure text readability */
    }

    /* Content adjustments for alignment and padding */
    .content {
      padding: 10px 15px; /* Add uniform padding to content container */
    }

    .content a img {
      max-width: 90%; /* Stay proportional to screen size */
      margin: 15px auto; /* Center align with spacing */
      display: block; /* Ensure it aligns properly */
    }

    /* Headings inside the content */
    .content h2 {
      font-size: 1.6rem; /* Adjust size for smaller devices */
      margin: 10px 0; /* Add vertical spacing */
      text-align: center; /* Center the text */
    }

    /* Paragraph styling for responsive readability */
    .content p {
      font-size: 0.9rem; /* Reduce text size for smaller devices */
      line-height: 1.4; /* Improve line spacing */
      margin: 10px 0; /* Ensure proper spacing between lines */
      text-align: justify; /* Optional: text justification */
      text-align-last: left;
    }

    /* Ensure the link container is properly spaced and padded */
    .link-container {
      display: flex;
      flex-direction: column; /* Stack items vertically */
      align-items: center; /* Center all children horizontally */
      justify-content: center; /* Center all children vertically */
      padding: 10px 15px; /* Add padding to the link container */
      gap: 30px; /* Add space between stacked items */
    }

    /* Links (boxes) within small screens */
    .link-box {
      width: 80%; /* Use width closer to image dimensions */
      max-width: 250px; /* Limit size for better visuals */
      margin: 0 auto; /* Ensure the box is centered */
      aspect-ratio: 1 / 1; /* Maintain square size */
      padding: 10px; /* Padding inside the box */
      border-radius: 10px; /* Rounded corners */
      text-align: center; /* Center-align text inside */
      display: flex;
      flex-direction: column; /* Place children vertically */
      justify-content: center; /* Vertically center */
      align-items: center; /* Horizontally center */
      background-color: #0077b6; /* Box background */
      color: white; /* Text color */
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
      transition: transform 0.3s ease, background-color 0.3s ease; /* Interactive transitions */
    }

    .link-box:hover {
      background-color: #005f8c; /* Hover effect */
      transform: scale(1.05); /* Slight enlargement */
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
    }
      .navbar-wrapper {
        padding: 10px 0; /* Reduce padding for smaller screens */
      }

      .navbar {
        flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
        padding: 8px; /* Reduce padding */
        max-width: 100%; /* Ensure navbar doesn't overflow */
      }

      .navbar a {
        margin: 0 10px; /* Minimize spacing */
        font-size: 0.9em; /* Adjust font size */
      }

      .navbar img {
        width: 30px; /* Scale down icons for small screens */
        margin-right: 5px;
      }

      .content {
        padding: 10px;
      }

      .content a img {
        max-width: 100%; /* Ensure the image fits within the viewport */
        margin: 10px auto;
      }
    #gdscript-header {
      margin: 0 auto; /* Ensure no extra space offsets */
      text-align: center; /* Center the text explicitly */
    }
    }
  }