@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
/*Poppins 200 400 600*/


*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-size: 15px;
    font-family: 'Poppins';
}

:root{
    /*PRIMARY*/
    --red: rgb(234, 83, 83);
    --cyan: rgb(69, 211, 211);
    --orange: hsl(34, 97%, 64%);
    --blue: rgb(84, 158, 242);

    /*NEUTRAL*/
    --veryDarkBlue: rgb(76, 78, 97);
    --grayishBlue: rgb(163, 165, 174);
    --veryLightGray: rgb(250, 250, 250);
}

body{
    background-color: var(--veryLightGray);
    padding: 70px 0%;

}

/*MOBILE FIRST*/
main.grid-container{ /*CONTAINER*/
    display: grid;
    width: 320px;
    height: 100vh;
    background-color: var(--veryLightGray);
    margin: auto;
    margin-bottom: 20%;
}
header{ /*Filho 1*/
    margin-bottom: 25%;
}
header > h1{ /*Titulo do header*/
    font-weight: 200;
    font-size: 1.7em;
    text-align: center;
    color: var(--veryDarkBlue);
    margin-bottom: 4%;
}
header > h1 > strong{
    font-weight: 600;
    font-size: 1em;
}
header > p {/*Paragrafo do header*/
    text-align: center;
}
p{ /* paragrafos em geral*/
    font-weight: 200;
    color: var(--grayishBlue);
}

 /*Filho 2*/
.container-2 > .grid-item{ /*GRID ITEMS*/
    background-color: rgb(255, 255, 255);
    padding: 25px;
    margin-bottom: 5%;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.267);
    border-radius: 5px;
    height: 200px;
}
.container-2  h1{
    color: var(--veryDarkBlue);
    font-weight: 600;
    font-size: 1.3em;
}
#item-1{
    border-top: 4px solid var(--cyan);
}
#item-2{
    border-top: 4px solid var(--red);
}
#item-3{
    border-top: 4px solid var(--orange);
}
#item-4{
    border-top: 4px solid var(--blue);
}

.grid-item > img{
    float: right;
    margin-top: 10%;
}