/*
 * etustyle.css
 * Asettelu: Palsta 1 (Vasen) - Palsta 3 (Keski) - Palsta 2 (Oikea)
 * Leveyksien määrittely: P1: ~126px, P3: ~333px, P2: ~401px (kuvien mukaan)
 */

body {
    /* Koska body-tagissa on jo taustaväri ja tekstitiedot HTML:ssä,
     *      ei niitä tarvitse toistaa tässä, mutta on hyvä tyhjennyksen vuoksi. */
    margin: 0;
    padding: 0;
}

.page-container {
    display: flex;
    /* Aseta selvä maksimileveys, esim. 1400px. */
    max-width: auto;
    width: 95%; /* Varmistaa, että se kutistuu pienillä näytöillä */
    margin: 0 auto; /* Keskittää sivun */
}

/* YLEISET SÄÄNNÖT PALSTOILLE */
.column {
    /* Tausta- ja reunaviivat siirrettiin column-contentiin,
     *      koska alkuperäisessä oli taulukko-soluissa taustat. */
    vertical-align: top;
    padding: 0; /* Poistetaan oletus padding */
    box-sizing: border-box; /* Sisältää paddingin ja reunat leveyteen */
}

.column-content {
    /* Taustakuvat ja padding asetetaan tähän */
    padding: 10px; /* Pientä sisäistä tilaa */
    /* Taustakuva-asetukset säädetty siten, että ne eivät toistu */
    background-repeat: repeat;
    background-size: auto; /* Peittää koko alueen */
    min-height: 100vh; /* Varmistaa, että palstat ovat vähintään näytön korkuisia */
}
/* PALSTA 1: elamaniverkossa 20vuotta) */
.column-1 {
    width: auto;
    /* VAIHDETAAN ARVOT: Nyt se siirtyy oikealle (kolmanneksi) */
    order: 1;
}

/* PALSTA 2: keskipalsta) */
.column-2 {
    width: auto;
    /* VAIHDETAAN ARVOT: Nyt se siirtyy vasemmalle (ensimmäiseksi) */
    order: 2;
}

/* PALSTA 3: yhteytieto) */
.column-3 {
    width: auto;
    /* KORJATAAN VIRHE: Varmistetaan, että se tulee toiseksi */
    order: 3;
}
/* #countdown-container pakottaa KAIKEN YHDELLE RIVILLE */
#countdown-container {
display: flex;
gap: 5px; /* Pieni rako eri yksiköiden (Päivät, Tunnit) välillä */
justify-content: center; /* Keskittää laskurin sivulle */
align-items: center; /* Varmistaa, että kaikki elementit ovat samalla pystylinjalla */
/* Nämä varmistavat, että kontti ei riko palstaasi: */
width: 100%;
margin: 5px 0;
}

/* .time-unit varmistaa, että numerot pysyvät kiinni toisissaan */
.time-unit {
    /* HUOM: display:flex ja flex-direction:row ovat oletuksia tässä,
     *      joten emme tarvitse erillistä pystysuunnan määritystä. */
    display: flex;
    /* Poistetaan 'flex-direction: column;' jotta numerot pysyvät vierekkäin */
}

/* Numerokuvat */
.digit {
    width: 35px; /* Kokeile tätä kokoa. Säädä tarpeen mukaan. */
    height: auto;
    margin: 0; /* Otetaan marginaalit pois, jotta numerot ovat kiinni toisissaan */
}

/* Erottimet (esim. kaksoispisteet ":") */
.separator {
    font-size: 30px; /* Säädä fonttikokoa niin, että se vastaa kuvan korkeutta */
    font-weight: bold;
    color: #FFFFFF; /* Käyttää samaa väriä kuin sivun oletusteksti */
}


/* --- YLEISET SÄÄNNÖT (KORVAA BODY-TAGIN HTML:SSÄ) --- */
body {
    /* bgproperties="fixed" vaatii usein taustakuvan, mutta asetetaan perusasiat */
    background-color: #000000;  /* bgcolor="#000000" */
    color: #FFFFFF;           /* text="#FFFFFF" */
    margin: 0;
    padding: 0;
}

/* YLEISET LINKKISÄÄNNÖT (KORVAA LINK, VLINK, ALINK) */
a {
    color: #FFFF00; /* link="#FFFF00" */
    text-decoration: underline; /* MUUTETTU: Palauttaa alleviivauksen */
}
a:visited {
    color: #00FF00; /* vlink="#00FF00" */
}
a:active {
    color: #00FFFF; /* alink="#00FFFF" */
}
a:hover {
    /* HUOM: Koska oletus alleviivaus on nyt päällä, voit halutessasi
     *      jättää tämän lohkon kokonaan pois, tai muuttaa tyyliä tähän. */
    text-decoration: underline;
}

