@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
:root {
    font-family: 'Poppins', sans-serif;
    --Red: hsl(0, 78%, 62%);
    --Cyan: hsl(180, 62%, 55%);
    --Orange: hsl(34, 97%, 64%);
    --Blue: hsl(212, 86%, 64%);
    --VeryDarkBlue: hsl(234, 12%, 34%);
    --GrayishBlue: hsl(229, 6%, 66%);
    --VeryLightGray: hsl(0, 0%, 98%);

}
#lighter { 
    font-weight:lighter;
    margin-bottom: 1px;
    margin-top: 40px;
 }

header {
    font-weight: 300 px;
    text-align: center;
    max-width: 320px;
    margin: auto;
}

img {
    max-width: 100px;
    margin-left: auto;
    display: block;
}


.content>p {
    text-align: center;
}

.card {
    border-top: 5px solid var(--Red);
    max-width: 300px;
    margin: 20px auto;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 5px 5px 5px 5px grey;
    font-size: 15px;
}

#azul {
    border-top: 5px solid var(--Cyan);
}

#oscuro {
    border-top: 5px solid var(--Blue);
}

#amarillo {
    border-top: 5px solid var(--Orange);
}

h1 {
    font-weight: bold;
    font-size: 150%;
    margin-top: 5px;
    color: var(--VeryDarkBlue);
}


p {
    padding: 0px;
    color: var(--VeryDarkBlue);
    font-weight:lighter;

}

@media (min-width:375px) {
    #lighter { 
        font-size: 235%;
        font-weight:lighter;
        margin-bottom: 1px;
        margin-top: 40px;
     }
    #tittle{
        font-size: 235%;
    }
    header {
        font-weight: 600 px;
        text-align: center;
        max-width: 550px;
        margin: auto;
    }

    h1 {
        font-weight: bold;
        margin-top: 5px;
        color: var(--VeryDarkBlue);
        
    }
   
    .content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
    }

    .content div:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .content div:nth-child(1) {
        position: relative;
        top: 150px;
    }
    .content div:nth-child(4) {
        position: relative;
        top: 150px;
    }

}