* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background: #f4f4f4;
    font-family: sans-serif;
}


.page-wrapper {
    display: grid;
    min-height: 100%;
    padding-inline: 1rem;

    grid-template-rows: calc(60px + 2rem) 1fr calc(15px + 4rem);
    min-height: 0;
}

main {
    min-height: 0;
}



main > div {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 1rem;
}

main > div > img {
    display: block;
    width: 100%;
}


canvas {
    /* border: 1px solid black; */
    display: block;
    margin-inline: auto;
    /* object-fit: contain; */


    aspect-ratio: 1/1;
    /* max-width: min(800px, calc(100vh - 80px - 5rem - 4px)); */

    /* width: 100%; */
    max-height: 100%;
    max-width: 100%;
    /* height: 100%; */
    /* max-width: 100%; */
    margin-bottom: 2rem;
}

header {
    text-align: center;
    padding-block: 1rem;

    & img {
        height: 60px;
        display: block;
        margin-inline: auto;
    }
}

footer {
    text-align: center;
    padding-block: 2rem;

    & small {
        font-size: 14px;
    }
}