h1 {
    margin-bottom: -17px;
    margin-top: -23px;
    background-color: #4aaaa5;
    color: #ffff;
    font-size: 53px;
    line-height: 58px;
    font-family: Georgia;
    font-weight: 600;
    height: 61px;
    float: left;
    text-align: left;
    margin-left: 5%;
}

h2 {
    text-align: left;
    color: #4aaaa5;
    font-size: 30px;
    line-height: 49px;
}

.footer {
    text-align: center;
    height: 6%;
    align-content: flex-end;
    border-top: 3px solid #4aaaa5;
}

.mr-2 {
    width: 220px;
    height: 150px;
}

.btn {
    color: #dddddd;
    background-color: #4aaaa5;
    border-color: #4aaaa5;
    margin-bottom: 3px;
}

@media screen and (max-width: 980px) {
    /* The body's bg color will be #333 */
    /* The wrapper's width will be 600px */
    .container {
        width: 100%;
        height: 100%;
    }
    h1 {
        font-size: 45px;
    }
    h2 {
        font-size: 22px;
    }
    .footer {
        height: 6%;
    }
}

@media screen and (max-width: 768px) {
    /* The body's bg color will be #333 */
    /* The wrapper's width will be 600px */
    .container {
        width: 100%;
        height: 100%;
        margin-bottom: 31%;
    }
    @viewport {
        width: device-width;
        height: device-height;
    }
    h1 {
        font-size: 35px;
    }
    h2 {
        font-size: 20px;
    }
    .footer {
        height: 6%;
    }
    .p-3 {
        padding: 6rem!important;
    }
}

@media screen and (max-width: 640px) {
    .container {
        width: 100%;
        height: 100%;
    }
    .footer {
        height: 6%;
    }
    @viewport {
        width: device-width;
    }
    h1 {
        font-size: 20px;
    }
    .p-3 {
        padding: 8rem!important;
    }
}

a:hover {
    background-color: goldenrod;
}