/*
Default styles for a default workpiece
If i don't know what something shoudl look like,
it should look like this!
*/

body {
    margin: 0;
    padding: 0;
    background: var(--colour_bg);
    font-family: var(--font_body);
    font-size: 20px;
}

* {
    box-sizing: border-box;
}

main {
    max-width: 700px;
    margin: auto;
}

figure {
    max-width: calc(var(--line-length) / 1.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

figure img {
    max-width: 100%;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    border: 4mm ridge var(--colour_accent);
    padding: 1.5rem;
}

section:first-of-type {
    margin-top: 3rem;
}
section:last-of-type {
    margin-bottom: 3rem;
}

section p {
    max-width: calc(var(--line-length) / 1.25);
}

section h2 {
    margin-bottom: 0;
}

h1 {
    display: none;
}

img#title-image {
    width: 700px;
    margin: auto;
}

h1, h2 {
    font-family: var(--font_headings);
}

footer {
    width: 100%;
    font-size: 0.9em;
    margin-top: 1.5rem;
}

.rainbow {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: white;
        background-image: none;
    border-radius: 4px;
    background-image: repeating-linear-gradient( to right, indianred 0px, indianred 25px, orange 25px, orange 50px, khaki 50px, khaki 75px, mediumseagreen 75px, mediumseagreen 100px, dodgerblue 100px, dodgerblue 125px, indigo 125px, indigo 150px, darkorchid 150px, darkorchid 175px );
}


.rainbow div.paper {
    background: hsl(0, 99%, 99%);
    padding: 1.5rem;
    width: 100%;
    margin: 0;
    margin-top: 0.5rem;
    position: relative;
}

.rainbow div.paper a {
    color: cornflowerblue;
    text-decoration: none;

}


footer p {
    margin: 0;
}