@font-face {
    font-family: "overpass";
    src: url(fontit/Overpass/Overpass-VariableFont_wght.ttf);
}
@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";
    background-color: #042546;
    margin: auto;
}
h1, h2 {
    font-family: "quicksand";
    margin-bottom: 50px;
}
.kaikki {
    background-color: #fff;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}
.väriteksti {
    margin-top: 20px;
}
.bold {
    font-family: "overpass";
    font-weight: bold;
    margin-top: 30px;
}
.circle {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 15px;
  box-shadow: 5px 5px 20px #858585;
}
.turkoosi{
    background-color: #0099cc;
    color: #fff;
}
.mustikka {
    background-color: #042546;
    color: #fff;
}
.petrooli {
    background-color: #8cc1b3;
}
.fuksia {
    background-color: #a5407b;
    color: #fff;
}
.idea {
    background-color: #f4d240;
}
.havu {
    background-color: #397368;
    color: #fff;
}
.logo {
    width: 350px;
    background-color: #042546;
    box-shadow: 5px 5px 20px #858585;
    border-radius: 10px;
    margin-top: 30px;
}
.valkoinen {

    background-color: #ffffff;
    box-shadow: 5px 5px 20px #858585;
}
.quicksand {
    font-family: "quicksand";
}
.overpass {
    font-family: "overpass";
}
.caveat-brush {
    font-family: "caveat-brush";
    font-size: 22px;
    font-weight: 400;
}
a {
    color: #09498a;
    font-weight: 500;
}
a:hover {
    text-decoration: none;
}

pre {
    background-color: aliceblue;
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 10px;
}