/* * {
    border: 2px red solid;
} */
:root {
    color-scheme: light only;
}

body, html {
    padding: 0;
    margin: 0;
    --opacity:0.95;
    background: 
    linear-gradient(
        to bottom,
        rgba(255,255,255,var(--opacity)),
        /* rgba(255, 255, 255, 0.25), */
        rgba(255,255,255,var(--opacity))
    ),
    url(../images/cloudy1.png),
    url(../images/paper-texture.png);
    /* url(../images/sandstone.png),
    url(../images/cloudy.png); */
    /* background-blend-mode:multiply; */
    mix-blend-mode:multiply;
    background-size:cover;
    /* background-position: 50% 50%; */
    /* position: absolute; */
    /* background-repeat: no-repeat; */
    font-family: sofia-pro, sans-serif;
    font-style: normal;
    font-weight: 400;
    overflow-x: hidden;
    

}
/* Global Variables */
html {
    --logo-size-initial:100px;
    --logo-size:60px;
    --logo-margin-initial:10px;
    --logo-margin:5px;
    --titlebar-height-initial:calc(var(--logo-size-initial) + var(--logo-margin-initial) + var(--logo-margin-initial) + 5px);
    --titlebar-height:calc(var(--logo-size) + var(--logo-margin) + var(--logo-margin) + 5px);
    --article-width:80vw;
    --text-block-padding:20px;
    --bridge-margin:-30vw;
    --bridge-height:25vw;
    --bridge-crop:calc(var(--bridge-height)+var(--bridge-margin))
}

.main {
    width: 100%;
    background-color:rgba(255, 255, 255, 0);
}
.content {
    --opacity:0.1;
    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,var(--opacity)),
        rgba(255,255,255,var(--opacity)),
        rgba(255,255,255,var(--opacity))
        ),
        url(../images/cloudy1.png);
    background-size:cover;
    background-blend-mode: multiply;
    mix-blend-mode:multiply;
}

a {
    color:#4e4e4e;
    text-align: center;
    font-weight: bold;
}

p{
    text-align: left;
    overflow-wrap: break-word;
    font-weight: 300;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}



h1 {
    color: #000000;
    padding: 10px;
}
h2 {
    color: #000000;
    text-align: left;
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin:0;
    margin-bottom: 10px;
}
h3 {
    color: #000000;
    text-align: left;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    /* padding-top: 2px; */
    margin-top: 2px;
    font-size: 1.6rem;
    margin-bottom: 10px;
}

ul {
    text-align: left;
    margin-top:5px;
    font-size: 1.2rem;
}

li {
    font-weight: 300;
    padding-bottom: 2.5px;
}

ol {
    text-align: left;
    margin-top:5px;
    font-size: 1.2rem;
}

b {
    text-align: left;
}

span {
    text-align: left;
}



.titlebar{
    width: 100%;
    height:var(--titlebar-height);
    background: #ffffff;
    /* background: red; */
    text-align: left;
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    animation-name: titleshrink;
    animation-timeline: scroll();
    animation-duration: 1ms;
    animation-range: 0px 500px;
}


@keyframes titleshrink {
    from{
        height: var(--titlebar-height-initial);
    }
    to {
        height: var(--titlebar-height);
    }
}
/* @keyframes paddingshrink {
    from{
        padding-top: var(--titlebar-height-initial);
    }
    to {
        padding-top: var(--titlebar-height);
    }
} */

.logobox {
    display:inline-block;
    text-align: left;
    left:var(--gutter-width);
    position: relative;
    display: flex;
    align-items: center;
    gap:20px;
}


.logo {
    left: var(--gutter-width);
    height: var(--logo-size);
    width: var(--logo-size);
    padding-top: 10px;
    padding-bottom: 10px;
    animation-name: logoshrink;
    animation-timeline: scroll();
    animation-duration: 1ms;
    animation-range: 0px 500px;
}

@keyframes logoshrink {
    from{
        height: var(--logo-size-initial);
        width: var(--logo-size-initial);
    }
    to{
        height: var(--logo-size);
        width: var(--logo-size);
    }
}

.letterhead{
    float: right;
    margin: 0;
    font-weight: 200;
    font-size: 0.9rem;
    animation-name: textshrink;
    animation-timeline: scroll();
    animation-duration: 1ms;
    animation-range: 0px 500px;
}

