:root{
    --neutral-500: hsl(234, 12%, 34%);
    --neutral-400: hsl(212, 6%, 44%);

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

    /*font sizes*/
    --normal: 1rem;
    --wb-heading: 2.5rem;
    --sec-title: 1.5rem;
}

@font-face{
    font-family: "Poppins-Bold";
    src: url(fonts/Poppins-Bold.ttf)
}
@font-face{
    font-family: "Poppins-Regular";
    src: url(fonts/Poppins-Regular.ttf);
}
@font-face{
    font-family: "Poppins-Light";
    src: url(fonts/Poppins-Light.ttf)
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body{
    height: 100%;
    line-height: 1.5rem;
    font-size: var(--normal);
}

img{
    display: block;
}

h1,
h2{
    color: var(--neutral-500);
    line-height: 2.5rem;
}

body{
    font-family: "Poppins-Light", sans-serif;
    color: var(--neutral-400);
}

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

.wrapper{
    max-width: 1000px;
    margin-inline: auto;
    padding-inline: 2rem;
}
.wrapper-narrow{
    max-width: 600px;
    padding-block: 1rem;
}

h1{
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

h1 span{
    font-weight: 100;
}

.wrapper-narrow > p{
    font-family: "Poppins-Regular", sans-serif;
    font-weight: 400;
}

.layout-grid{
    --grid-gap: 1rem;
    display: flex;
    gap: var(--grid-gap);
    margin-bottom: 5rem;
}

.layout-grid > *{
    flex: 1;
}

.col{
    display: grid;
    gap: var(--grid-gap);
    align-content: center;
}

.card{
    padding: 2rem;
    box-shadow: 5px 12px 1rem -0.5rem rgb(0 0 0 / 0.2);
    border-radius: 0.4rem;
}

.card img{
    margin-left: auto;
    margin-top: 2.5rem;
}

.cyan-border{
    border-top: 5px solid var(--clr-cyan);
}

.red-border{
    border-top: 5px solid var(--clr-red);
}

.orange-border{
    border-top: 5px solid var(--clr-orange);
}

.blue-border{
    border-top: 5px solid var(--clr-blue);
}

@media (max-width: 850px){
    .layout-grid{
        flex-direction: column;
    }
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }