body {
    padding: 20px;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #121212; /* Vaihda tämä halutessasi toiseen väriin */
    color: #000000; /* Musta teksti */
}
header, main, footer {
    padding: 20px; /* Lisää padding otsikolle, pääsisällölle ja alatunnisteelle */
}

.image-container img {
    padding: 5px; /* Lisää väli kuvien ympärille */
}
header {
    background-color: #000000; /* Musta tausta */
    color: #FFFFFF; /* Valkoinen teksti kaikille header-elementin teksteille */
    padding: 10px 0;
}

/* Erityissääntöjä linkkien värien säätämiseen */
header a {
    color: #FFFFFF !important; /* Varmistaa, että kaikki linkit headerissa ovat valkoisia */
}

/* Lisätään :link, :visited, :hover, ja :active pseudoluokat erikseen */
header a:link, header a:visited, header a:hover, header a:active {
    color: #FFFFFF !important;
}

nav ul {
    padding: 0 20px; /* Lisää padding vain sivusuunnassa */
}
header {
    background-color: #000000; /* Musta tausta */
    padding: 10px 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row; /* Tämä varmistaa, että listan alkiot ovat vaakasuunnassa */
}

nav ul li a:link {
    color: white; /* Normaali linkkien väri */
}

nav ul li a:visited {
    color: grey; /* Väri kun linkkiä on jo klikattu */
}

nav ul li a:hover {
    color: blue; /* Väri kun hiiri on linkin päällä */
}

nav ul li a:active {
    color: red; /* Väri kun linkkiä klikataan */
}

nav ul li img {
    width: 32px;
    height: 32px;
}
ul {
    list-style-type: none;
}

ul {
    padding-left: 0; /* Poistaa vasemman paddingin, jotta lista alkaa suoraan reunasta */
    padding-right: 20px; /* Voi lisätä oikealle pieni väli, jos tarpeen */
    list-style: none; /* Varmistaa, että listamerkit eivät näy */
}

container {
    display: flex;
    justify-content: center;  /* keskittää sisällön vaakasuunnassa */
    align-items: center;      /* keskittää sisällön pystysuunnassa */
    height: 100vh;            /* ottaa koko käytettävissä olevan korkeuden */
}

@media (max-width: 600px) {
    header nav {
        padding: 5px 0;
    }
    nav ul li img {
        width: 26px;  /* smaller icons for mobile */
        height: 26px;
    }
}