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

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

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

.leipa {
    font-family: leipa, sans-serif;
}

.otsikko {
    font-family: otsikko, sans-serif;
}

.caveat {
    font-family: caveat, sans-serif;
}

img {
    max-width: 100%;
}

.logo {
    width: 300px;
    text-align: center;
    margin-top: 1em;
}

.logo img {
    box-shadow: 0px 0px 40px gray;
}

pre {
    background-color: beige;
    padding: 10px;
    font-family: "Overpass Mono", monospace;
    font-size: 95%;
    white-space: pre-wrap;
    word-break: break-all;
}

.logo.tredu {
    background-color: #042546;
}

.logo.valkoinen {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 30px #c0c0c0;
}

.laatikkomustikka {
    background-color: #042546;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
.laatikkoturkoosi {
    background-color: #0099cc;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
.laatikkopunkku {
    background-color: #a5407b;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
.laatikkominttu {
    background-color: #8cc1b3;
    color: #042546;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
.laatikkokeltsu {
    background-color: #f4d240;
    color: #042546;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
.laatikkovihree {
    background-color: #397368;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
.laatikkoharmaa {
    background-color: #f1eeeb;
    color: #042 546;
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-radius: 20px;
}
 
table td {
    border:  2px solid #855664;
    text-align: left;
    padding: 10px 10px;
}
 
table {
    background-color: #fff;
    width: 650px;
    border-collapse: collapse;
    margin-top: 20px;
}
 
th {
    background-color: #ffabc3;
    text-align: left;
    color: #fff;
    padding: 10px;
    border:  2px solid #915265;
}
 
 h1, h2, h3{
    font-family: otsikko, sans-serif;
 }

 p{
    font-family: leipa, sans-serif;
 }