:root
{
    --sunflower:  #FFC033;
    --mango:      #FFAC33;

    --paper:      #FFE0D5;

    --charcoal:   #363636;
    --dust:       #454545;
    --smoke:      #e5e5e5;   
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


body
{
    margin:  0;
    padding: 0;
}

section
{
    place-items: center;

    padding-inline: clamp(8px, 4vw, 32px);
}

a
{
    text-decoration: none;
}

h1
{
    font-family:        nexa, sans-serif;
    font-weight:        900;
    font-style:         normal; 

    font-size:          4.5rem;

    letter-spacing:     0.05em;

    line-height:        1.5;
}

h2
{
    font-family:        nexa, sans-serif;
    font-weight:        500;
    font-style:         normal; 

    font-size:          2.25rem;

    letter-spacing:     0.05em;

    line-height:        1.5;

    width:              85%;
}

h3
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          1.6rem;

    line-height:        2;
}

p
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          1.4rem;

    line-height:        2;
}

li
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          1.25rem;

    line-height:        2;

    padding-left:       2rem;

    margin-bottom:      1.5rem;
}


@media (max-width: 800px)
{
    h1
    {
         font-size:     2.75rem;
    }

    h2
    {
        font-size:      1.75rem;
    }

    p
    {
        font-size:      1.2rem;
    }

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.button
{
    display:            flex;
    align-items:        center;

    gap:                20px;

    background-color:   var(--dust);
    color:              white;

    border:             0px;
    border-radius:      100rem;

    padding-top:        2px;
    padding-bottom:     2px;
    padding-right:      150px;
    padding-left:       50px;

    transition:         all .6s;
    transform:          scale(1);
    transform-origin:   center bottom;

    cursor:             pointer;
    margin:             2em 2em;
}

.button:hover
{
    transform: scale(1.1);
}

.button:active
{
    transform: scale(0.7);
}

.button p
{
    color: var(--mango);
}

.button img.star
{
    transition: all .6s;
    transform: scale(1);
    transform-origin: center;
}

.button:hover img.star
{
    transform: scale(1.15);
}

@media (max-width: 550px)
{
    .button
    {
        transform: scale(0.75);
        margin:    -1.5em -2em;
    }

    .button:hover
    {
        transform: scale(0.85);
    }
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.block
{
    height: 400px;
}

.chunk
{
    height: 200px;
}

.gap
{
    height: 50px;
}

@media (max-width: 550px)
{
    .block
    {
        height: 150px;
    }

    .chunk
    {
        height: 75px;
    }

    .gap
    {
        height: 25px;
    }
}





.paragraph
{
    width:          99%;
    max-width:      1000px;

    margin-inline:  auto; 
}




.outline
{

    padding-top:    2.5rem;
    padding-right:  5rem;
    padding-bottom: 2.5rem;
    padding-left:   5rem;

    border:         3px solid var(--smoke);
    border-radius:  4rem;
}

@media (max-width: 550px)
{

    .outline
    {
        padding-top:    0.5rem;
        padding-right:  2rem;
        padding-bottom: 0.5rem;
        padding-left:   2rem;

         border-radius: 2rem;
    }


}



.white
{

}

.white h1
{
    color:      var(--dust);
}

.white h2
{
    color:      var(--dust);
}

.white h3
{
    color:      white;
}

.white p
{
    color:      var(--charcoal);
}

.white ul
{
    color:      var(--charcoal);
}

.white li
{
    color:      var(--charcoal);
}

.white a
{
    color:      #5f9fff;
}

.white button
{
    background: linear-gradient(144deg,rgba(255, 191, 54, 1) 0%, rgba(255, 113, 74, 1) 100%);
}




.align
{
    text-align: left;
}

.focus
{
    text-align: center;
    margin:         0;
}



.anchor
{
    position: fixed;
    z-index:  1000;
}

.center
{
    left:     50%;
    transform: translateX(-50%);        
}

.top
{
    top: 0;
}

.bottom
{
    bottom: 0;
}

.right
{
    right: 0;
}