@keyframes textshrink {
    from{
        font-size: 1.5rem;
    }
    to{
        font-size: 1rem;
    }
}
.chunk {
    padding-top: 0;
    padding-bottom: 40px;
}

.welcome{
    padding-top: 20px;
}

.welcome h3{
    padding-bottom: 0;
    margin-bottom: 0;
}

.welcome b{
    /* font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    font-size: 1.5rem;
    font-style: none;

}

.column {
    --popcolor: white;
    padding-bottom: 100px;
    width: var(--article-width);
    margin-left: var(--gutter-width);
    background-blend-mode: color-burn;
    position: relative;
    padding-top:var(--titlebar-height-initial);
    /* animation-name: paddingshrink;
    animation-timeline: scroll();
    animation-duration: 1ms;
    animation-range: 0px 500px; */
}


#profile{
    --profilesize: 200px;
    height:var(--profilesize);
    width:var(--profilesize);
    border-radius:var(--profilesize);
    margin: 20px;
    float:right
}
/* Old style with layered boxes */
/* .section-container {
    --bgcolor: 255,255,255;
    --bgalpha: 0.1;
    background: 
    linear-gradient(
        to bottom,
        #ffffff00,
        rgba(var(--bgcolor),var(--bgalpha)),
        rgba(var(--bgcolor),var(--bgalpha)),
        rgba(var(--bgcolor),var(--bgalpha)),
        #ffffff00
        );
    background-blend-mode:multiply;
    position: relative;
} */

.section-container {
    --bgcolor: 255,255,255;
    --bgalpha: 0.1;
    background-blend-mode: multiply;
    position: relative;
}

.section {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    /* background: rgba(255, 255, 255, 0.4); */
    padding-top: 5px; 
    padding-bottom:0;
    display:inline;

}

.text-block{
    background: 
    radial-gradient(farthest-corner at bottom,  rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.00));
    margin: 0;
    padding: var(--text-block-padding);
    padding-top: 0;
    top:-10px;
    padding-bottom: 0;
    
}

.section img{
    text-align: center;
    object-fit: cover;
}

.text-block p{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-top: 0;
    
}
    


.vibecontainer {
    height:25vw;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}

.vibecontainer img{
    width: 100%;
    opacity: 0.9;
}

.transitionimage {
    height:25vw;
    overflow: hidden;
    /* margin: 8px; */
    /* margin-bottom: 30px; */
    position:relative;
    left: calc(var(--gutter-width)*-1);
    width: 100vw;
    /* border-radius: 10px; */
    /* border: rgb(255, 255, 255) 3px solid; */
}

.transitionimage img{
    width: 100%;
    opacity: 0.9;
}

/* .callresponse{
    display: flex;
    flex-direction: row;
    border-top: solid 5px rgba(255, 255, 255, 0.5);
    border-bottom: solid 5px rgba(255, 255, 255, 0.5);
} */
.callresponse {
    display: flex;
    flex-direction: row;
    /* border-top: solid 5px rgba(255, 255, 255, 0.5); */
    /* border-bottom: solid 5px rgba(255, 255, 255, 0.5); */
    /* flex-basis: 0; */
    padding-bottom: 0;
    align-items: center;
    margin-bottom: 10px;
    gap:20px;
}

/* .callresponse h3 {
    font-size: 1.8rem;
    border-radius: 20px;
} */
.callresponse h3 {
    font-size: 2rem;
    border-radius: 20px;
    flex-basis: 0;
    flex-grow: 0.4;
}

/* .callresponse ul {
    list-style: none;
} */
.callresponse ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-grow: 0.8;
    font-size: 1.2rem;
    margin: 0;
    padding-left: 0;
}

li.question {
    flex-basis: 0;
    flex-grow: 1;
}

.callresponse li:before {
    /* content: "▸→↝⇢⇨⇛⇝·•✓▪▫∙"; */
    content: "•";
    padding-right: 8px;
    /* font-size: 1.2rem; */
}

.quoteblock {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0,-180%);
    color: white;
    /* font-size: clamp(1rem, -0.875rem + 8.333vw, 2.0rem); */
    font-size: 1.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    text-align: right;
}
.quoteblock small{
    font-size: 0.6em;
}

