body {
    /* Background colour is matched to the image for cleaner loading */
    background-color: #9097a3;
    background-image: url("images/pkz50037.jpg");
    color: pink;
    margin: 60px;
    font-family: monospace;
}

h1 {
    text-decoration: underline;
}

h2 {
    padding: 10px;
    font-family: tintin;
}

h3 {
    padding: 20px;
}

hr {
    border: none;
    border-top: dashed rgb(179, 242, 116);
}

img {
    /* Ensured images don't go oversize */
    max-width: 80%;
}

a {
    color: orange;
}

p {
    color: white;
    font-size: large;
    padding-left: 20px;
}

#wrapper {
    /* This bit styles the content area and gives it a blur */
    background-color: #206cb8;
    box-shadow: 0px 0px 40px 40px #206cb8;
    padding: 10px;
    /* This bit makes it centred on big screens */
    max-width: 900px;
    margin: auto;
}

.example {
    background-color: rgb(46, 72, 51);
    border: 2px double rgb(232, 219, 39);
    border-radius: 25px;
    padding: 10px;
    margin: 5px;
}

.toc {
    background-color: rgb(49, 65, 90);
    border: 2px double rgb(39, 232, 181);
    border-radius: 25px;
    padding: 10px;
    margin: 5px;
    width: fit-content;
    margin-left: 40px
}

.toc li {
    margin-top: 5px;
    margin-bottom: 5px;
}

@font-face {
    font-family: tintin;
    src: url(fonts/tintin_talking.ttf);
}