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

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

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

    --ocean:        #236CFF;
    --ocean-hover:  #1391FF;

    --flame:        #FF4343;
    --flame-hover:  #FF5136;
}

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

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

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

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

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

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

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

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

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

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

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

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



.highlight
{
    display:            inline-block;
    vertical-align:     baseline;
    margin-top:         0.5rem;
    color:              white;
    padding:            0.1em 0.3em;
    border-radius:      0.2em;
    white-space:        nowrap;
}

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

.smoke.highlight
{
    background-color: var(--smoke);
}






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

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


h4
{
    font-family:        nexa, sans-serif;
    font-weight:        800;
    font-style:         normal;
    font-size:          4rem;
    line-height:        1.35;
}

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

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,
a:hover,
a:focus,
a:visited
{
    text-decoration: none;
}

.link
{
    color:              var(--ocean);
}

.link:hover
{
    color:              var(--ocean-hover);
}


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

    h2
    {
        font-size:      1.3rem;
    }

    h3
    {
        font-size:      1.2rem;
    }

    p
    {
        font-size:      1.2rem;
    }
}


.text-center
{
    text-align:         center;
}


.desktop
{
    display:            block;
}




.header
{
    box-sizing:         border-box;

    padding-top:        env(safe-area-inset-top);

    padding:            2rem;

    width:              100%;
    height:             calc(100vh - (1.5rem + 1.5rem + 1.5rem + 1.5rem + 50px + 25px + 1.8rem));
    background:         linear-gradient(135deg, #a9e659 0%, #25d568 50%, #0cb972 100%);

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

@media (max-width: 800px)
{

    .header
    {
        height:         calc(100vh - (1.3rem + 1.3rem + 1.3rem + 1.3rem + 30px + 25px + 1.8rem));
    }

}


.header-splash
{
    width:              80vw;
    max-width:          1200px;

    height:             100%;
}

.logo
{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
    z-index: 1000;
}

.tagline
{
    height:             auto;
    width:              auto;
    max-width:          min(1300px, 100vw);

    position:           relative;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
}


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




.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:          325px;
    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: 400px;
}


.bit
{
    height: 75px;
}


@media (max-width: 800px)
{

    .gap
    {
        height: 100px;
    }

/*    .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;
}

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

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

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

.small
{
    max-width:          500px;

    padding-top:        0.75rem;
    padding-bottom:     0.75rem;
}



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

.bottom
{
    gap:                10px;
    position:           fixed;
    bottom:             25px;

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

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



.show
{
    display:        none;
}

.hide
{
    display:        block;
}

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

.positive:hover
{
     background:     var(--ocean-hover);
}

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

.negative:hover
{
     background:    var(--flame-hover);
}

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

    color:          var(--shy);
    position:       relative;
    text-align:     center;
}


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

    .show
    {
        display:    flex;
    }

    .hide
    {
        display:    none;
    }    

}

.fredoka
{
    font-family:        fredoka-variable, sans-serif;;
    font-weight:        400;

    font-size:          2.75rem;
    letter-spacing:     0.05em;

    line-height:        0.75;

    position:           relative;
    display:            inline-block;
}

.pointer
{
    position:           absolute;
    right:              115%;
    top:                -2px;
}



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

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

    width:              100%;
}

.column
{
    flex-direction:     column;
}

.row
{
    flex-direction:     row;
}


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

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

    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);
    background-color:   #565656;
}

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









.fullscreen
{
    box-sizing:         border-box;

    width:              100vw;
    height:             100vh;
}