body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#main {
    width: 100vw;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #222425;
}

#main > *:nth-child(2) {
    margin-top: 2rem;
}

#main > *:last-child {
    margin-bottom: 2rem;
}

.page img {
    max-width: 100%;
}

.page {
    max-width: 80vw;
    height: auto;
    align-content: center;
    background-color: inherit;
}

.redacted > img {
    filter: blur(1vw)
}


.redacted {
    position: relative;
}

.redacted:after {
    content: "This page will be unlocked after the intermission, stay tuned";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3vw;
    text-align: center;
}
#print {
    position: fixed;
    top: 2rem;
    right: 1rem;
    background-color: rgba(61, 61, 61, 0);
    border-radius: 1rem;
    height: clamp(3rem, 7vw, 4rem);
    width: clamp(5.5rem, 11vw, 7rem);
    font-size: clamp(0.75rem, 1.7vw, 1rem);
    color: rgba(255, 255, 255, 0);
    border-width: 0;
    cursor: pointer;
    transition: 0.2s;
}

#print.active {
    background-color: rgba(61, 61, 61, 0.75);
    color: rgba(255,255,255,1);
    transition: 0.5s;
}


@media (hover: hover) {
    #print:hover {
        transform: scale(1.1);
        transition: 0.1s
    }
}

@media print {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    #main {
        width: 98%;

        align-items: center;
        align-content: center;
    }
    @page {
        size: A4 portrait;
        margin: 0;
        padding: 0;
    }

    button {
        display: none;
    }

    .page {
        max-width: 100%;
        max-height: 100%;
        page-break-after: always;
        object-fit: cover;
        align-self: center;
    }

    img {
        margin: auto
    }

    #main img:last-child {
        page-break-after: auto;
    }
}