: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.6rem 1.5rem;
    border-radius:      1.25rem;
    white-space:        nowrap;
}

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

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






html
{
    font-size: 16px;
}

html, body
{
    overflow-x: hidden;
}

@media (max-width: 1920px)
{
    html
    {
        font-size:      14px;
    }

}

@media (max-width: 1400px)
{
    html
    {
        font-size: 12px;
    }
}





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

section
{
    place-items:        center;
    padding-inline:     2rem;
}


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.05rem;
    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);
}


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

.desktop
{
    display:            block;
}



@media (max-width: 1400px)
{

    p
    {
        font-size: 1.6rem;
    }

}


@media (max-width: 800px)
{

    .desktop
    {
        display:    none;
    }

}

.gap
{
    height: 25rem;
}


.bit
{
    height: 5rem;
}







.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 + 5rem + 1.8rem));
    background:             linear-gradient(135deg, #a9e659 0%, #25d568 50%, #0cb972 100%);

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


    background-image:       url("../Images/splash/splash.png");
    background-size:        cover;        
    background-position:    center;  
    background-repeat:      no-repeat; 
}

@media (max-width: 1100px)
{
    .header
    {
        background-position:  40% center;  
    }
}


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

    height:             100%;
}



.logo-flex
{
    position:          absolute;
    top:                2rem;

    left:               50%;
    transform:          translateX(-50%);

    display:            flex;
    flex-direction:     row;

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

    gap:                1.5rem;

    height:             auto;


}

.logo
{
    width:              5rem;

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

    z-index:            1000;
}


.tagline
{
    height:             auto;
    width:              auto;
    max-width:          min(60vw, 35rem);

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

@media (max-width: 1650px)
{
    .tagline
    {
        max-width: min(50vw, 30rem);
    }
}

@media (max-width: 1100px)
{
    .tagline
    {
        max-width: min(70vw, 50rem);
    }
}

.paragraph
{
    width:              95%;
    max-width:          70rem;
}




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


.stanza img
{
    width:              100%;
    max-width:          22.5rem;
    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;
    }
}




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

    height:             auto;

    width:              100%;
    max-width:          35rem;
}

.buttons-width
{
    max-width: 27.5rem;
}


.button
{
    width:              100%;

    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;
    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:                2rem;
    position:           fixed;
    bottom:             1.5rem;

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

    line-height:        0.75;

    position:           relative;
    display:            inline-block;
}

.pointer
{
    position:           absolute;
    right:              115%;
    top:                -0.2rem;

    width:              2.5rem;
}



.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:          40rem;

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