* {
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    margin: 50px 50px 0 50px;
    background-color: #faf9f6;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

img.logo {
    display: block;
    width: 15%;
    margin: 0 0 5% 3%;
}

h1 {
    width: 50%;
    margin: 0 0 5% 3%;
    font-size: 3rem;
}

h1 > span {
    color: #191970; 
}

main {
    width: 94%;
    margin: 0 auto;
}

div.card {
    width: 45%;
}

div.left {
    float: left;
}

div.right {
    float: right;
}

div > img {
    width: 40%;
    float: left;
    margin-right: 5%;
}

h2 {
    margin-top: 0;  
}

footer {
    margin-top: 10%;
    text-align: right;
    color: midnightblue;
}

@media (max-width: 680px) {
    
    body {
        margin: 0;
        padding: 7.5% 0;
    }
    
    img.logo {
        width: 32.5%;
        margin-left: 10%;
    }
    
    h1 {
        width: 92.5%;
        margin: 7.5% auto 11% auto;
        text-align: center;
        font-size: 350%;
        line-height: 140%;
/*        background-color: red;*/
    }
    
    div.card {
        width: 92.5%;
        margin: 0 auto 10% auto;
        text-align: justify;
        line-height: 150%;
    }
    
    div.left, div.right {
        float: none;
    }
    
    div > img {
        width: 100%;
        float: none;
    }
    
    h2 {
        margin-top: 3%;
    }
    
    footer {
        margin-right: 5%;
    }
    
}

@media (min-width: 681px) and (max-width: 896px) {
    
    body {
        padding-bottom: 5%;
    }
    
    img.logo {
        margin-left: 2.5%;
    }
    
    h1 { 
        margin: 0 0 10% 2.5%;
    }
    
    div > img {
        width: 80%;
        float: none;
        margin-bottom: 5%;
    }
    
}