@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Dosis:wght@200&family=Playfair+Display+SC&family=Poppins:wght@100&family=Ubuntu+Mono&display=swap');

body {
    font-family: sans-serif;
    background-color: #FEEAE3;
    line-height: 24px;
    color: #8B5757;
}

header,
footer {
    background-color: #8B5757;
}

h1 {
    text-align: center;
    color: #FEF1FE;
    padding: 20px 10px 1px;
}

header a {
    color: #FEF1FE;
    font-size: 23px;
}

header ul {
    padding-bottom: 10px;
    text-align: center;
}

footer a {
    color: #FEF1FE;
}

a {
    color: #8B5757;
    text-decoration: none;
}

header a:hover {
    color: #8B5757;
    background-color: #FEF1FE;
}

footer a:hover {
    color: #8B5757;
    background-color: #FEF1FE;
}

a:hover {
    color: #FEEAE3;
    background-color: #8B5757;
    text-decoration: none;
}

h3 {
    text-decoration: underline;
}

div a {
    text-decoration: underline
}

#kleuren,
#lettertypes {
    text-decoration: underline;
    line-height: 4px;
}

section {
    margin: 1.5rem 2.5rem;
    padding: 1rem 1.5rem;
    max-width: 350px;
}

#sec1,
#sec2,
#sec3 {
    border-style: solid;
    border-color: black;
    border-radius: 15px;
}

section h2 {
    font-size: 28px;
}

section p {
    font-size: 19px;
}

#sec1 {
    font-family: 'Ubuntu Mono', monospace;
}


#sec2 h2 {
    font-family: 'Courgette', cursive;
}

#sec2 p {
    font-family: 'Playfair Display SC', serif;
}

#sec3 h2 {
    font-family: 'Poppins', sans-serif;
}

#sec3 p {
    font-family: 'Dosis', sans-serif;
}

#sec4 {
    border-style: solid;
    background: #F8FFE7;
    border-color: #DBFFDB;
    box-shadow: 6px 8px #D3E8C8;
    border-radius: 8pt;
}

#sec5 {
    border-style: ridge;
    background: #F5E902;
    border-color: #1BB6F5;
    box-shadow: 3px 4px #F51B42;
}

#sec5 h2 {
    color: #F51B42;
}

#sec5 p {
    color: #1BB6F5;
}

#sec6 {
    border-style: double;
    border-width: 4px;
    background: #FAE6BE;
    border-color: #DED1A9;
    box-shadow: 3px 2px 6px #EBCBA7;
    border-radius: 5pt 0pt;

}

#sec7 {
    border-style: solid;
    border-width: thick;
    color: #EDEDED;
    background: #2B2B2B;
    border-color: #EDEDED;
    border-radius: 50pt;
}

#sec8 {
    border-style: solid;
    background: #C3B7C5;
    border-color: #265902;
    border-bottom-color: #022601;
    border-top-color: #022601;
    border-bottom-style: dotted;
    border-top-style: dotted;
    border-radius: 100%;
    text-align: center;
    border-width: thick;
}

footer {
    text-align: center;
}

#boven {
    text-align: center;
}