body,
html {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.bg {
    /* The image used */
    background-image: url("../img/Bonaparte-Sphinx-3071-1838.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flow-root;
    background-attachment: fixed;
    padding-left: 2rem;
    padding-right: 2rem;
}

h1 {
    color: darkred;
    font-size: 2rem;
    line-height: 1rem;
    /*
    transition: line-height 1s;
    transition-timing-function: ease-in-out;
    */
}

h2,
a {
    color: darkred;
}

.content {
    background: rgba(255, 255, 255, 0.75);
    background-blend-mode: color-burn;
    padding: 2rem;
    margin: 2rem auto;
    border-radius: 1rem;
    box-shadow: 2px 2px 5px rgba(0, 0, 0 0.3);
    backdrop-filter: blur(5px);
    max-width: 900px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

p {
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.initialStyle,
.initialStyle * {

    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
/*
    background: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0);
    */
}

.initialStyle.content {
    backdrop-filter: unset;
}

.i {
    font-style: italic;
}

.imprint {
    max-width: 100px;
    float: right;
}