@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Smooch+Sans:wght@100..900&family=Ultra&display=swap');


body {
    background-color: rgb(39, 115, 255);
    color: #fff;
    background-image: url(lappi.jpg);
    min-height: 100vh;
    margin: 0;
    background-size: cover;
    padding: 1px;
    box-sizing: border-box;
    background-position: center center;
}

td {
    border: 2px solid #fff;
    border-radius: 6px;
    width: 120px;
    height: 120px;
    vertical-align: top;
    text-align: right;
    font-size: 30px;
    padding-top: 5px;
    padding-right: 20px;
    box-sizing: border-box;
    font-family: "Caveat", serif;
    color: #0033c0;
    background-color: rgba(255, 255, 255, 0.7);
    background-repeat: no-repeat;
}

th {
    font-family: "Smooch Sans", serif;
    font-weight: normal;
}

table {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 5px;
}

h1{
    text-align: center;
    font-family: "Ultra", serif;
    font-weight: normal;
    font-size: 60px;
    margin-bottom: 10px;
}

h1 a{
    color: inherit;
    text-decoration: none;
    margin: 50px;
}

h1, th {
    text-shadow: 0px 0px 20px #0b1c4b;
}

.su{
    color: red;
}

.muu{
    color: #777777;
}

.laskiainen{
    background-image: url(pulla.png);
}

.ustavanpaiva{
    background-image: url(Heart_corazón.svg);
    background-size: 40px;
}

.liputus{
    background-position: 8px 10px;
}

.saame{
    background-image: url(Sami_flag.svg);
    background-size: auto 22px;
}

.suomi{
    background-image: url(suomenlippu.gif);
}

.kuu{
    background-size: 40px;
    background-position: 2px 4px;
}

.kasvava{
    background-image: url(kasvava.svg);
}

.vaheneva{
    background-image: url(vaheneva.svg);
}

.taysi{
    background-image: url(taysikuu.svg);
}

.uusi{
    background-image: url(uusikuu.svg);
}

td:hover {
    background-color: hsla(234, 54%, 31%, 0.7);
    color: #fff;
}

h1 a:hover{
    text-shadow: 0px 0px 30px #000000, 0px 0px 30px #000000;
}