/**
 * Ba Dum Tss Counter - Styles
 *
 * Minimalist white and black design with responsive video layout
 */

/* Global reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main body layout - center everything and enable click anywhere */
body {
    background: white;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indicates entire page is clickable */
}

/* Main container - vertical layout with spacing */
.container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* Space between counter and video */
}

/* Video element styling - responsive design */
#badumtss-video {
    width: 50vw; /* 50% viewport width on desktop */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Prevent distortion */
}

/* Mobile responsive design */
@media (max-width: 768px) {
    #badumtss-video {
        width: 90vw; /* 90% viewport width on mobile */
    }
}

/* Counter display styling - black text on white background */
.counter {
    background: white;
    color: black;
    padding: 1.5rem 3rem;
    border-radius: 20px; /* Rounded corners */
    min-width: 150px;
}

/* Counter number styling - large monospace font */
#counter {
    font-size: 4rem;
    font-weight: bold;
    font-family: monospace; /* Consistent digit width */
}