/* General styling for titles */
.title {
    margin-bottom: 50px !important;
    font-size: 3em !important;
}

.container {
    max-width: 75% !important;
    width: 75% !important;
}

@import url('https://fonts.cdnfonts.com/css/helvetica-neue-55?styles=15993');
@import url('https://fonts.googleapis.com/css?family=Roboto:wght@700&display=swap');

/* Responsive navbar for mobile */
@media only screen and (max-width: 1087px) {
    #navbarMenuHeroA {
        height: 100vh;
        width: 100vw;
        display: inline-block;
        position: fixed;
        top: 0;
        left: 0;
        text-align: center;
        font-size: 2em;
        padding: 100px 10px;
        background-color: rgba(0, 0, 0, 0.85); /* Increased transparency with RGBA */
        opacity: 0;
        pointer-events: none;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

    #navbar-burger {
        position: fixed;
        top: 0;
        right: 0;
    }

    #navbarMenuHeroA.is-active {
        opacity: 1;
        pointer-events: auto;
    }
}


/* Tokens page styling */
#tokens-page {
    margin: 50px auto; /* Center the container */
    width: 100%; /* Increase width to fit more space */
    max-width: none; /* Remove any limiting maximum width */
	font-family: 'Arial', sans-serif;
    background: #0e3b16; /* Green background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Subtitle styling */
#tokens-page .subtitle {
    text-align: Center;
    margin-bottom: 10px; /* Reduce margin */
    color: #fff;
    font-size: 1.2em; /* Slightly smaller font size */
}

/* Table container styling */
#tokens-page #tokens-table-container {
    overflow-x: auto;
    overflow-y: auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 100%; /* Ensure it spans full width of #tokens-page */
}

/* Table styling */
#tokens-page table {
    width: 100%; /* Stretch table to the full container width */
    border-collapse: collapse;
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 0.9em;
    margin: 0 auto;
}

/* Tokens Table Heading Styling */
#tokens-page th {
    padding: 10px;
    background-color: #4CAF50; /* Green header background */
    color: white;
    font-weight: bold;
    text-transform: uppercase; /* Uppercase text */
    border: 1px solid #ddd;
    text-align: center; /* Center align text */
    vertical-align: middle; /* Vertically center text */
    font-family: 'Helvetica Neue', sans-serif; /* Use a custom Google font */
    font-size: 16px; /* Adjust font size */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Apply font color black for all headers (1-15) */
#tokens-page table th {
    color: #000; /* Black font for all headers */
}

/*Blank Header*/
#tokens-page table th:nth-child(1) {
    background-color: darkslategray; /* Black */
	
}


/* 5pt column header - Top row only */
#tokens-page table thead tr:first-child th:nth-child(2) {
    background: linear-gradient(90deg, #d1c4f7, #b39ddb); /* Light to dark purple gradient */
    color: black; /* Ensure text stands out */
	font-size: 42px;
    font-weight: bold;
}

/* 3pt column header - Top row only */
#tokens-page table thead tr:first-child th:nth-child(3) {
    background: linear-gradient(90deg, #fff9c4, #ffe082); /* Light to dark yellow gradient */
    color: black; /* Ensure text stands out */
	font-size: 42px;
    font-weight: bold;
}

/* 1pt column header - Top row only */
#tokens-page table thead tr:first-child th:nth-child(4) {
    background: linear-gradient(90deg, #bbdefb, #64b5f6); /* Light to dark blue gradient */
    color: black; /* Ensure text stands out */
	font-size: 42px;
    font-weight: bold;
}

/* Alternate row colors in the 5pt section */
#tokens-page table td:nth-child(3),
#tokens-page table td:nth-child(4),
#tokens-page table td:nth-child(5) {
    background-color: #f3e6fa; /* Light purple */
}

/* Alternate rows for the 5pt section */
#tokens-page table tr:nth-child(even) td:nth-child(3),
#tokens-page table tr:nth-child(even) td:nth-child(4),
#tokens-page table tr:nth-child(even) td:nth-child(5) {
    background-color: #e1c8f2; /* Dark purple */
}

/* Alternate row colors in the 3pt section */
#tokens-page table td:nth-child(6),
#tokens-page table td:nth-child(7),
#tokens-page table td:nth-child(8),
#tokens-page table td:nth-child(9),
#tokens-page table td:nth-child(10) {
    background-color: #fff7d1; /* Light Yellow */
}