#path{
    margin-top: -20vw;
    /* margin: 0; */
}
#fish{
    margin-top: -35vw;
}
#sea{
    margin-top: -10vw;
}
#bridge{
    margin-top: -30vw;
}
.transitionimage:has(#bridge){
    top:-20px
}
#trail{
    margin-top: -15vw;
}

/* Old style with layered boxes */
/* #intro:before,#about:before,#services:before,#testimonials:before{
    content:"";
    z-index:-1;
    display: inline-block;
    position:absolute;
    height:100%;
    left:-100vw;
    right:-20vw;
    background:inherit;
} */
#intro:before, #about:before, #services:before, #testimonials:before {
    content: "";
    z-index: -1;
    display: inline-block;
    position: absolute;
    /* top: 0; */
    /* bottom: 0; */
    height: 100%;
    left: -100vw;
    right: -20vw;
    background: inherit;
    background: linear-gradient(to bottom,#ffffff00,rgba(var(--bgcolor),var(--bgalpha)),rgba(var(--bgcolor),var(--bgalpha)),rgba(var(--bgcolor),var(--bgalpha)),#ffffff00);
}
#intro {
    --bgcolor: 32, 207, 193;
    --bgalpha: .4;
    background-blend-mode: multiply;
    scroll-margin-top: 50vh;
}

#about {
    --bgcolor: 207, 103, 54;
    --bgalpha: 0.439;
    /* background-position: 100px 5px; */
    scroll-margin-top: var(--titlebar-height);
}
#services {
    --bgcolor: 180, 218, 91;
    --bgalpha: 0.439;
    scroll-margin-top: calc((var(--titlebar-height) + var(--bridge-height)));
}
#testimonials {
    --bgcolor:  160, 120, 197;
    --bgalpha: 0.439;
    scroll-margin-top: var(--titlebar-height);
}
#getstarted {
    scroll-margin-top: var(--titlebar-height);
}
p.listintro {
    margin-bottom: 0;
    padding-bottom: 0;
}
.pathsbox {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
    /* flex */
}
.focusbox{
    display:flexbox;
    padding:10px;
    border: solid rgba(255, 255, 255, 0.5) 8px;
    /* background: 
    radial-gradient(farthest-corner at top left,  
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.4)); */
    
    border-radius: 20px;
    flex-basis: 0;
    flex-grow: 1;
}

.focusbox h3{
    text-align: center;
    border-bottom: solid 1px;
}

.focusbox p {
    /* text-align: center; */
    font-weight: 500;
    padding-bottom: 10px;
}

/* .offer {
    border: dashed rgba(255, 255, 255, 0.5) 8px;
    border-radius: 50px;
    padding: 20px;
    max-width: 500px;

} */

.bookcontainer{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.bookbutton{
    display: inline-block;
    position:relative;
    border-radius: 50%;
    margin: 5px;
    padding: 0;
    background: white;

    /* border: rgba(255, 255, 255, 0.5) 5px solid; */
    font-size: 1.5em;
    color:white;
    text-align: center;
    vertical-align: middle;
}
.bookbutton a{
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
    padding: 20px;
    margin: 0;
    background: 
        radial-gradient(farthest-corner at bottom left,  
            rgba(255, 255, 255, 0.514),
            rgba(255, 241, 161, 0.411));    
    border:  5px rgba(255, 255, 255, 0.5) solid;
    font-size: 1.0em;
    color:black;

}

.bookbutton a{
    transition:
        transform 0.5s ease,
        color 0.5s ease;
}
.bookbutton a:hover{
    transform: scale(1.1);
    color: salmon;
}





/* #menuBox {
    display: block;
    position: absolute;
    top: 50px;
    right:var(--gutter-width);
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
} */

#menuBox {
    display: block;
    position: fixed;
    /* top: 50px; */
    right: var(--gutter-width);
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
}

#menuBox a{
    border-radius: 20px;
    transition: color 0.2s ease,
                transform 0.5s ease;
    display: inline-block;
    
}

#menuBox a:hover,
#menuBox a:focus{
    transform: scale(1.1);
    color: salmon;
}

#menuBox input{
    display: block;
    width: 50px;
    height: 40px;
    position: absolute;
    top: -10px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

