/* speciallaskuri.css */

#spc_countdown-container {
display: flex;

/* VAAKATASAUS: Siirrä kaikki elementit vasempaan reunaan (vastaa "left") */
justify-content: flex-start;

/* PYSTYTASAUS: Linjaa elementit yläreunaan Flex-säiliössä */
align-items: flex-start;

flex-wrap: nowrap;
gap: 5px;
margin: 0px;
}

.time-unit {
    display: flex;
    flex-direction: row;
    gap: 1px;
}

.spc_separator {
    /* TÄMÄ ON TÄRKEÄ: Varmistaa, että erottimet ovat samalla linjalla muiden elementtien kanssa */
    align-self: flex-start;

    /* LISÄTTY: Varmistaa pystysuuntaisen alareunan tasauksen inline-sisällölle */
    vertical-align: bottom;
}

/* ======================================================= */
/* TÄMÄ LOHKO TARVITAAN KAIKKIEN KOLMEN RIVIN TASOITTAMISEEN! */
/* ======================================================= */

/* 1. Pakota kaikki kuvaelementit tasaamaan alareunaan (solves the baseline issue) */
img {
    vertical-align: bottom;
}

/* 2. Target the container of the top counter (the first JS script output) */
#counter-display-daycoun {
vertical-align: bottom;
}

/* 3. Target the image files for the bottom manual counter (dc*.png) */
img[src^="dc"] {
    vertical-align: bottom;
}

#spc_countdown-container {
/* ... muut flex-määritykset ... */

/* Varmistaa, että kaikki lapset (numerot ja erottimet) ovat samalla pystylinjalla */
align-items: center;
}

.spc_separator {
    /* Varmistaa, että tämä elementti itse linjautuu keskelle */
    align-self: center;


}
#counter-display-daycoun {
vertical-align: bottom;
}