index.css

@import url(main.css);

/******* introduction *******/

#intro {
    height: 100vh;
    min-height: 800px;
    max-width: 800px;
    margin: auto;
    margin-top: 15vh;
}

#intro h1 {
    margin: auto;
    text-align: left;
    font-size: 4em;
    color: var(--text-color);
}

#intro p {
    font-size: 2.5em;
    text-align: left;
    color: var(--text-color);
}

/*** responsive for tablet ***/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #intro {
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    #intro h1 {
        font-size: 4em;
    }

    #intro p {
        text-align: left;
        font-size: 2.5em;
    }
}

/*** responsive for phones ***/

@media only screen and (max-width: 767px) {
    #intro {
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    #intro h1 {
        font-size: 4em;
    }

    #intro p {
        text-align: left;
        font-size: 2.5em;
    }
}