/* Apply border-box universally */
* {
    box-sizing: border-box;
}

/* Default background for larger screens (wide/desktop) */
body {
    background-image: url('https://raw.githubusercontent.com/Damian-Coleman-Visual-Solutions/DCVS-Rolling-Counter/refs/heads/main/GEHC%20Counter%20Display-02.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 109vh;
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

/* Counter styling */
#counter {
    display: inline-flex; /* Container shrinks to fit digits */
    font-size: clamp(6vw, 6vw, 6vw); /* Responsive font size */
    color: #ffffff;
    text-align: center;
    gap: -2em; /* Reduces spacing between digits */
    margin: 0;
    align-items: flex-end; /* Aligns items to the bottom */
}

/* Slot machine digit animation styles */
.slot-machine {
    display: flex;
    justify-content: center;
    font-size: 4em;
    font-family: 'Source Sans Pro', sans-serif;
    color: #ffffff;
}

/* Individual digit styling */
.digit {
    width: 0.8em;
    transition: transform 1.5s ease-in-out;
}
.rolling {
    transform: translateY(-20px); /* Adjust this for a rolling effect */
    transition: transform 1s ease-in-out;
}

/* UTD abbreviation styling */
#counter::after {
    content: " YTD";
    font-size: 0.2em; /* Slightly smaller than digits */
    padding-left: 0em;
    display: flex;
    align-items: flex-end; /* Aligns with digit baseline */
}
/* Media query for tablets (768px and below) */
@media (max-width: 768px) {
    body {
        background-image: url('https://raw.githubusercontent.com/Damian-Coleman-Visual-Solutions/DCVS-Rolling-Counter/refs/heads/main/GEHC%20Counter%20Display-01.png');
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        padding: 25px;
    }
    
    #counter {
        font-size: 14vw; /* Responsive font size for tablets */
    }
}

/* Media query for mobile phones (480px and below) */
@media (max-width: 480px) {
    body {
        background-image: url('https://raw.githubusercontent.com/Damian-Coleman-Visual-Solutions/DCVS-Rolling-Counter/blob/ad39428a3b98a15ee640f9dfd1b4fea1ef528f73/GEHC%20Counter%20Display-02.png');
        background-size: cover;
        background-position: center;
        padding: 15px;
         align-items: flex-start;
    }
    
    #counter {
        font-size: 12vw; /* Responsive font size for mobile */
        margin-top: 85px; /* Adjust this value to move the counter down */
    }
}