body {
    font-family: Arial, sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, #1e323b 0%, #0f1a1f 100%);
}

.page-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background: #fff33300;
    color: #fff;
    text-align: center;
    padding: 20px;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    flex-direction: row-reverse;
}

.mini-box {
    flex: 1 1 30%; /* Boxes will take up roughly 30% of the container width, allowing for 3 per row */
    background: rgb(7, 39, 36); 
    padding: 20px;
    border: 2px solid #99cc99;
    border-radius: 15px;
    text-align: center;
    color: #fff;
}


/* First-box styling */
.first-box {
    background: rgb(7, 39, 36);
    border: 2px solid #99cc99;
    border-radius: 15px;
    color: #fff;
    padding: 20px;
    text-align: center;
    flex: 1;
}
.refresh-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #072724; /* Light background; adjust as needed */
    border: 2px solid #99cc99; /* Matches your existing style theme */
    border-radius: 15px;
    color: #fff;
    height: 40px; /* Lower height for a sleeker look */
    padding: 0 10px;
    gap: 10px; /* Space between the text and the counter */
    font-family: 'Kodchasan', sans-serif;
}

/* Existing refresh-box styles (adjust as needed) */
.refresh-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(7, 39, 36);
    border: 2px solid #99cc99;
    border-radius: 15px;
    color: #fff;
    height: 40px;
    padding: 0 10px;
    gap: 10px;
    font-family: 'Kodchasan', sans-serif;
}

.refresh-text {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

.refresh-counter {
    font-weight: bold;
    font-size: 24px;
    color: #fff;
}

/* Style for the TRENCHES box */
.trenches-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(7, 39, 36);
    border: 2px solid #99cc99;
    border-radius: 15px;
    color: #fff;
    height: 40px;
    padding: 0 20px;
    font-family: 'Kodchasan', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s;
}
#gas-auction-info {
    font-family: 'Jura', sans-serif;
    color: #FFF;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 92px;
}

.trenches-box:hover {
    background: rgb(21 77 72); /* Slight hover effect */
}
.first-box .small-text {
    font-family: 'Jura', sans-serif;
    font-weight: 200;
    font-size: 25px;
    color: #fff;
    margin-bottom: 10px;
}

.first-box .big-text {
    font-family: 'Jura', sans-serif;
    font-weight: 700;
    font-size: 92px;
    color: #fff;
}

/* General styles for the progress element */
progress {
    width: 100%;
    height: 20px;  /* Adjust height as needed */
    -webkit-appearance: none; /* Removes default Chrome/Safari appearance */
    appearance: none;  /* Removes default style (Mozilla has no effect) */
    border-radius: 3px;
}

/* Chrome, Safari, Opera */
progress::-webkit-progress-bar {
    background-color: #14514b; /* Your desired background color */
    border-radius: 3px;
}

progress::-webkit-progress-value {
    background-color: #99cc99; /* Your desired foreground color */
    border-radius: 3px;
}

/* Firefox */
progress::-moz-progress-bar {
    background-color: #99cc99; /* Your desired foreground color */
    border-radius: 3px;
}

/* IE10+ */
progress {
    color: #99cc99; /* This sets the foreground color in IE10+ */
    border-radius: 3px;
}

/* Edge */
progress::-ms-fill {
    background-color: #99cc99; /* Your desired foreground color */
    border: none; /* Optional: removes default border */
    border-radius: 3px;
}


.mini-box-title {
    font-family: 'Kodchasan', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
}
.mini-box-title2 {
font-family: 'Jura', sans-serif;
    font-weight: 200;
    font-size: 25px;
    color: #fff;
    margin-bottom: 10px;
}
.buy-button {
    background: #fff;
    color: rgb(7, 39, 36);
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'Jura', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}
.buy-button:hover {
    background: #eef;
}

.mini-box p {
    font-family: 'Kodchasan', sans-serif;
    font-weight: 200;
    font-size: 14px;
    color: #fff;
    margin: 0;
}

/* Styling for the auctions list */
#auctions-container {
    text-align: left;
    font-family: 'Kodchasan', sans-serif;
    font-weight: 200;
    font-size: 14px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto; /* If there's a lot of data, we can scroll */
}

.auction-item {
    border-bottom: 1px solid #99cc99;
    padding: 10px 0;
}

.auction-item:last-child {
    border-bottom: none;
}

.auction-name {
    font-weight: 700;
    color: #fff;
    font-size: 16px;
}

.auction-details {
    color: #fff;
    margin-top: 5px;
    font-size: 14px;
}
@media (max-width: 768px) {
    body, html {
        font-size: 14px; /* Smaller base font size for mobile */
    }

    .page-wrapper {
        padding: 10px; /* Smaller padding on mobile */
    }

    .container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center-align the content */
    }

    /* Adjust text sizes dynamically based on the width of the viewport */
    .first-box .small-text, .first-box .big-text, .mini-box-title, .buy-button, .mini-box-title2 {
        font-size: calc(12px + (24 - 12) * ((100vw - 300px) / (1600 - 300)));
    }

    .refresh-text, .trenches-box {
        font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
    }
}
@media (max-width: 768px) {
    .first-box .big-text  {
        font-size: calc(2* 18px);
    }
}

@media (max-width: 768px) {
    #gas-auction-info {
        font-size: calc(2 * 18px); 
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center; /* Center-align the content */
    }

    .container > div {
        max-width: 300px; /* Maximum width for mobile devices */
        width: 100%; /* Adapts to the container width, up to max-width */
    }

    .first-box, .mini-box, .refresh-box, .trenches-box {
        padding: 10px; /* Adjust padding for better spacing on mobile */
    }
}
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Align items to stretch to fill the container width */
    }

    .container > div, .container > a.trenches-box {
        width: 100%; /* Ensure all children of container take full width */
        max-width: none; /* Ensure no max-width restrictions are applied */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }

    .first-box, .mini-box, .refresh-box, .trenches-box {
        padding: 10px; /* Standardize padding for all items in the container */
    }
}
@media (max-width: 768px) {
    .first-box .big-text {
        font-size: calc(2 * 18px); /* Adjust based on current mobile size */
    }
}