:root
{
    --Soft-Cream:   #F4EFEA;
    --Warm-Taupe:   #C2B6A6;
    --Deep-Moss:    #4F6F64;
    --Terracotta:   #C47A5A;
    --Muted-Sage:   #A8BFB0;
    --Charcol-Brown:#3B2F2A;
    --Muted-Blue:   #6D8A96;
}

main
{
    width: clamp(200px, 70vw, 1200px); height: auto;
    margin: 24px auto 24px;
}

main p
{
    color: var(--Charcol-Brown);
}
  

.about-section
{
    width: 90%;
    margin: auto;    
}

.about-section h1
{
    color: var(--Terracotta);
    font-size: 24pt; 
    margin: 24px auto 24px;
    text-align: center;   
}

.about-section h2
{
    color: var(--Deep-Moss);
    font-size: 14pt;
    text-align: left;
    margin: 12px auto 12px;
    width: 80%;
}

.about-section p
{
    columns: var(--Charcol-Brown);
    font-size: 12pt;
    text-align: left;
    margin: 12px auto 12px;
    width: 80%;
}


@media (max-width: 992px)
{
    main
    {
        width: 90vw;
    }

    

    
}


/* moblie */
@media (max-width: 722px)
{
    main
    {
        width: 95vw;
    }
    
    .about-section  h1
    {
        font-size: 18pt;
    }

    .about-section  h2
    {
        font-size: 14pt;
    }

    .about-section  p,
    .about-section  ul
    {
        font-size: 12pt;
    }
}