.hero{
    z-index: 1;
}


#name{
    font-weight: 600;
    color: white;
    position: absolute;
    top: 14vw;

    font-size: 30vw;
    z-index: -1;
    animation: scroll 10s ease-in-out infinite alternate;
    
    font-family: 'Roboto', sans-serif;
    
}


body{
    background-color: black;
    margin-bottom: 10px;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h2 {
    font-size: xx-large;
    color: black;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation:
        typing 3.5s steps(30, end),
        blink-caret .5s step-end infinite;
}
#aboutme{
    background-color: white;
    
}
#about-description{
    font-family: 'PT Serif', serif;
    color: rgb(8, 8, 107);
}
#my-work-heading{
    color: white;
    padding-top: 3%;
    
    margin-bottom: 0;
    padding-bottom: 0;
}
#hanging-icons{
    background-color: white;
}

.list-group{
    font-family: 'PT Serif',serif;
}


.interest-description{
    font-family: 'PT Serif',
        serif;
        color: rgb(8, 8, 107);
}
/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: orange
    }
}


@keyframes scroll {
    0% {
        left: 75%;
    }

    100% {
        left: -175%;
    }
}