@media only screen and (max-width: 768px)  {
    [class*="col-"] {
        width: 100%;
    }
}






body {
    background-color: hsl(217, 35%, 85%); 
    ;
    
    

}

h3 {
    font-family: 'Montserrat Alternates', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
}

p {
    font-family: 'Montserrat Alternates', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'Playfair Display', serif;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: hsl(212, 45%, 89%);
    font-weight: 400;
}

.card {
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 350px;
    text-align: center;
    margin: 60px;
    margin: 0 auto;
    float: none;
    margin-bottom: 50px;
    margin-top: 60px;
    color: hsl(218, 44%, 22%);
}

.card-img-top {
    
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 250px;
    text-align: center;
    margin: 10px 2px 10px 15px;
 }
 
.attribution { 
    font-size: 15px; text-align: center;
    margin-top: 30px;
 }
.attribution a { 
    color: hsl(228, 45%, 44%); 
}