/* Alternate rows for the 3pt section */
#tokens-page table tr:nth-child(even) td:nth-child(6),
#tokens-page table tr:nth-child(even) td:nth-child(7),
#tokens-page table tr:nth-child(even) td:nth-child(8),
#tokens-page table tr:nth-child(even) td:nth-child(9),
#tokens-page table tr:nth-child(even) td:nth-child(10) {
    background-color: #ffe79f; /* Dark Yellow */
}

/* Alternate row colors in the 1pt section */
#tokens-page table td:nth-child(11),
#tokens-page table td:nth-child(12),
#tokens-page table td:nth-child(13),
#tokens-page table td:nth-child(14),
#tokens-page table td:nth-child(15) {
    background-color: #d8eafd; /* Light Blue */
}

/* Alternate rows for the 1pt section */
#tokens-page table tr:nth-child(even) td:nth-child(11),
#tokens-page table tr:nth-child(even) td:nth-child(12),
#tokens-page table tr:nth-child(even) td:nth-child(13),
#tokens-page table tr:nth-child(even) td:nth-child(14),
#tokens-page table tr:nth-child(even) td:nth-child(15) {
    background-color: #aed2f7; /* Dark Blue */
}

/* Preserve the "Used" red highlight */
#tokens-page table td:contains("Used") {
    background-color: #ff9999 !important; /* Red */
    color: black !important; /* Black text for visibility */
    font-weight: bold;
}

/* Darkslategray gradient header - Second row only */
#tokens-page table thead tr:nth-child(2) th {
    background: linear-gradient(90deg, #2F4F4F, #434343); /* Dark slate gray gradient */
    color: white; /* Ensure text stands out */
    font-weight: bold;
    font-size: 1.2em; /* Slightly larger font size */
    text-transform: uppercase; /* Optional: capitalize the text */
    border: 1px solid #4f6f6f; /* Subtle border to define the cells */
	
}

/* First column cells with alternating black and dark gray colors */
#tokens-page table td:nth-child(1):nth-of-type(odd) {
    background: linear-gradient(90deg, #2F4F4F, #434343); /* Dark slate gray gradient */
    color: white; /* Text color for visibility */
	font-weight: bold;
}

/* Second column cells with alternating black and dark gray colors */
#tokens-page table td:nth-child(2):nth-of-type(even) {
    background: linear-gradient(90deg, #2F4F4F, #434343); /* Dark slate gray gradient */
    color: white; /* Text color for visibility */
	font-weight: bold;
}

#tokens-page td {
    font-family: 'Roboto', sans-serif; /* Match font with headings */
    font-size: 14px; /* Consistent font size */
    color: #000; /* Black text for readability */
    text-align: center; /* Center align text */
}


/* Hover effect for rows */
#tokens-page tr:hover {
    background-color: #f5f5f5;
}

/* Even rows */
#tokens-page tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Style for "Used" cells */
#tokens-page td:contains("Used") {
    background-color: #ff9999; /* Light red */
    font-weight: bold;
    color: #000;
}

#tokens-hero .container {
    max-width: 75% !important; /* Adjust this percentage as needed */
    width: 75% !important;
}

/* Large screens adjustment */
@media (min-width: 1400px) {
    #tokens-page {
        max-width: 100%; /* Make use of more screen space on larger displays */
    }

    #tokens-page #tokens-table-container {
        max-width: 100%; /* Table stretches to fit the screen */
    }
}

/* Style for the image container */
.tokens-image-container {
    text-align: center; /* Center the image */
    margin-top: 30px; /* Add some spacing above the image */
}

/* Style for the image itself */
.tokens-image-container img {
    max-width: 100%; /* Make sure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for effect */
}

body {
    font-family: 'CustomFont', sans-serif;
}

/* Christmas Theme */
.christmas-tint {
  position: fixed;
  inset: 0;
  /* Soft blue-ish winter light */
  background: rgba(180, 210, 255, 0.15); 
  pointer-events: none;
  z-index: 0; /* Just below snow */
}

.christmas-vignette {
  position: fixed;
  inset: 0;
  /* Warmer, cozy edges */
  box-shadow: inset 0 0 150px rgba(0,20,50,0.3);
  pointer-events: none;
  z-index: 0;
}

#snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* On the very top */
}

/* Festive Link Hover */
body.christmas a:hover {
  color: #ff4d4d !important;
  text-shadow: 0 0 8px rgba(255, 77, 77, 0.5);
}

.gw-alert{
    position: sticky;
    top: 0;
    z-index: 100001; /* above navbar + your flash container */
    width: 100%;
    background: #b30000;
    color: #fff;
    text-align: center;
    font-weight: 800;
    padding: 12px 10px;
    font-size: 18px;
    letter-spacing: 0.4px;
}