@font-face { /* Defines a custom font */
    font-family: 'Press Start 2P';
    font-weight: 400;
    src: url('/Assets/Fonts/Press_Start_2P/pressstart2p-regular-webfont.woff2') format('woff2'),
         url('/Assets/Fonts/Press_Start_2P/pressstart2p-regular-webfont.woff') format('woff')
}

@font-face { /* Defines another custom font */
    font-family: 'Handjet';
    font-weight: 400;
    src: url('/Assets/Fonts/Handjet/Handjet-Regular.woff2') format('woff2'),
         url('/Assets/Fonts/Handjet/Handjet-Regular.woff') format('woff');
}

.menu-options ul {
    list-style: none; /* Ensure no bullet points */
    padding: 0;      /* Remove default padding */
    margin: 0;       /* Remove default margin */
    display: flex;   /* Make list items display horizontally */
    gap: 1rem;       /* Add space between menu items */
    justify-content: flex-start; /* Align items to the right within the menu container */
    align-items: center; /* Vertically center items if they have different heights */
}

.menu-options li {
    /* No specific padding/margin here, let the 'a' tags handle spacing */
}

.menu-options a {
    display: inline-block; /* Makes links behave like blocks for padding, but within inline flow */
    padding: 0.2rem 0.2rem; /* Add padding around the text for click area */
    text-decoration: none; /* Remove any default underlines */
    white-space: nowrap; /* Prevents menu items from wrapping to a new line */
}

/* --- Hide Hamburger Menu on Desktop --- */
/* This rule ensures the hamburger icon is hidden on larger screens by default */
.hamburger-menu {
    display: none;
}

@media screen and (max-width: 61.25rem) { /* Media query for screens up to 61.25rem */
    .box {
        padding: 3rem;
        }
    }
    
    @media screen and (max-width: 46rem) { /* Media query for screens up to 46rem */
    .box {
        padding: 2rem;
        }
    }
    
    @media screen and (max-width: 30rem) { /* Media query for screens up to 30rem */
    .box {
        padding: 1rem;
        }
    }

@media (max-width: 768px) {
  /* General Mobile Adjustments (Keep these as they were) */
  h1 { font-size: 1.5rem; padding: 0.5rem; }
  h2 { font-size: 2rem; padding: 0.5rem; }
  h3 { font-size: 1.25rem; padding: 0.5rem; }
  p { font-size: 1rem; padding: 0.5rem; }
  iframe { width: 100%; height: auto; }
  .header { flex-direction: column; align-items: flex-start; padding: 0.5rem; }
  .box { padding: 0.75rem; width: 100%; box-sizing: border-box; }
  .console { font-size: 1rem; width: 100%; box-sizing: border-box; }

  /* Mobile Menu Container (.menu-options - The green box) */
  .menu-options {
    position: absolute;
    top: 0; /* Starts from the top of the page */
    left: 0;
    width: 100%;
    background-color: var(--background);
    z-index: 100;
    padding-top: 3rem; /* Space below the header/logo */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Removed flex properties from here, they move to .menu-options ul */
  }

  /* Hamburger Menu Icon (Visible only on mobile) */
  .hamburger-menu {
    display: flex;
  }

  /* Mobile Menu List (<ul>) - This is where the main centering happens */
  .menu-options ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0; /* Centers the <ul> block horizontally */
    display: flex; /* Keep flex display */
    flex-direction: row; /* !!! CHANGE THIS from 'column' to 'row' !!! */
    flex-wrap: wrap; /* Allows items to wrap to the next line if there's not enough space */
    justify-content: flex-start; /* Aligns items to the left (or center if you prefer) */
    align-items: center; /* Vertically center items */
    gap: 1rem; /* Adjust horizontal spacing between items */
    
    /* Make <ul> a flex container for its <li> items */
    display: flex;
    flex-direction: row; /* Stacks <li> items vertically */
    align-items: flex-start; /* Aligns <li> items to the left within the <ul> */
  }

  /* Mobile Menu List Items (<li>) */
  .menu-options li {
    padding: 0.2rem 0; /* Vertical padding for each item */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
  }

  .menu-options li:last-child {
    border-bottom: none; /* No separator for the last item */
  }

  /* Mobile Menu Links (<a>) - Text within each item */
  .menu-options a {
    display: block; /* Makes the entire link area clickable */
    padding: 0 0.5rem; /* Horizontal padding inside the clickable area */
    font-size: 1.25rem; /* Ensures proper font size */
    text-align: left; /* Ensures text starts from the left within its own block */
  }
  
  /* Desktop-only menu items (Hidden on mobile) */
  .menu-options .desktop-only-menu-item {
    display: none;
  }

  /* Scroll buttons and Download text (Adjusted for mobile) */
  #scrollToTop,
  #scrollToBottom {
    font-size: 1.25rem;
    padding: 0.5rem;
  }
  .download-text {
    font-size: 1rem;
  }
  .download-link {
    font-size: 1.25rem;
  }
}

