body{
    background-color: hsl(0, 0%, 98%);
    font-family: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;

}

.header {
    max-width: 500px;
    margin: 70px auto;
    text-align: center;
    
}

h1{
    font-weight: 200;
}
h1 span{
    font-weight: 600;
 }
h2{
    font-weight: 400;
}

p{
    font-weight: 200;
    line-height: 1.5rem;
    color: gray;
 }
 
 .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1140;
    
    
 }

 footer{
    text-align: center;
 }

 .box{
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    padding: 30px;
    margin: 15px;
    max-width: 350px;
    -webkit-box-shadow: 0px 10px 15px 2px rgba(218,227,242,1);
    -moz-box-shadow: 0px 10px 15px 2px rgba(218,227,242,1);
    box-shadow: 0px 10px 15px 2px rgba(218,227,242,1);
 }

.box-cyan{
    border-top: 4px solid cyan;
 }
.box-red{
    border-top: 4px solid red;
}
.box-orange{
    border-top: 4px solid orange;
}
.box-blue{
    border-top: 4px solid blue;
}

.box-push{
    transform:translateY(50%);
}
.box p{
    margin: 15px 0 30px;
}
.box h2{
    margin: 0;
}

.box img{
    display: block;
    margin-left: auto;
}


@media (max-width: 775px){
    .box-push{
        transform:translateY(0);
    }
}