.mainCover {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    min-height: 25vw;
    margin-top: 30vh;
    margin-bottom: 45vh;
}

.mainTitle {
    font-size: 4vw;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 30px;
}

.mainCaption {
    font-size: 4vw;
    margin-top: -5%;
}

.mainText {
    font-size: 2.2vw;
}

#mainText2 {
    margin-top: -20px;
}

@media only screen and (max-width: 900px) {
    .mainText {
        /* the text should at least have size 18px, but should be 2vw*/
        font-size: 20px;
    }

    .mainTitle {
        /* the title shoudl at least be 90px*/
        font-size: 36px;
    }

    .mainCaption {
        font-size: 36px;
    }

    .mainCover {
        height: 210px;
        margin-top: 400px;
        margin-bottom: 500px;
    }
}

@media only screen and (max-height: 600px) {
    .mainCover {
        height: 210px;
        margin-top: 180px;
        margin-bottom: 270px;
    }
}

@media only screen and (max-width: 730px) {
    .mainCover {
        height: 250px;
        margin-top: 200px;
        margin-bottom: 300px;
    }
}

@media only screen and (max-width: 420px) {
    .mainCover {
        height: 300px;
        margin-top: 200px;
        margin-bottom: 300px;
    }
}