html,
body {
    background-image: url("diorama.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.imgtxt {
    width: fit-content;
    height: fit-content;
    display: inline-block;
    position: relative;
}

.imgtxt span {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 2.5rem;
    color: #FFF;
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(1px -1px 0 black) drop-shadow(-1px -1px 0 black);
}

.imgtxt:hover span,
.imgtxt:focus span {
    opacity: 1;
}

.imgtxt:hover img,
.imgtxt:focus img {
    filter: grayscale();
    rotate: 1deg;
}

header {
    padding: 15px;
    text-align: center;
    font-size: 25px;
    font-family: Kinda3D-Bgdl;
    color: cadetblue;
}

article {
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-family: Kinda3D-Bgdl;
    color: aliceblue;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}