.toggle-absent {
    display: none;
}


.generic-button {
    position: absolute;
    width: 32vmin;
    bottom: 7.5vmin;
    font-size:1.5vmin; /* will be used for next em */
}

.generic-button-text {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-family: "Gothica";
    font-size: 2em;
    color: #f7f7f7;
}

.generic-button-img {
    width: 100%;
    height: auto;
    filter: invert(30%) sepia(37%) saturate(1529%) hue-rotate(209deg) brightness(91%) contrast(86%); /* #4f4fa5 using this https://codepen.io/sosuke/pen/Pjoqqp */
    transition: transform 0.2s ease-in-out;
}

.generic-button-img:hover {
    transform: scale(1.05);
    filter: invert(22%) sepia(43%) saturate(1810%) hue-rotate(215deg) brightness(96%) contrast(91%);
}

.color-interesting {
    color:#ebca2f;
}


.medium-interaction-button {
    position: absolute;
    width: 24vw;
}
.medium-interaction-button-img {
    width: 100%;
    height: auto;
    filter: invert(30%) sepia(37%) saturate(1529%) hue-rotate(209deg) brightness(91%) contrast(86%); /* #4f4fa5 using this https://codepen.io/sosuke/pen/Pjoqqp */
    transition: transform 0.2s ease-in-out;
}
.medium-interaction-button-img:hover {
    transform: scale(1.05);
    filter: invert(22%) sepia(43%) saturate(1810%) hue-rotate(215deg) brightness(96%) contrast(91%);
}
.medium-interaction-button-text {
     position: absolute;
    top: 44%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-family: "Gothica";
    font-size: 2em;
    color: #f7f7f7;
}

.short-interaction-button {
    position: absolute;
    width: 5.5vw;
}
.short-interaction-button-img {
    width: 5.5vw;
    height: 80%;
    filter: invert(30%) sepia(37%) saturate(1529%) hue-rotate(209deg) brightness(91%) contrast(86%); /* #4f4fa5 using this https://codepen.io/sosuke/pen/Pjoqqp */
    transition: transform 0.2s ease-in-out;
}
.short-interaction-button-img:hover {
    transform: scale(1.05);
    filter: invert(22%) sepia(43%) saturate(1810%) hue-rotate(215deg) brightness(96%) contrast(91%);
}

.short-interaction-button-text {
    position: absolute;
    top: 41%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-family: "Gothica";
    font-size: 2em;
    color: #f7f7f7;
}


.recruit-vampire-button {
    position: absolute;
    width: 32vw;
    bottom: 10%;
}



.recruit-vampire-button-img {
    width: 100%;
    height: auto;
    filter: invert(30%) sepia(37%) saturate(1529%) hue-rotate(209deg) brightness(91%) contrast(86%); /* #4f4fa5 using this https://codepen.io/sosuke/pen/Pjoqqp */
    transition: transform 0.2s ease-in-out;
}

.recruit-vampire-button-img:hover {
    transform: scale(1.05);
    filter: invert(22%) sepia(43%) saturate(1810%) hue-rotate(215deg) brightness(96%) contrast(91%);
}

.recruit-vampire-button-text {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-family: "Gothica";
    font-size: 2em;
    color: #f7f7f7;
}