html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.main-body-styling {
  background-color: #e8b5b5;
  color: #3d3939;
  font-family: "Poppins", sans-serif;
}

.typewriter h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: 0.15em solid #3d3939; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Adjusts the width of the box as the letters appear */
    letter-spacing: 0.15em; /*TODO: Fine Tune */
    animation: typing 5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* Typing effect */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Typewriter cursor effect */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: #3d3939;
    }
}

.divider-helper {
    height: 3rem;
    background-color:transparent;
}

.project-card {
    background: #898383;
}

.read-more {
    background-color: #3D3939;
}

.tech-stack {
    background-color:#898383;
}

#vert-pills .nav-link{
    color:#898383;
}

#vert-pills .active {
    background-color: #3D3939;
} 

.repo-link {
    color: #3D3939;
}

@media screen and (max-width: 700px) {
    
    .typewriter h1 {
        overflow: hidden; /* Ensures the content is not revealed until the animation */
        border-right: 0.15em solid #3d3939; /* The typwriter cursor */
        white-space: nowrap; /* Keeps the content on a single line */
        width: fit-content;
        font-weight: bolder;
        margin: 0 auto; /* Adjusts the width of the box as the letters appear */
        letter-spacing: 0.15em; /*TODO: Fine Tune */
        animation: typing 5s steps(40, end), blink-caret 0.75s step-end infinite;
        font-size: 20px;
    }

    /* Typing effect */
    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 15em; 
        }
    }

    /* Typewriter cursor effect */
    @keyframes blink-caret {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: #3d3939;
        }
    }
}