/* Common styles for all pages */
html,
body {
  height: 100%;
  margin: 0;
  font-family: 'arial';
  /* Modern font */
}

/* Common styles for all pages end */

body {
  background-image: linear-gradient(to right top, #06002c, #0a0226, #0c0521, #0d071c, #0d0a16, #110d19, #14101d, #161220, #1c142c, #241438, #2e1342, #3a0f4c);
  /* Ensure full viewport height */
  display: flex;
  flex-direction: column;
  position: relative;
}



/* Header */
.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
}

.site-header>* {
  flex: 1;
}

.site-header div {
  width: auto;
  /* Adjust to 'auto' to give more space to navigation */
}

/* Navigation Menu */
.nav-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.nav-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.nav-list li {
  margin: 0 10px;
  /* Reduced margin */
}

.nav-list li a {
  color: #f5f5f5;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 1.8rem;
  /* Slightly reduced font size */
  font-weight: bold;
}

.nav-list li a:hover {
  color: #4db8ff;
}

.logo {
  width: 7vw;
  min-width: 175px;
  /* Responsive width */
  height: auto;
  /* Maintain aspect ratio */
  padding: 5px;
  /* Add some space around the logo */
  transition: width 0.3s ease;
  /* Smooth transition for size changes */
}

.login-header {
  display: flex;
  justify-content: right;
  align-items: center;
}

/* Navigation end*/
/* Header END*/


/* Main content - flex layout */
main {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  /* Allow main content to expand and push the footer down */

  padding: 25px;
}

.leftMain {
  display: flex;
  flex-direction: column;
  /* Stack child elements vertically */
  flex: 0 1 50%;
  /* Allow shrinking, base size is 50% */

  box-sizing: border-box;
  /* Include padding and border in width calculation */
  height: 100%;
  /* Add height to allow space for aligning children */
  padding: 25px;
}

.rightMain {
  display: flex;
  flex-direction: column;
  /* Stack child elements vertically */
  flex: 0 1 50%;
  /* Allow shrinking, base size is 50% */

  box-sizing: border-box;
  /* Include padding and border in width calculation */
  height: 100%;
  /* Add height to allow space for aligning children */
  padding: 25px;



}

.heroImage-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centers children vertically */
  justify-content: center;
  /* Centers children horizontally, if needed */
  flex: 3;
  /* Takes up more space */
}


.heroImage {

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  /* Maintain the image's aspect ratio */
  height: 100vh;
  /* Full height of the viewport */
  z-index: 1;
  /* Below header and footer but above the body background
  /* Adjusts image size to fit container */
}

/* Main content - flex layout end */






.gamesHighlight-section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 20px;
  height: auto;
  width: auto;
  margin-top: auto;
  /* Pushes this container to the bottom */

}

.box {
  height: auto;
  width: auto;
  padding-bottom: 25px;
 
}


.heroWriting-section {
  width: 65%;
  margin-top: auto;
  padding-bottom: 50px;
  color: white;
}

.heroWriting-section h1 {
  font-size: calc(2.15rem + 1vw);
  font-weight: bold;
  margin-bottom: 25px;
}

.heroWriting-section div p {
  line-height: 1.5;
  font-size: calc(17.2px + 0.25vw);
  margin-bottom: 20px;
}

.heroWriting-section button {
  font-size: calc(25.8px + 0.25vw);
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  background-color: #4db8ff;
  color: rgb(0, 0, 0);
  transition: background-color 0.3s ease;
}


/* main - box Container */
.left-box-container {
  display: flex;
  flex-direction: row;
  /* Stack child containers horizontally */
  margin-top: auto;
  /* Pushes this container to the bottom */
}


.right-box-container {
  display: flex;
  justify-content: right;
  /* Aligns content to the left */
}


.game-image {
  width: 250px;
  height: auto;
  /* Adjusts image size to fit container */
}
/* Main Content Sections end */



.site-footer {
  display: flex;
  justify-content: space-between;
  /* Distribute space between items */
  align-items: center;
  /* background: #1c1c1c;*/
  padding: 15px;
  flex-wrap: wrap;
  /* Allow items to wrap on smaller screens */
  color: white;
}

.legal-section {
  order: 1;
  /* Ensure this is the first item */
  flex: 1;
  /* Take up space */
  text-align: left;
  /* Align text to the left */
}

.site-footer p {
  order: 2;
  /* Ensure this is the second item */
  flex: 1;
  /* Take up space */
  justify-content: center;
  /* Center the icons */
  display: flex;
}

.social-icons {
  order: 3;
  /* Ensure this is the third item */
  flex: 1;
  /* Take up space */
  text-align: right;
  /* Align text to the right */
}

/* social media */
.social-icon {
  flex: 1;
  /* Takes up less space */
  height: 0.85vw;
  min-height: 25px;
  /* Fixed height for all icons */
  width: auto;
  /* Auto width to maintain aspect ratio */
  margin: 0 0.30vw;
  /* Adjusts margin around icons */
  transition: transform 0.3s ease;
  /* Smooth transition for hover effect */
  filter: invert(1);
}

.social-media ul {
  list-style-type: none;
  /* Removes the default bullet points */
  padding: 0;
  /* Resets default padding */
  margin: 0;
  /* Resets default margin */
  display: flex;
  /* Aligns items in a row */
  justify-content: center;
  /* Centers the items horizontally */
}

.social-media li {
  margin: 0 10px;
  /* Adjusts spacing between items */
}

