@import url(open-sans-font.css);

.typed-text {
    font-family: OpenSans-Bold;
    color: rgb(77, 77, 77);
    color: rgb(40, 182, 78);
}

.cursor {
    display: inline-block;
    width: 3px;
    background-color: rgb(184, 184, 184);
    background-color: rgb(40, 182, 78);
    border-radius: 10px;
    margin-left: 0.5rem;
    animation: blink .85s infinite;
}

    .cursor.typing {
        animation: none;
    }

@media(max-width:600px) {
    .cursor {
        font-size: 32px;
    }
}

@media(max-width:400px) {
    .cursor {
        font-size: 20px;
    }
}

@media(max-width:330px) {
    .section_1-header {
        margin-left: -15px;
    }
}

@keyframes blink {
    /*If we remove the starting bg-color and end bg-color, the animation still works because the colors are set by the bg-property.*/
    /*We can explicitly write the colors for clarity purposes*/
    0% {
        background: transparent;
    }

    50% {
        background: rgb(184, 184, 184);
        background: rgba(40, 182, 78, 0.8);
    }

    100% {
        background: transparent;
    }
}