:root{
    --primary: #185c81;
}


body{
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    background-size: cover;   
    background-position: center center;
    background-attachment: fixed;
    height: 100vh;
}

.transparent-text {
    font-size: 5rem;
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(255, 255, 255, 0.8) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 100% 100%;
    text-decoration: none;
}

.transparent-text::before {
    content: 'Entra';
    position: absolute;
    top: 0;
    left: 0;
    color: var(--primary);
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.5s ease;
}

.transparent-text::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 0;
    height: 6px;
    background-color: var(--primary);
    transition: 
        width 0.3s ease-in-out,
        left 0.3s ease-in-out;
}

.transparent-text:hover::after {
    width: 100%;
    left: 0;
}

.transparent-text:hover::before {
    width: 100%;
    cursor: pointer;
}