@keyframes fade-in { /* Defines a fade-in animation */
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

* { /* Global selector, applies to all elements */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.header {
    display: flex;
    justify-content: space-between; /* Spreads items evenly */
    align-items: center; /* Vertically centers items */
    font-family: 'Handjet';
    font-size: 1.5rem;
    color: white;
    margin: 0;
    padding: 0;
    width: 100%; /* Sets width to 100% of parent container */
}

.logo {
    margin-top: 0.313rem;
    margin-left: 0.313rem;
}

.logo:hover {
    color: var(--foreground);
}

:root { /* Defines custom CSS variables */
    --bar-width: 3.75rem;
    --bar-height: .5rem;
    --hamburger-gap: .375rem;
    --foreground: #39FF14;
    --background: #663399;
    --hamburger-margin: .5rem;
    --animation-timing: 350ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu { /* Styles the hamburger menu element */
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: absolute;
    top: var(--hamburger-margin);
    right: var(--hamburger-margin);
    z-index: 2;
    cursor: pointer;
}

.hamburger-menu:has(input:checked) { /* Styles the menu when the checkbox is checked */
    --foreground: var(--background);
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible { /* Styles the menu when it has focus */
    border: .063rem solid var(--background);
    box-shadow: 0 0 0 .063rem var(--foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input { /* Styles the hamburger menu elements */
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--foreground);
    border-radius: 9999px;
    transform-origin: right center; /* Sets the origin point for transformations */
    transition: opacity var(--animation-timing), width var(--animation-timing),
        rotate var(--animation-timing), translate var(--animation-timing),
        background-color var(--animation-timing); /* Defines transitions for animations */
}

.hamburger-menu input { /* Styles the checkbox input */
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.hamburger-menu:has(input:checked)::before { /* Styles the first bar when checked */
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after { /* Styles the second bar when checked */
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked { /* Styles the checkbox when checked */
    opacity: 0;
    width: 0;
}

.menu-options { /* Styles the menu options container */
    opacity: 0;
    visibility: hidden;
    background-color: var(--foreground);
    color: var(--background);
    text-align: left;
    position: absolute;
    width: 100%;
    height: 4rem;
    padding-top: 1.5rem;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.menu-options.show {
    opacity: 1;
    visibility: visible;
}

.menu-options a { /* Styles links within the menu */
    color: var(--background);
}

.menu-options a:hover { /* Styles links on hover */
    color: white;
}

/* Scroll to Top Button Styling */
#scrollToTop {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    color: var(--foreground);
    font-size: 1.5rem;
    border-radius: 50%;
    padding: .625rem;
    cursor: pointer;
    display: none; /* Hidden by default */
    z-index: 1000; /* Ensure it stays above other elements */
    background: none;
    border: none;
    box-shadow: none;
}
  
#scrollToTop:hover {
    background-color: #28a745; /* Slightly darker shade on hover */
}

/* Scroll to Bottom Button Styling */
#scrollToBottom {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    color: var(--foreground);
    font-size: 1.5rem;
    border-radius: 50%;
    padding: .625rem;
    cursor: pointer;
    display: none; /* Hidden by default */
    z-index: 1000; /* Ensure it stays above other elements */
    background: none;
    border: none;
    box-shadow: none;
}

#scrollToBottom:hover {
    background-color: #28a745; /* Slightly darker shade on hover */
}

h1 { /* Styles level-one headings */
    font-family: 'Press Start 2P';
    text-align: center;
    font-size: 2.5rem;
    color: var(--foreground);
    padding: 1rem;
    margin-top: .5rem;
}

h2 { /* Styles level-two headings */
    font-family: 'Handjet';
    text-align: center;
    font-size: 3rem;
    color: var(--foreground);
    padding: 1rem;
}

h3 {
    font-family: 'Handjet';
    text-align: center;
    font-size: 2rem;
    color: white;
    padding: 1rem;
}

body { /* Styles the body of the document */
    font-family: 'Handjet';
    text-align: center;
    background-color: var(--background);
    margin: 0;
    overflow-x: hidden;
}

p { /* Styles paragraphs */
    font-size: 1.875rem;
    text-align: center;
    color: white;
    margin-bottom: 1.5rem; /* Adjust the value as needed */
    line-height: 1.6; /* Optional: Adjust for better readability */
}

p:hover { /* Styles paragraphs on hover */
    color: var(--foreground);
}

/* Exclude hover effect for paragraphs with the 'no-hover' class */
p.no-hover:hover {
    color: white; /* Keep the original color on hover */
}

/* Prevent the anchor tag from being affected by the paragraph hover */
p.no-hover a {
    color: white; /* Ensure the anchor's color remains unchanged */
}

a { /* Styles links */
	color:white;
	text-decoration: none;
}

a:hover { /* Styles links on hover */
  color: white;
  text-decoration: underline;
  text-decoration-color: var(--foreground);
}

iframe { /* Styles embedded content (iframes) */
    width: 75%;
    height: 46.875rem;
    border-width: .188rem;
    border-color: var(--foreground);
}

table { /* Styles tables */
	border-collapse: collapse;
	border-spacing: 0;
}

.table-wrapper { /* Styles a container for tables */
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
}

table { /* Styles tables */
	margin: 0 0 2rem 0;
	width: 100%;
	}

table tbody tr { /* Styles table row elements */
	border: solid .188rem;
	border-left: 0;
	border-right: 0;
}

table td { /* Styles table data cells */
    color: white;
	font-size: 1.25rem;
	padding: 0;
	text-align: left;
	vertical-align: top;
    padding: 0.5rem 0.5rem 0.5rem 0;
}

table td a { /* Styles links within table data cells */
  color: white;
  text-decoration: none;
}

table td a:hover { /* Styles links on hover within table data cells */
  color: var(--foreground);
  text-decoration: underline;
}

table th { /* Styles table header cells */
	font-size: 1.5rem;
	font-weight: 600;
	padding: 0.5rem 0.5rem 0.5rem 0;
	text-align: left;
}

table thead { /* Styles table header */
	border-bottom: solid .125rem;
}

table tfoot { /* Styles table footer */
	border-top: solid .125rem;
}

table.alt { /* Styles alternative table style */
	border-collapse: separate;
}

table.alt tbody tr td { /* Styles table data cells in alternative style */
	border: solid .063rem;
	border-left-width: 0;
	border-top-width: 0;
}

table.alt tbody tr td:first-child { /* Styles the first cell in each row */
	border-left-width: .063rem;
}

table.alt tbody tr:first-child td { /* Styles the first row's cells */
	border-top-width: .063rem;
}

table.alt thead { /* Styles the alternative table header */
	border-bottom: 0;
}

table.alt tfoot { /* Styles the alternative table footer */
	border-top: 0;
}

table tbody tr { /* Styles table rows */
	border-color: rgba(144, 144, 144, 0.25);
}

table tbody tr:nth-child(2n + 1) { /* Styles odd table rows */
	background-color: rgba(144, 144, 144, 0.075);
}

table th { /* Styles table headers */
	color: #fff;
}

table thead { /* Styles table header */
	border-bottom-color: rgba(144, 144, 144, 0.25);
}

table tfoot { /* Styles table footer */
	border-top-color: rgba(144, 144, 144, 0.25);
}

table.alt tbody tr td { /* Styles table data cells in alternative style */
	border-color: rgba(144, 144, 144, 0.25);
}

.box { /* Styles a generic box container */
	background: rgba(0, 0, 0, 0.5);
	border-radius: .25rem;
    display: inline-table;
	margin-bottom: 2rem;
	margin-top: 2rem;
	overflow: hidden;
	padding: 1rem;
}

.box > :last-child,
.box > :last-child > :last-child,
.box > :last-child > :last-child > :last-child { /* Removes bottom margin from last child elements */
	margin-bottom: 0;
}

.box header h2 { /* Styles the header of the box */
	margin: 0 0 .5rem 0;
}

.box.alt { /* Styles an alternative box style */
	border: 0;
	border-radius: 0;
	padding: 0;
}

.download-text {
color: var(--foreground);
font-size: 1.5rem;
}

.download-link {
font-size: 2rem;
}

.console {
width: auto; /* Let the width adjust to the content */
max-width: 100%; /* Prevents it from going beyond the container */
background-color: transparent; /* No color for the background */
color: var(--foreground); 
padding: 0.5rem 0.5rem; 
border: 0.125rem solid white; /* White border */
border-radius: 0.313rem;
overflow-y: auto;
position: relative;
display: inline-block; /* Ensures it wraps tightly around content */
}

.console-output {
white-space: pre-wrap;
margin: 0;
font-family: 'Handjet';
font-size: 1.313rem;
text-align: left;
color: var(--foreground);
}