.landing-block {
    padding: 6rem;

    display: flex;
    flex-direction: row;
    gap: 2rem;
}

/* Upper block*/
.hero-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    padding: 2rem 1rem;
    background: #EEEEEE;
}

.landing-links {
    width: 100%;
    text-align: center;
}

button{
    font-size: 20px;
}

/* Animated Button*/
.landing-links {
    width: fit-content;
    padding: 1rem;
    height: fit-content;

}

.button-container {
    position: relative;
    margin: auto;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1rem;
        border-radius: 100px;
        width: 2rem;
        height: 2rem;
        transform: translate(0%, -25%);
        background: rgba(0, 0, 255, 0.5);
        transition: width 0.3s ease;
    }
}

.landing-links:hover .button-container:before {
    width: calc(100% + 2rem);
}

.button-container .animated-button {
    position: relative;
    white-space: nowrap;
}