:root {
    --primary-red: hsl(0, 78%, 62%);
    --primary-cyan: hsl(180, 62%, 55%);
    --primary-orange: hsl(34, 97%, 64%);
    --primary-blue: hsl(212, 86%, 64%);

    --neutral-grey-500: hsl(234, 12%, 34%);
    --neutral-grey-400: hsl(212, 6%, 44%);
    --neutral-white: hsl(0, 0%, 100%);

    --font-light: 200;
    --font-standard: 400;
    --font-heavy: 600;
}

*, 
*::before, 
*::after {
    box-sizing: border-box;
}


html {
    -webkit-text-size-adjust: 100%;
    font-family: "Poppins", sans-serif;
    font-size: 0.938rem;
    line-height: 1.7;
}

body {
    margin: 0;
    padding-bottom: 6rem;
}

h1,
h2,
h3 {
    line-height: 1.1;
    font-weight: var(--font-heavy);
}




/*Styling for the header and paragraph*/

.container {
    max-width: 1100px;
    margin-inline: auto;
}

.container-narrow {
    max-width: 550px;
}

header {
    text-align: center;
    margin-block: 5rem;
}

h1 {
    font-weight: var(--font-light);
}

span {
    font-weight: var(--font-heavy);
}

/*Styling for the cards using a grid layout*/

.card-container {
    display: flex;
    gap: 2rem;
}

.card-container > * {
    flex: 1;
}

p {
    font-weight: var(--font-light);
}

.card1,
.card4 {
    max-width: ;
    height: 20rem;
    margin-top: 10rem;
}

.card1,
.card2,
.card3,
.card4 {
    box-shadow: 0 1rem 1rem -0.25rem rgb(0 0 0 / 0.2);
    padding: 2rem;
    display: grid;
    align-content: center;
    border-radius: 0.5rem;
    border-top: 4px solid;
}

.card1 {
    border-color: var(--primary-cyan);
}

.card2 {
    border-color: var(--primary-red);
    margin-bottom: 2rem;
}

.card3 {
    border-color: var(--primary-orange)
}

.card4 {
    border-color: var(--primary-blue);
}