:root
{
    --charcoal: #363636;
    --dusk:     #595559;
    --smoke:    #484848;

    --shadow:   #e3e4e8;
    --shy:      #808489;
    --violet:   #745ccc;
    --verdant:  #31d37e;
    --forest:   #2dc177;

    --grass:    #90e25a;
    --pine:     #24d668;

}





.body
{
    margin:             0;
    padding:            0;
}

section
{
    place-items:        center;
    padding-inline:     clamp(8px, 4vw, 32px);
}




h1
{
    font-family:        nexa, sans-serif;
    font-weight:        800;
    font-style:         normal;
    font-size:          6rem;
    letter-spacing:     0.05em;
    line-height:        1.5;

    color:              var(--grass);


}

h2
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;
    font-size:          1.8rem;
    line-height:        1.5;
}

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.5;
}




a
{
    text-decoration:    none;

    width:              100%;
    display:            flex;
    justify-content:    center;
}


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

    h2
    {
        font-size:      1.3rem;
    }

    h3
    {
        font-size:      1.2rem;
    }

    p
    {
        font-size:      1.2rem;
    }
}





.desktop
{
    display:            block;
}

.mobile
{
    display:            none;
}

@media (max-width: 800px)
{
    .desktop
    {
        display: none;
    }

    .mobile
    {
        display: block;
    }

}


.header
{
    padding-top:        env(safe-area-inset-top);
    padding-inline:     0px;

    width:              100%;
    height:             100vh;
    background:         linear-gradient(135deg, #a9e659 0%, #25d568 50%, #0cb972 100%);

    overflow-x:         hidden;
    overflow-y:         hidden;
}

.splash
{
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
    align-items:        center;

    height:             100vh; 
    width:              100%;
    padding:            2rem;
    box-sizing:         border-box;
}

.title
{
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
    align-items:        center;
    gap:                0vw;

    width:              70%;
    height:             auto;
    overflow:           hidden;
}



.logo
{
    position:           absolute;
    top:                40px; 

    left:               50%;
    transform:          translateX(-50%);
    width:              3vw;
}

.tagline
{
    position:           relative;
    left:               50px;
    top:                4vh;

    max-height:         60%;     
    height:             auto;        
    object-fit:         contain; 
    
    flex:               1 1 0;      
    min-width:          0;
}


.row
{
    display:            flex;
    justify-content:    center;
    align-items:        center;
    gap:                4vw;

    width:              70%;
    height:             auto;
    overflow:           hidden;
}

.row img
{
    max-width:          100%;     
    height:             auto;        
    object-fit:         contain; 
    
    flex:               1 1 0;      
    min-width:          0;
}


@media (max-width: 800px)
{

    .header
    {
        height:             100vh;
    }

    .logo
    {
        width:              10vw;
    }

    .title
    {
        width:              120%;

        overflow:           visible;
    }

    .tagline
    {
        width:              110%;  

        left:               0px;
        top:                0px;

    }

    .row
    {
        flex-wrap:          nowrap;
        overflow:           hidden;
        justify-content:    center;
        gap:                0;
    }

    .row img
    {
        display:            none;
    }

    .row img:nth-child(2)
    {
        display:            block; 
        max-width:          85%;
    }

}





    .paragraph
    {
        width:          95%;
        max-width:      1100px;
        margin-inline:  auto;
    }

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




     .stanza
    {
        display:               grid;
        grid-template-columns: 1fr 1.5fr;
         align-items:          start;    
        justify-content:       center;
        margin-inline:         auto;
        max-width:             1100px;
    }


    .stanza img
    {
        width:              100%;
        max-width:          300px;
        height:             auto;

        align-self:         start;
    }


    @media (max-width: 800px)
    {

        .stanza
        {
        grid-template-columns:  1fr;      
        justify-items:          center;         
         
        }

        .reverse
        {
            grid-template-columns: 1fr;
        }

        .stanza img
        {
            order:              -1;
            margin:             30px 0;
            width:              70%;
            height:             auto;
            justify-self:       center;
        }
    }







    .gap
    {
        height: 30vh;
    }


    .bit
    {
        height: 5vh;
    }


     @media (max-width: 800px)
    {

        .gap
        {
            height: 15vh;
        }

         .bit
         {
             height: 2vh;
         }

    }


    .album
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 95%;
        max-width: 1500px;
        margin: 0 auto;
    }

    .frame
    {
        width: 100%;
    }

        .frame img
        {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 1.5vw;
        }

    .reel
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        width: 100%;
    }

    .reel img
    {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 1.5vw;
    }


    @media (max-width: 800px)
    {

        .reel
        {
            display: grid;
            grid-template-columns: 1fr;
        }
    }

    .icon
    {
        width: 1.2em;
        margin-left: 0.3em;
        position: relative;
        top: 5px;
    }




    .buttons
    {
        display:            flex;
        flex-direction:     column;
        justify-content:    center;
        align-items:        center;

        height:             auto;

        width:              100%;
        max-width:          600px;

        gap:                10px;
        position:           fixed;
        bottom:             5px;

        left:               50%;
        z-index:            9999;
        transform-origin:   center;
        transform:          translate(-50%) scale(0.9);
    }

    .button
    {
        width:              100%;
        max-width:          650px;

        padding-top:        1.5rem;
        padding-bottom:     1.5rem;
        padding-left:       0rem;
        padding-right:      0rem;    



        border-radius:      100vw;
        text-decoration:    none;
        transition:         all .5s;
        transform:          scale(1);
        transform-origin:   center;

        display:            flex;
        flex-direction:     column;
        justify-content:    center;
        align-items:        center;
        gap:                0.5rem;
    }

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

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


    .white
    {
        background: white;
        color: var(--pine);
    }



    .show
    {
         display:        none;
    }


    .hide
    {
        display:        block;
    }

    .hide h2,
    .hide h3
    {
        margin:         5px;
        padding:        0;
        line-height:    1.2;
    }


    .gradient
    {
        background:     linear-gradient(160deg, #a1ff3c 0%, #00d25e 70%);
        color:          white;

        top:            2.5px;
        position:       relative;
        text-align:     center;
        line-height:    1.2;
    }

    .simple
    {
        background:     var(--shadow);

        color:          var(--shy);
        top:            2.5px;
        position:       relative;
        text-align:     center;
        line-height:    1.2;
    }



    @media  (hover: hover) and (pointer: fine) and (any-pointer: fine)
    {

        .show
        {
            display:    block;
        }

        .hide
        {
            display:    none;
        }    

    }



.center
{
    display:            flex;
    justify-content:    center;
    align-items:        center;
    flex-direction:     column;
}

.light
{
        width:              95%;
        max-width:          800px;

        border-radius:      100vw;
        text-decoration:    none;

        background-color:   white;

        padding-top:        0.5rem;
        padding-bottom:     0.5rem;
        padding-left:       0rem;
        padding-right:      0rem;    

        transition:         all .5s;
        transform:          scale(1);

        transform-origin:   center;

        display:            flex;
        flex-direction:     column;
        justify-content:    center;
        align-items:        center;
        gap:                0.5rem;

        background-color:   var(--smoke);
        color:              white;
}

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

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



.map
{
    width:              100%;
    height:             100vh;

    padding:            0;              
    margin:             0;

    display:            flex;
    justify-content:    center;
    align-items:        center;

    overflow:           hidden;        
}

#map
{
    width:              100%;
    height:             100%;

    overflow:           hidden;
}