#home {
    width: 21vw;
    position: absolute;
    bottom: calc(2vw + 3px);
    right: calc(2vw + 1px);
    padding-right: 3vw;
    display: flex;
    flex-direction: column;
    align-items: end;
}

@media only screen and (max-width: 750px) {
    #home {
        width: 50vw;
    }
}

#home p {
    color: var(--white);
    font-size: min(1.5em, max(2vw, 18px));
    text-align: end;
    margin-top: 1vw;
    font-weight: bold;
}

.hideIndex {
    animation: 1s fadeOutTopIndex forwards;
}

.showIndex {
    animation: 1s fadeInBottomIndex forwards;
}

@keyframes fadeInBottomIndex {
    0% {
        bottom: -100vh;
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        bottom: calc(2vw + 3px);
    }
}

@keyframes fadeOutTopIndex {
    0% {
        bottom: calc(2vw + 3px);
    }

    60% {
        opacity: 0;
    }

    100% {
        bottom: calc(100vh + 3px);
        opacity: 0;
    }
}