@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap');

body {
    font-family: 'Quattrocento Sans', sans-serif;
    text-align: justify;
}

h1 h2 {
    font-weight: bold;
}

h1 {
    font-family: 'Racing Sans One', serif;
    text-align: center;
}

h2 {
    font-family: 'Dosis', sans-serif;
}

.flow_wrapper {
    text-align: center;
}

svg {
    text-align: initial;
}

.container {
    display: block;
    width: 700px;
    margin: auto;
}

.artifact_section {
    text-align: center;
    display: inline-block;
    justify-content: center;
    align-items: center;
    margin-top:0;
    margin-bottom:0;
}

.artifact_outer {
    display: inline-block;
    align-items: center;
    justify-items: center;
}

.artifact_inner {
    display: inline;
    width: 350px;
}

.artifact_image {
    height: 225px;
}

.canvas-container {
    width: 100%;
    max-width: 800px;
}

canvas {
    display: block;
    width: 95%;
    height: auto;
    margin: auto;
    background: linear-gradient(to bottom,
        #87ceeb 0%,
        #a8d5a2 25%,
        #5a9f5a 50%,
        #3d7a3d 100%);
    border-radius: 12px;
    box-shadow:
        0 0 20px rgba(61, 122, 61, 0.4),
        0 0 40px rgba(61, 122, 61, 0.2),
        0 0 60px rgba(61, 122, 61, 0.1);
}