/* --- PALSTAKOHTAISET FONTIT JA KOOT (TUNNISTAMISTA VARTEN) --- */

/* PALSTA 1: (column-1) - Sivu muokkauksen alla */
.column-3 p, .column-3 span {
    font-family: tahoma, sans-serif; /* SINUN PYYTÄMÄSI FONT-FACE: Arial */
    color: #FFFFFF;
}

/* PALSTA 2: (column-2) - Yhteydenotot, Musiikkilista, Loki */
.column-1 p, .column-2 span, .column-1 table {
    font-family: 'verdana', serif; /* SINUN PYYTÄMÄSI FONT-FACE: Times New Roman */
    color: #FFFFFF;
}

/* PALSTA 3: (column-3) - Tervetuloa, Keskiosio */
/* HUOM: Tämä luokka on nyt käytössä HTML:ssä, jossa oli aiemmin toinen column-2 */
.column-2 p, .column-2 span {
    font-family: verdana, sans-serif; /* SINUN PYYTÄMÄSI FONT-FACE: Verdana */
    color: #FFFFFF;
}


/* --- VÄRIT (KORVAA COLOR="#XXXXXX") --- */

/* Keltainen teksti (color="#FFFF00") */
.yellow-text {
    color: #FFFF00 !important;
}

/* Harmaa teksti (color="#F0F0F0") */
.light-grey-text {
    color: #F0F0F0 !important;
}

/* Sini-Vihreä teksti (color="#80FFFF") */
.cyan-text {
    color: #80FFFF !important;
}
#counter-display-wrapper {
/* */
display: flex;

gap: 5px; /
justify-content: left;
align-items: left;
width: 30px;
height: 35px;
}
.separator {
    /* TÄMÄ KOHTA HALLITSEE EROTTUMERKKIEN (///) ULKOASUA */

    /* Säädä fonttikokoa tästä (esim. 30px) */
    font-size: 30px;

    /* Asetetaan väri, jos haluat sen erottuvan */
    color: #444444;

    /* Lisää tilaa (marginaalia) erottimen ympärille */
    margin: 0 10px;

    /* Varmistetaan, että teksti on näkyvissä */
    line-height: 1;
}

/* --- VÄLIT JA TYHJÄ TILA (KORVAA <BR><BR>...) --- */

/* Korvaa yhden <br> (n. 15 pikseliä tilaa) */
.spacer-s {
    display: block;
    height: 15px;
}

/* Korvaa kaksi <br><br> (n. 30 pikseliä tilaa) */
.spacer-m {
    display: block;
    height: 10px;
}

/* Korvaa kolme <br><br><br> (n. 45 pikseliä tilaa) */
.spacer-l {
    display: block;
    height: 45px;
}
/* ======================================================= */
/* TÄRKEIN KORJAUS FLOATING-ONGELMIIN JA TAUSTAKUVAAN!    */
/* (Jos palstasi ovat column-1, column-2 jne. sisällä)     */
/* ======================================================= */

/* OLETUS: Oletan, että palstasi ympäröivä elementti on .page-container */
.page-container {
    /* Tämä korjaa float-ongelmat ja pakottaa kontin näkymään korkeana,
     *      mikä palauttaa taustakuvien näkymisen oikein. */
    overflow: hidden;
}

/* ======================================= */
/* LASKURIN TYYLIT (Yksi tiivis vaakarivi) */
/* ======================================= */

#countdown-container {
/* display: flex; asettaa kaiken yhdelle riville */
display: flex;

/* Varmistaa, että laskuri ei ole liian leveä palstalle */
width: fit-content;

/* Keskittää laskurin vaakasuunnassa omassa palstassaan */
margin: 5px auto;

/* Pieni rako eri yksiköiden (P P ja T T) välillä */
gap: 10px;

/* Varmistaa, että numerot ovat samalla pystylinjalla */
align-items: center;
}

/* time-unit pitää kaksi numeroa (kymmenet ja ykköset) kiinni toisissaan */
.time-unit {
    display: flex;
    margin: 0;
}

/* Numerokuvien koko */
.digit {
    width: 30px; /* Säädä kokoa */
    height: 60px;
    margin: 0; /* Ei ylimääräistä tilaa numeroiden välillä */
}