#menuBox span {
    will-change: transform, opacity, background;
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 5px;
    /* position: absolute; */
    position: relative;
    background: black;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.25s ease,
                background 0.25s ease,
                opacity 0.25s ease;
}

#menuBox span:first-child{
    transition: transform 500ms;
    transform-origin: 0% 0%;
}

#menuBox span:nth-last-child(2){
    transition: transform 500ms;
    transform-origin: 0% 100%;
}

#menuBox input:checked ~ span {
    transition: transform 500ms;
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: black;
}

#menuBox input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuBox input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: absolute;
    max-width: 400px;
    right: 5px;
    text-align: right;
    box-sizing: border-box;
    overflow-y: auto;
    list-style-type: none;
    overflow-y: visible;
    text-wrap: nowrap;
}

span {
    text-align: left;
}

#menu li label{
    cursor: pointer;
}


#menu li{
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 2s ease;
    padding: 10px;
    font-size: 20px;
    opacity: 0;
    top:0;
    visibility: hidden;
    transition-property: opacity,transform,top,visibility,background;
}
#menuBox input:checked ~ #dropdownbox ul>li{
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 2s ease;
    transition-property: opacity,transform,top,visibility,background;
    visibility: visible;
    top: auto;
    opacity: 1;
    background: rgba(255, 255, 255, 0.9);

}

#dropdownbox ul>li:nth-of-type(4){
    transition-delay: 0ms;
}
#dropdownbox ul>li:nth-of-type(3){
    transition-delay: 100ms;
}
#dropdownbox ul>li:nth-of-type(2){
    transition-delay: 250ms;
}
#dropdownbox ul>li:nth-of-type(1){
    transition-delay: 500ms;
}


#menuBox input:checked ~ #dropdownbox ul>li:nth-of-type(1){
    transition-delay: 0ms;
}
#menuBox input:checked ~ #dropdownbox ul>li:nth-of-type(2){
    transition-delay: 25ms;
}
#menuBox input:checked ~ #dropdownbox ul>li:nth-of-type(3){
    transition-delay: 100ms;
}
#menuBox input:checked ~ #dropdownbox ul>li:nth-of-type(4){
    transition-delay: 200ms;
}
.footer {
    display: flex;
    flex-direction: row;
    padding: 0;
    justify-content: stretch;
    align-items: baseline;
    gap: 20px;
}
.text-block:has(.footer){
    background: none;
}
.footer div{
    flex-basis: 0;
    flex-grow: 1;
}
.footer p{
    text-align: center;
    font-size: 1rem;

}

@media screen and (min-width: 901px){
    html{
        --article-width:80vw;
        --gutter-width:calc((100vw - var(--article-width)) / 2);        
    }

}
@media screen and (max-width: 900px){
    html{
        --article-width:90vw;
        --gutter-width:calc((100vw - var(--article-width)) / 2);        
    }
    .vibecontainer {
        height:35vh;
        overflow: hidden;
        left:calc(var(--text-block-padding)*-1);
        width: var(--article-width);
    }

    .quoteblock {
        font-size: 1.2rem;
        transform: translate(0,-150%);
    }
    
    .quoteblock small{
        font-size: 0.4em;
    }
    .pathsbox {
        flex-direction: column;
    }
    .callresponse{
        flex-direction: column;
        align-items: flex-start;
        gap:0;
    }
    #profile {
        --profilemobile: 120px;
        height: var(--profilemobile);
        width: var(--profilemobile);
        border-radius: var(--profilemobile);
        margin: 0;
        margin-left: 10px;
        float: right;
        padding: 0;
    }
    #services {
        scroll-margin-top: calc((var(--titlebar-height) + (100vw * 3072 / 4080)) - 10vw);
    }
    #path{
        margin-top: -20vw;
        /* margin: 0; */
    }
    #trail{
        margin-top: 0;
    }
    #bridge{
        margin-top: -10vw;
    }
    .chunk p{
        text-justify:inter-word;
        text-align:justify;
    }
    .transitionimage{
        height: auto;
        width: 100vw;
    }
    .footer{
        font-size: .6rem !important; 
    }
    .footer p{
        font-size: .8rem;
    }
    .centered p{
        text-align: center;
    }
    
}