style.css

* {
    padding: 0;
    margin: 0;
    font-family: 'Source Code Pro', monospace;
    box-sizing: border-box;
}

.hero {
    height: 100vh;
    width: 100%;
    background-color: #212121;
    display: flex;
    align-items: center;
}

.hero h4 {
    font-size: clamp(0.7rem, 3vw + 0.7rem, 2rem);
    position: relative;
    width: max-content;
    color: #00ff0d;
    text-shadow: 
    0 0 1px #00ff0d,
    0 0 3px #00ff0d,
    0 0 6px #00ff0d;
}

.hero h4::before,
.hero h4::after {
    content: '';
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero h4::after {
    width: 0.125em;
    background:#81c784;
    animation: typingText 4s steps(25) 1s forwards,
               typingCursor 740ms steps(25) infinite; 
}

.hero h4::before {
    background-color: #212121;
    animation: typingText 4s steps(25) 1s forwards;
}

@keyframes typingText {
    to {
        left: 100%;
    }
}

@keyframes typingCursor {
    to {
        background-color: transparent;
    }
}

.social-icons {
    justify-content: center;
    opacity: 0;
    animation: socialIconsAppear 3s ease-in 5s forwards;
}

.social-icons a {
    color: #b8b8b8;
    font-size: 1.5rem;
}

.social-icons a:hover {
    color: #ffffff;
    cursor: pointer;
}

@keyframes socialIconsAppear {
    to {
        opacity: 0.8;
    }
}