body {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

#headline {
    position: absolute;
}

#imprint-link {
}

#headline,
#imprint-link,
#etsy-link,
#back-link {
    margin: 20px;
    font-size: 40px;
    font-weight: bold;
}

#imprint-link:hover,
#etsy-link:hover,
#back-link:hover {
    cursor: pointer;
    color: deeppink;
}

.top-center-bottom-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.top-box,
.bottom-box {
    width: 100%;
    height: 100px;
    max-height: 10%;
    display: flex;
}

.top-box,
.bottom-box {
    justify-content: center;
    align-items: flex-end;
}

.center-box {
    width: 100%;
    height: 500px;
    max-height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.graphic-link {
    width: 20%;
    height: 100%;
    flex-shrink: 0;
    margin: 50px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.graphic-link .link-text {
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: transparent;
    transition: color 1s;
}

.graphic-link .black-background {
    margin-top: 20px;
    filter: invert(0%) sepia(99%) saturate(0%) hue-rotate(176deg) brightness(101%) contrast(101%);
    transition: filter 1s;
}

.graphic-link:hover .black-background {
    filter: invert(26%) sepia(73%) saturate(6621%) hue-rotate(316deg) brightness(101%) contrast(101%);
}

.graphic-link .white-background {
    transition: fill 1s;
}

.graphic-link:hover .white-background {
    fill: deeppink;
}

.graphic-link:hover .link-text {
    color: deeppink;
}

.text-box {
    width: 800px;
    font-size: 20px;
}

@media (max-width: 800px) {
    .graphic-link {
        width: 33%;
    }

    .text-box {
        width: 90%;
    }
}