@font-face {
    font-family: overpass;
    src: url(fontit/Overpass/Overpass-VariableFont_wght.ttf);
}
@font-face {
    font-family: overpass;
    src: url(fontit/Overpass/Overpass-Italic-VariableFont_wght.ttf);
    font-style: italic;
}

@font-face {
    font-family: quicksand;
    src: url(fontit/Quicksand/Quicksand-VariableFont_wght.ttf);
}

@font-face {
    font-family: "caveat brush";
    src: url(fontit/Caveat_Brush/CaveatBrush-Regular.ttf);
}

body {
    font-family: overpass;

}

.varilaatikko {
    padding: 1em;
    display: inline-block;
}

.turkoosi {
    background-color: #0099cc;
    color: #fff;
}

.mustikka {
    background-color: #042546;
    color: #fff;
}

.petrooli {
    background-color: #8cc1b3;
    color: #042546;
}

.fuksia {
    background-color: #a5407b;
    color: #fff;
}

.idea {
    background-color: #f4d240;
    color: #042546;
}

.havu {
    background-color: #397368;
    color: #fff;
}

.hiekka {
    background-color: #f1eeeb;
}

table {
   border-collapse: collapse;
}

td, th{
    border: 1px solid #042546;
    padding: 0.2em 0.5em;
}

th{
    background-color: #042546;
    color: #fff;
    text-align: left;
}

img {
    width: 300px;
    height: auto;
}

.turkoosis {
    background-color: #042546;
}

.mustas {
    background-color: #0099cc;
}

.valkos {
    background-color: #0099cc;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}