@font-face {
  font-family: numerot;
  src: url(fontit/KaushanScript-Regular.ttf);
}

@font-face {
  font-family: otsikko;
  src: url(fontit/WalterTurncoat-Regular.ttf);
}

@font-face {
  font-family: soluotsikko;
  src: url(fontit/UbuntuCondensed-Regular.ttf);
}



body {
    background-color: rgb(170, 207, 255);
    background-image: url(talvimaisema.jpg);
    background-position: center;
    min-height: 100vh;
    color:rgb(255, 255, 255);
    padding: 1px; 
   box-sizing: border-box;
   margin: 0; 
}

h1 {
  text-align: center;
  font-family: otsikko, sans-serif;
  font-size: 60px;
  font-weight: normal; 
  margin: 0px;
   text-shadow:  3px 3px 0px rgb(81, 81, 90);

}

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

}

th {

  font-family: soluotsikko, sans-serif;
  font-weight: normal;
  font-size: 20px;
  text-shadow: 2px 2px 0px rgb(81, 81, 90);

}

td {
  
font-family: numerot, serif;
border: 2px solid white;
 border-radius: 6px;
 width: 120px;
 height: 120px;
    vertical-align: top;
    text-align: right;
    font-size: 30px;
    padding-top: 4px;
 padding-right: 5px;
 box-sizing: border-box;
 background-color: rgba(255, 255, 255, 0.5);
 color: rgb(2, 3, 17);
  

}

td:hover {
  background-color: hsla(235, 74%, 21%, 0.5);
    
  color:#fff;
}

.liputus {
background-repeat: no-repeat;
background-position: 5px 5px;
background-size: auto 22px; 

}

.suomi {
    background-image: url(suomenlippu.gif);
}
.saame{
background-image: url(saamenlippu.svg)

}

.laskiainen {
background-image: url(laskiaspulla.png);
background-repeat: no-repeat;
background-position: 7px 7px;
background-size: auto 30px; 
}

.ystavanpaiva{
background-image: url(sydan.svg);
background-repeat: no-repeat;
background-position: 7px 7px;
background-size: auto 30px; 

}

.taysikuu {
  background-image: url(kuu/taysikuu.svg);
background-repeat: no-repeat;
background-position: 9px 9%;
background-size: auto 30px; 
}

.uusikuu {
background-image: url(kuu/uusikuu.svg);
background-repeat: no-repeat;
background-position: 9px 9px;
background-size: auto 30px; 

}

.kasvavapuolikuu {
background-image: url(kuu/kasvavapuolikuu.svg);
background-repeat: no-repeat;
background-position: 9px 9px;
background-size: auto 30px; 

}

.vahenevapuolikuu {
background-image: url(kuu/vaheneva.puolikuu.svg);
background-repeat: no-repeat;
background-position: 9px 9px;
background-size: auto 30px; 

}

.muu {

  color: rgb(75, 75, 75);

}

.su {

color: rgb(182, 33, 33);

}