.home-button {
    width: 2vw;
    height: 2vw;
    border-radius: .5em;
    box-shadow: rgba(0, 0, 0, .4) 0 10px 10px -10px;
    padding: 1rem;
    transition-duration: 250ms;
    transition: translateY(-50%);
}

.pop-up-aparition {
    opacity: 0;
    animation: popUp 250ms ease-in-out forwards;
}

@keyframes popUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

.home-button:hover {
    transform: scale(1.1);
}

.home-button.green {
    background-color: var(--standard-green);
    color: white;
}

.home-button.green:hover {
    background-color: var(--highlight-green);
}

.home-button.green.active {
    background-color: var(--active-green) !important;
    box-shadow: none;
}

.home-button.red {
    background-color: var(--standard-red);
    color: white;
}

.home-button.red:hover {
    background-color: var(--highlight-red);
}

.home-button.red.active {
    background-color: var(--active-red) !important;
    box-shadow: none;
}

.home-button.blue {
    background-color: var(--standard-blue);
    color: white;
}

.home-button.blue:hover {
    background-color: var(--highlight-blue);
}

.home-button.blue.active {
    background-color: var(--active-blue) !important;
    box-shadow: none;
}

.home-button.orange {
    background-color: var(--standard-orange);
    color: white;
}

.home-button.orange:hover {
    background-color: var(--highlight-orange);
}

.home-button.orange.active {
    background-color: var(--active-orange) !important;
    box-shadow: none;
}

.home-button.grey {
    background-color: var(--standard-grey);
    color: white;
}

.home-button.grey:hover {
    background-color: var(--highlight-grey);
    color: black
}

.home-button.grey.active {
    background-color: var(--active-grey) !important;
    box-shadow: none;
}

.home-button.purple {
    background-color: var(--standard-purple);
    color: white;
}

.home-button.purple:hover {
    background-color: var(--highlight-purple);
}

.home-button.purple.active {
    background-color: var(--active-purple) !important;
    box-shadow: none;
}

.tab-button {
    max-width: fit-content;
    height: 2vw;
    border-radius: .5em;
    box-shadow: rgba(0, 0, 0, .4) 0 10px 20px -10px;
    transition: 250ms;
    padding: 1rem;
    white-space: nowrap;
}

.tab-button:hover {
    transform: scale(1.1);
}

.tab-button.green {
    background-color: var(--standard-green);
    color: white;
}

.tab-button.green:hover {
    background-color: var(--highlight-green);
}

.tab-button.green.active {
    background-color: var(--active-green) !important;
    box-shadow: none;
}

.tab-button.red {
    background-color: var(--standard-red);
    color: white;
}

.tab-button.red:hover {
    background-color: var(--highlight-red);
}

.tab-button.red.active {
    background-color: var(--active-red) !important;
    box-shadow: none;
}

.tab-button.blue {
    background-color: var(--standard-blue);
    color: white;
}

.tab-button.blue:hover {
    background-color: var(--highlight-blue);
}

.tab-button.blue.active {
    background-color: var(--active-blue) !important;
    box-shadow: none;
}

.tab-button.orange {
    background-color: var(--standard-orange);
    color: white;
}

.tab-button.orange:hover {
    background-color: var(--highlight-orange);
}

.tab-button.orange.active {
    background-color: var(--active-orange) !important;
    box-shadow: none;
}

.tab-button.grey {
    background-color: var(--standard-grey);
    color: white;
}

.tab-button.grey:hover {
    background-color: var(--highlight-grey);
    color: black
}

.tab-button.grey.active {
    background-color: var(--active-grey) !important;
    box-shadow: none;
}

.tab-button.purple {
    background-color: var(--standard-purple);
    color: white;
}

.tab-button.purple:hover {
    background-color: var(--highlight-purple);
}

.tab-button.purple.active {
    background-color: var(--active-purple) !important;
    box-shadow: none;
}