html, body { font-size: 100%; height: 100%; margin: 0; padding: 0; }
body { background-image: url('img/wood.jpg'); position: relative; font-family: 'Playpen Sans', cursive; font-size: 20px; }
.signature { font-family: 'Homemade Apple', cursive; font-size: 1.5rem; }
.photograph {border: 0.5em solid #fff; border-bottom: 3em solid #fff; border-radius: 0.1em; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1); display: block; margin: 1em auto 2em auto; max-height: 450px; max-width: 90%; transform: rotateZ(-1deg);}
.photo-pair { position: relative; }
.photo-pair .photograph { display: inline;  max-width: 54%; }
.photo-pair :nth-child(1 of img.photograph) { position: absolute; top: 10px; right: 0; transform: rotateZ(-5deg); }
.photo-pair :nth-child(2 of img.photograph) { position: relative; top: -5px; left: 0; transform: rotateZ(3deg); }
h1, h2, h3, h4, h5, h6 { font-family: 'Ephesis', cursive; text-align: center; }
h1 { font-size: 3.5rem; line-height: normal; margin-bottom: 0; }
h2 { font-size: 2.5rem; line-height: normal; }
main { align-items: center; display: flex; justify-content: center; position: relative; z-index: 1; }
.container { animation: fadeInAnimation ease 2s; animation-iteration-count: 1; animation-fill-mode: forwards; border: 2px dashed #970c23; border-radius: 10px; box-shadow: 0 0 0 4px #fff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); color: #970c23; margin: 50px 10px; max-width: 50rem; padding: 20px 50px; width: 90vw; background-image: url("img/linedpaper.png");}
h1, h2, p, li, img { animation: fadeInAnimation ease 2s; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards; opacity: 0; }
@media (max-width: 767px) {
    .container { padding: 15px; }
}
@media (max-width: 600px) {
    .photo-pair .photograph { display: block; max-width: 80%; }
    .photo-pair :nth-child(1 of img.photograph) { position: relative; top: 0;}
    .photo-pair :nth-child(2 of img.photograph) { top: 0; margin-top: -55px; }
    .photo-pair .photograph { margin-bottom: 0; }
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}