html {
    --clr-bg: #272822;
    --clr-fg: #d6d6d6;
    --clr-dark-bg: #1e1f1c;
    --clr-hover: #e6db74;
    --clr-white: var(--clr-fg);
    --btn-shift: 3px;
    --btn-reverse-shift: calc(-1 * var(--btn-shift));
    --btn-extra-shift: calc(2 * var(--btn-shift));
    --img-padding: 25px;
}

.banner-bg {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--clr-dark-bg);
    width: 100%;
    margin-bottom: var(--img-padding);
}

.banner-bg a {
    margin-top: var(--img-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 0px; */
}

.banner {
    width: 400px;
    max-width: 75%;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(var(--btn-shift) var(--btn-shift) 0px var(--clr-white));
}

.banner:hover {
    transform: translate(var(--btn-reverse-shift), var(--btn-reverse-shift));
    filter: drop-shadow(var(--btn-extra-shift) var(--btn-extra-shift) 0px var(--clr-hover));
}

.banner:active {
    transform: translate(var(--btn-shift), var(--btn-shift));
    filter: none;
}

a {
    float: left;
    width: 700px;
    max-width: 75%;

    object-fit: cover;
    margin-bottom: var(--img-padding);
}

.showcase {
    width: 100%;
    box-shadow: var(--btn-shift) var(--btn-shift) 0px var(--clr-dark-bg);
}

.showcase:hover {
    transform: translate(var(--btn-reverse-shift), var(--btn-reverse-shift));
    box-shadow: var(--btn-extra-shift) var(--btn-extra-shift) 0px var(--clr-hover);
}

.showcase:active {
    transform: translate(var(--btn-shift), var(--btn-shift));
    box-shadow: none;
}

body {
    margin: 0;
    background-color: var(--clr-bg);
    display: flex;
    align-items: center;
    flex-direction: column;
}