:root{
--Red: hsl(0, 78%, 62%);
--Cyan: hsl(180, 62%, 55%);
--Orange: hsl(34, 97%, 64%);
--Blue: hsl(212, 86%, 64%);
--Grey500: hsl(234, 12%, 34%);
--Grey400: hsl(212, 6%, 44%);
--White: hsl(0, 0%, 100%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    display: flex;
    background-color: var(--White);
     justify-content: center;
     flex-direction: column;
     text-align: center;
}
h1:first-child{
    font-weight: 100;
    color: var(--Grey400);
    padding: 0.2rem;
    font-size: 2.5rem;
}
h1:nth-child(2){
    font-weight: 600;
    font-family: sans-serif;
    padding: 0.5rem;
    color: var(--Grey500);
    font-size: 2.5rem;
}
p:nth-child(3){
    padding: 0.5rem;
}
#ResponsiveContainer{
    height: 65rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
}
.flexContainer{
    height: 15rem;
    width: 80%;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.2);
    border-radius: 0.5rem;
}
.flexContainer:first-child{
    border-top: 5px solid var(--Cyan);
}
.flexContainer:nth-child(2){
    border-top: 5px solid var(--Red);
}
.flexContainer:nth-child(3){
    border-top: 5px solid var(--Orange);
}
.flexContainer:nth-child(4){
    border-top: 5px solid var(--Blue);
}
.flexContainer h3{
    padding: 1rem;
    margin-right: 40%;
    font-family: sans-serif;
    font-size: 22px;
}
.flexContainer p{
    color: var(--Grey400);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-right: 5%;
}
.flexContainer img{
    margin-left: 55%;
    margin-top: 12%;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
/*Let Start our desktop designed*/

@media(min-width:600px){
   #ResponsiveContainer{
    height: 35rem;
    display:grid; 
    padding: 1rem;
    grid-template-columns: repeat(2,50%);
    justify-items: center;
    align-items: center;
    justify-content: center;
   }
   .flexContainer{
    height: 15rem;
    width: 20rem;
   }
   .attribution{
    font-size: 14px;
   }
}
@media(min-width:992px){
    #ResponsiveContainer{
        display: flex;
        padding: 1rem;
        margin-top: 1%;
        justify-content: center;
    }
    .flexContainer{
        width: 20rem;
        height: 30rem;
    }
    .flexContainer:first-child{
        position: relative;
        left: -21rem;
        top: 20rem;
    }
    .flexContainer:nth-child(2){
        position: relative;
        top: -2rem;
    }
    .flexContainer:nth-child(3){
        position: relative;
        top: -2rem;
    }
    .flexContainer:nth-child(4){
        position: relative;
        left: 21rem;
        top: -23rem;
    }
    .attribution{
        font-size: 16px;
        margin-top: -1%;
       }
}