body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #1f1e1e;

    background: linear-gradient(to bottom, #f8fafc, #e5e7eb);

    margin: 0;
}                           /*Tämä säätää sivun asettelua, fonttia, tekstin väriä ja taustaa.*/

ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 0.5em;
}                       /*Muotoilee listan vasempaan yläkulmaan sijoitetuksi navigaatiolaatikoksi.*/

ul.navbar li {
    background: #ffffff;
    margin: 0.5em 0;
    padding: 0.5em;
    border-right: 0.5em solid #05c502;
    border-radius: 4px;
}                       /*Tyylittelee listakohdat valkoisiksi laatikoiksi, joissa on sininen reunakorostus.*/

ul.navbar a {
    text-decoration: none;
    color: #1f2933;
    font-weight: bold;
}                       /*Poistaa linkkien alleviivauksen ja tekee niistä tummat ja lihavoidut.*/

a:hover {
    background-color: #05c502;
    color: rgb(255, 255, 255);
    transition: 0.3s;
}           /*Vaihtaa linkin taustan siniseksi ja tekstin valkoiseksi hiiren ollessa päällä, pehmeällä siirtymällä.*/