:root{
    /* color selector */
    --c-dark-bg: #202040;
    --c-yellow: #ffbd69;
    --c-purple: #543864;
    --c-red: #ff6363;
    --c-white: #fff;
    --c-black:#000;
}
body{
    background-color: var(--c-black);
}
.hero-container{
    /* height: 100vh;
    padding-top: 18%; */
}
.hero-title{
    color: var(--c-yellow);
    /* font-size: 40pt; Good for mobile view */
    font-size: 6rem;
    font-weight: 600;
}
.hero-content{
    color: var(--c-white);
    font-size: 16pt;
    font-weight: 300;
}
.typing{
    color: var(--c-white) !important;
}

.hg-lg{
    font-weight: 600 !important;
    color: var(--c-yellow) !important ;
}

.top-row{
    margin-top: 10%;
}

.btn{
    margin: 0px auto 0px 39%;
    border-radius: 5rem;
}

@media screen and (max-width: 600px) {
    .hero-title{
        font-size: 32pt;
    }
    .btn{
        margin: 0px auto 0px 10%;
    }
    .top-row{
        margin-top: 20%;
    }
}