@font-face {
    font-family: numerot;
    src: url(Charm/Charm-Regular.ttf);
}
@font-face {
    font-family: otsikko;
    src: url(Gravitas_One/GravitasOne-Regular.ttf);
}
@font-face {
    font-family: päivät;
    src: url(Saira_Extra_Condensed/SairaExtraCondensed-Regular.ttf);
}

body {
    background-image: url(taustakuva.jpg);
    color: rgb(255, 255, 255);
}

h1 {
    font-family: otsikko, sans-serif;
    text-align: center;
    font-weight: normal;
    font-size: 50px;
    margin: 0;
    text-shadow: 0px 0px 10px #332f46;
}

table {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 4px;
    border-spacing: 10px;
}

th {
    font-family: päivät, sans-serif;
    font-weight: normal;
    font-size: 20px;
    text-shadow: 0px 0px 10px #332f46;
}

td {
    border: 3px solid #fff;
    border-radius: 6px;
    width: 100px;
    height: 100px;
    vertical-align: top;
    text-align: right;
    font-size: 30px;
    padding: 3px;
    box-sizing: border-box;
    font-family: numerot, sans-serif;
    background-color: rgba(255, 255, 255, 0.5);
    color: #375e95;
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

td:hover {
    background-color: hsl(215, 46%, 40%, 0.6);
    color: #fff;
}

.liputus {
    background-size: auto 22px;
}

.suomi {
    background-image: url(suomen-lippu.gif);
}
.saame {
    background-image: url(saamenlippu.svg);
}
.laskiainen {
    background-image: url(laskiaispulla.png);
}
.ystavanpaiva {
    background-image: url(sydän.svg);
    background-size: 20px auto;
}
.kuu {
    background-size: 20px auto;
}
.taysi {
    background-image: url(taysikuu.svg);
}
.vaheneva {
    background-image: url(vaheneva\ puolikuu.svg);
}
.uusi {
    background-image: url(uusikuu.svg);
}
.kasvava {
    background-image: url(kasvava\ puolikuu.svg);
}
.muu {
    color: #818181;
}
.su {
    color: rgb(192, 37, 37);
}