@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Fredericka+the+Great&display=swap');

body {
background-color: rgb(101, 176, 236);
background-image: url(Maisema_talvi.jpg);
background-size: cover;
min-height: 100vh;
margin: 0;
padding: 1px;
box-sizing: border-box;
background-position: center center;
color: #fff;
}

h1 {
    text-align: center;
    font-size: 50px;
    font-family: "Fredericka the Great", serif;
    margin-bottom: 10px;
}
h1 a{
    color: inherit;
    text-decoration: none;
    margin: 40px;
}
h1 a:hover {
    text-shadow: 0px 0px 15px #102a5a,
                 0px 0px 10px #3a6ac4,
                 0px 0px 4px #000000;
}

table {

    margin-left: auto;
    margin-right: auto;
    border-spacing: 5px;
}

th {
    font-family: "Oswald", serif;
    font-weight: normal;
}


td {
border: 2px solid #ffffff;
border-radius: 6px;
width: 150px;
height: 150px;
vertical-align: top;
text-align: right;
font-size: 40px;
padding: 5px;
box-sizing: border-box;
font-family: "Birthstone", serif;
padding-top: 1px;
padding-right: 10px;
color: rgb(49, 43, 102);
background-color: #ffffffab;
background-size: 40px;
background-position: 8px 10px;
background-repeat: no-repeat;

}
.su {
    color: #fa0606;
}
.muu {
    color: #999;
}

.h1, th {
    text-shadow: 0px 0px 20px #102a5a;
}

td:hover {
    background-color: #9e9e9eab;
    color: #fff;
}
.laskiainen {
    background-image: url(laskiaispulla.png);
    background-repeat: no-repeat;
    background-position: 8px 10px;
}
.ystavanpaiva {
    background-image: url(Love_Heart_symbol.svg);


}
.liputus {}

.suomi {
    background-image: url(finland.png);

;
}

.saame {
    background-image: url(saamen_lippu.webp);

}
.kuu {
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 8px 10px;
}

.uusi {
    background-image: url(uusikuu.svg);
}

.kasvava {
    background-image: url(vahenevapuolikuu.svg);
}

.taysi {
    background-image: url(taysikuu.svg);
}

.vaheneva {
    background-image: url(kasvavapuoli.svg);
}