:root {
    --text: #e5e1ec;
    --background: #130d1b;
    --primary: #ae90da;
    --secondary: #4e218f;
    --accent: #7a32e4;
    --secondary10: hsl(265, 63%, 35%, 10%);
    --secondary30: hsl(265, 63%, 35%, 30%);
}

body {
    color: var(--text);
    background-color: var(--background);
    overflow: hidden;
    font-family: 'Poppins', 'Times New Roman', Arial;
    margin: 1vw;
}

div#titulo {
    display: inline-block;
}

h1#encabezado {
    border-right: 2px solid;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation:
        typing 2s steps(22),
        cursor .4s step-end infinite alternate;
}

#redes {
    display: flex;
    position: absolute;
    gap: 10%;
    bottom: 1%;
    width: 50px;
    height: 50px;
}

#redes * {
    transition: all 0.1s;
}

#redes *:hover *{
    overflow: visible;
    transform: translate3d(0,-2px,0);
    fill: var(--text)
}

#bmc {
    position: absolute;
    left: 0.5%;
}

.link {
    text-decoration: underline var(--accent);
    color: var(--text);
    text-underline-offset: 5px;
    transition: all 0.1s ease;
    
}

.link:hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: all 0.1s ease;    
    
}

.slideInBottom {
    animation: slideInBottom 1.5s;
}

/* animaciones */

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes cursor {
    50% {
        border-color: transparent;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(10vh);
    }

    to {
        transform: translateY(1%);
    }
}