/* using the google fonts import feature, import the desired fonts here. This is safer than 
linking to the fonts website, in case the google font site crases, all fonts are hosted right here */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap');

:root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --lightGray: hsl(0, 0%, 98%);
    --grayishBlue: hsl(229, 6%, 66%);
    --darkBlue: hsl(234, 12%, 34%);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--lightGray);
    font-family: 'Poppins', sans-serif;
}

header {
    max-width: 500px;
    text-align: center;
    margin: 50px auto;
    color: var(--grayishBlue);
}

.header-main {
    font-weight: 200;
    margin: 0;
}

.header-main span {
    font-weight: 600;
    color: var(--darkBlue);
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1140px;
}

.box {
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 
        0 6px 6px rgba(0,0,0,0.1);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    width: 350px;
    margin: 15px;
}

/* this attribute takes the two boxes with this specific 'push' class, 
and pushes them down by 50% */
.box-push {
    transform: translateY(50%);
}

.box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
}

.box-red::after {
    background-color: var(--red);
}

.box-cyan::after {
    background-color: var(--cyan);
}

.box-orange::after {
    background-color: var(--orange);
}

.box-blue::after {
    background-color: var(--blue);
}

.box-headline {
    color: var(--darkBlue);
    margin: 0;
}

.box-content {
    color: var(--grayishBlue);
    font-size: 1rem;
    margin: 15px 0 40px;
}

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

.attribution { 
    font-size: 11px; text-align: center;
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}


/* remove box pattern on tablet/mobile, so they all stack in one line. */
@media (max-width: 1138px) {
    .box-push {
        transform: translateY(0);
    }
}