.social-media a {
  display: inline-block;
  /* Aligns the icon properly within the link */
}

.social-icon:hover {
  transform: scale(1.1);
  /* Slight increase in size on hover for effect */
}

/* social media end */



.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: rgb(255, 0, 0);
  border-radius: 10px;
}




/* Responsive Design */
@media screen and (max-width: 800px) {
  .site-header {
    justify-content: space-between;
    /* Space out elements */
  }

  .image-header {
    order: 2;
    /* Center the logo */
    flex-grow: 0;
    /* Prevent logo from growing */
    margin-bottom: auto;
  }

  .nav-header {
    order: 1;
    /* Position navigation last */

  }


  .login-header {
    order: 3;
    /* Position login header last */
  }

  .logo {
    width: 10rem;
    /* Slightly larger on smaller screens */
    min-width: 125px;
    margin: 0 auto;
    /* Centering the logo */
  }


  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 60px;
    /* Add space for the toggle button */
  }

  .toggle-button {
    display: flex;
    position: absolute;
    left: 10px;
    top: 50px;
    z-index: 100;
  }


  .toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: #fff;
    /* Change to match your design */
    border-radius: 10px;
    transition: all 0.3s ease;
  }

  /* Transform bars into 'X' when active */
  .toggle-button.active .bar:nth-child(2) {
    opacity: 0;
  }

  .toggle-button.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .toggle-button.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .nav-list {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    /* Smooth transition */
  }

  .nav-list.active {
    display: flex;
  }

  .nav-list ul {
    width: 100%;

    flex-direction: column;
    text-align: left;
  }

  .nav-list li {
    margin: 5px 0;
    /* Adjust for vertical layout */
  }

  .nav-list ul li {
    text-align: left;
    width: 100%;
    /* Full width for each item */
  }

  .nav-list ul li a {
    padding: 0.5rem 1rem;
    display: block;
    /* Make the entire area clickable */
    width: 100%;
    /* Full width for links */
    transition: background-color 0.3s ease;
    /* Smooth transition for hover */
  }

  .nav-list ul li a:hover {
    background-color: #4db8ff;
    /* Change for hover effect */
  }
}



/* Adjust main content for mobile */
@media screen and (max-width: 800px) {

  main {
    padding: 0 20px;
    /* Add padding to the left and right */
    box-sizing: border-box;
    /* Include padding in the width calculation */

  }

  .heroWriting-section {
    width: 100%;
    /* Full width */
    padding: 20px;
    /* Add padding for smaller screens */
    margin-top: 2.5rem;
  }

  .heroWriting-section h1 {
    font-size: 6vw;
    /* Larger size for smaller screens */
  }

  .heroWriting-section div p {
    font-size: 3vw;
    /* Adjust as needed for readability */
  }

  .heroWriting-section button {
    font-size: 4vw;
    /* Adjust button font size */
  }

  .gamesHighlight-section {
    width: 100%;
    /* Full width */
    padding: 20px;
    /* Add padding for smaller screens */
    margin-top: 2.5rem;
    box-sizing: border-box;
    /* Include padding in the width calculation */

  }

  .leftMain {
    flex: 0 1 100%;
    padding: 20px;
    margin-bottom: auto;
    /* Add padding for smaller screens */
    box-sizing: border-box;
    /* Include padding in the width calculation */
    margin: 0;
    /* Reset any margin */


  }

  .rightMain {
    display: none;
  }


  .content-box {
    width: 90%;
    /* Wider boxes for smaller screens */
    padding: 10px;
    /* Adjust padding */
  }



  /* Font size adjustments for readability */
  body,
  h1,
  h2,
  h3,
  p {
    font-size: 90%;
  }

  body::after {
    width: 25vw;
    /* Adjust the width for smaller screens */
    background-size: contain;
    display: none;
    content: none;
  }

  /* Adjust the hero image section for mobile */
  .heroImage-section {
    display: none;
    /* Optionally hide the hero image section on mobile */
  }


  /* Responsive images in content boxes */
  .content-box img {
    max-width: 100%;
    height: auto;
  }
}


/* Responsive adjustments for footer*/
@media screen and (max-width: 800px) {

  .legal-section,
  .site-footer p {
    flex-basis: 100%;
    /* Full width on smaller screens */
    order: unset;
    /* Reset the order */
    text-align: center;
    /* Center align on smaller screens */
  }

  .social-icons {
    order: unset;
    /* Reset the order */
    margin-top: 10px;
    /* Add space between items */
    margin-bottom: 10px;
    text-align: center;
  }


  .social-icon {
    width: 30px;
    /* Adjust size for mobile */
    height: 25px;
    /* Adjust size for mobile */
    margin: 0 5px;
    /* Adjust spacing */
    /* other styles as needed */
  }
}


/* General adjustments for EVEN smaller screens */
@media screen and (max-width: 480px) {
  .heroWriting-section h1 {
    font-size: 8vw;
    /* Even larger size for very small screens */
  }

  .heroWriting-section div p {
    font-size: 4vw;
    /* Adjust as needed for readability */
  }

  .nav-list li a {
    font-size: 5vw;
    /* Adjust navigation font size */
  }

  .heroWriting-section button {
    font-size: 5vw;
    /* Adjust button font size */
  }

  .social-icon {
    height: 7vw;
    /* Further increase size for very small screens */
    margin: 0 2vw;
    /* Adjust spacing */
  }
}

/* Responsive Design end */