@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap'); 
body{
    background-color: hsl(220, 56%, 87%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.attribution {
     font-size: 11px; text-align: center;
     }
.attribution a {
     color: hsl(228, 45%, 44%); 
    }
.box{
    background-color: whitesmoke;
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: auto;
    border-radius: 10px;
    
}

img{
    height: 40vh;
    margin: 10px;
}

.blue p{
    color: hsl(218, 44%, 22%);
    font-family: 'Righteous', cursive;
    margin : 15px 25px;
    font-size: 20px;
}
.grey p{
    color: hsl(213, 10%, 48%);
    font-family: 'Quicksand', sans-serif;
    margin: 0 13px 30px 13px ;
}

footer{
    margin: auto;
}
@media only screen and (max-width: 1500px){
    .box{
        /* width: 28vw; */
        width: 300px;
        
    }
}

@media only screen and (max-width: 1000px){
    .box{
        /* width: 60vw; */
        width: 300px;
        
    }
}