*
{
    margin: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: "poppins";
}

:root
{
    --font-color1: hsl(234, 12%, 34%);
    --font-color2: hsl(212, 6%, 44%);
    --primary1: hsl(0, 78%, 62%);
    --primary2: hsl(180, 62%, 55%);
    --primary3: hsl(34, 97%, 64%);
    --primary4: hsl(212, 86%, 64%);

}

body
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.7rem;
}

#Headtext
{
    height: fit-content;
    text-align: center;
    max-width: 32rem;
    padding-bottom: 3.5rem;
    
}

#container
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.container
{
    max-width: 23rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;

}

img
{
    position: absolute;
    bottom: 2.5rem;
    right: 2rem;
}



.box
{
    height: 15rem;
    border-radius: 5px;
    box-shadow: 0px 3px 7px hsl(0, 0%, 90%);
    padding: 1.2rem;
    position: relative;
}

#box1
{
    border-top: 4px solid var(--primary2);
}
#box2
{
    border-top: 4px solid var(--primary1);
}
#box3
{
    border-top: 4px solid var(--primary3);
}
#box4
{
    border-top: 4px solid var(--primary4);
}
p
{
    font-size: 15px;
    font-weight: 400;
    color: var(--font-color2);
}
h2
{
    font-weight: 600;
    color: var(--font-color1);
}
h3
{
    font-weight: 600;
    color: var(--font-color1);
}
h1
{
    font-weight: 200;
    color: var(--font-color1);
}

@media screen and (min-width:800px) and (max-width:1200px)
{
  #container
  {
    flex-direction: column;
  }  
}