body {
    margin: 0;
    height: 100vh;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Italiana", sans-serif;;
    font-size: 3em;
    overflow: hidden;
}

.name span {
    transition: font-weight 0.25s;
    display: inline-block;
    opacity: 0;
}

.bold-first .first {
    font-weight: bold;
}

.bold-first .second {
    font-weight: normal;
}

.bold-second .first {
    font-weight: normal;
}

.bold-second .second {
    font-weight: bold;
}

/* Entrada */
.enter .first {
    animation: slideDown 0.5s ease-out forwards;
}

.enter .second {
    animation: slideUp 0.5s ease-out forwards;
}

/* Saída */
.exit .first {
    animation: exitDown 0.5s ease-in forwards;
}

.exit .second {
    animation: exitUp 0.5s ease-in forwards;
}

/* Animações */
@keyframes slideDown {
    0% { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
    0% { transform: translateY(100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes exitDown {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; }
}

@keyframes exitUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100px); opacity: 0; }
}