/* * {
    outline: 1px solid lightgray;
  } */

:root {
    --primary-color: #69B1A2;
    --primary-color-soft: #86ddcc;
    --primary-color-softer: #DBF0EC;
    --secondary-color: #FFBC1F;    
}

html, body {
    margin: 0; 
    padding: 0;
}

a {
    text-decoration: none; 
    color: inherit; 
    display: block; 
    padding: 0; 
    margin: 0; 
    cursor: pointer; 
  }

#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: auto;
    margin-top: 25px;
    height: 100%;
}

#content,
#footer-content {
    max-width: 1400px;
}


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

.full-width-line {
    border: none;
    height: 3px; 
    background-color: black;
    width: 100%;
    margin: 0;
  }

p {
    line-height: 200%;
}





/* 
########  #######  ##    ## ######## 
##       ##     ## ###   ##    ##    
##       ##     ## ####  ##    ##    
######   ##     ## ## ## ##    ##    
##       ##     ## ##  ####    ##    
##       ##     ## ##   ###    ##    
##        #######  ##    ##    ##     */

.assistant-font-text, p {
  font-family: "Assistant", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.5px;
}

.assistant-font-heading, h2 {
    font-family: "Assistant", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -1px;
}

/* 
##     ## ########    ###    ########  ######## ########  
##     ## ##         ## ##   ##     ## ##       ##     ## 
##     ## ##        ##   ##  ##     ## ##       ##     ## 
######### ######   ##     ## ##     ## ######   ########  
##     ## ##       ######### ##     ## ##       ##   ##   
##     ## ##       ##     ## ##     ## ##       ##    ##  
##     ## ######## ##     ## ########  ######## ##     ##  */

header {
    position: fixed;
    width: 100%;
    height: 80px;
    top: -80px;
    background-color: var(--primary-color-softer);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 4px solid black;
    transition: top 0.5s;
}

#header-image {
    width: 15%;
    padding-left: 8px;
    max-height: 95%;
}

#header-links {
    display: flex;
    justify-content: center;
    flex-grow: 2;
}


#spacing-image {
    display: none;
}



/* 
##        #######   ######    #######  
##       ##     ## ##    ##  ##     ## 
##       ##     ## ##        ##     ## 
##       ##     ## ##   #### ##     ## 
##       ##     ## ##    ##  ##     ## 
##       ##     ## ##    ##  ##     ## 
########  #######   ######    #######   */
#logo {
    width: 100%;
}


 /* 
 ######  ########    ###    
##    ##    ##      ## ##   
##          ##     ##   ##  
##          ##    ##     ## 
##          ##    ######### 
##    ##    ##    ##     ## 
 ######     ##    ##     ##  */
#CTA {
    margin: 20px 0px;
    display: flex;
    justify-content: space-around;
    width: 100%;
}


button {
    -webkit-border-radius: 60;
    -moz-border-radius: 60;
    border-radius: 60px;
    -webkit-box-shadow: 3px 6px 5px #666666;
    -moz-box-shadow: 3px 6px 5px #666666;
    box-shadow: 3px 6px 5px #666666;
    font-family: "Assistant", sans-serif;
    color: #000000;
    font-size: 0.95rem;
    padding: 10px 20px 10px;
    border: solid #000000 3px;
    text-decoration: none;
}


button:hover {
    background: #6bad9f;
    background-image: -webkit-linear-gradient(top, #92dece, #6bad9f);
    background-image: -moz-linear-gradient(top, #92dece, #6bad9f);
    background-image: -ms-linear-gradient(top, #92dece, #6bad9f);
    background-image: -o-linear-gradient(top, #92dece, #6bad9f);
    background-image: linear-gradient(to bottom, #92dece, #6bad9f);
  }


/* 
########  ####  #######  
##     ##  ##  ##     ## 
##     ##  ##  ##     ## 
########   ##  ##     ## 
##     ##  ##  ##     ## 
##     ##  ##  ##     ## 
########  ####  #######   */
#bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;

}


#bio-image {
    width: 75%;
    border-radius: 100%;
}

#bio-text {
    text-align: center;
    width: 100%;

}

/* 
##     ##    ###     ######   ######     ###     ######   ########  ######  
###   ###   ## ##   ##    ## ##    ##   ## ##   ##    ##  ##       ##    ## 
#### ####  ##   ##  ##       ##        ##   ##  ##        ##       ##       
## ### ## ##     ##  ######   ######  ##     ## ##   #### ######    ######  
##     ## #########       ##       ## ######### ##    ##  ##             ## 
##     ## ##     ## ##    ## ##    ## ##     ## ##    ##  ##       ##    ## 
##     ## ##     ##  ######   ######  ##     ##  ######   ########  ######   */


#massage-descriptions {
    margin-bottom: 50px;
}


/* 
##        #######   ######     ###    ######## ####  #######  ##    ## 
##       ##     ## ##    ##   ## ##      ##     ##  ##     ## ###   ## 
##       ##     ## ##        ##   ##     ##     ##  ##     ## ####  ## 
##       ##     ## ##       ##     ##    ##     ##  ##     ## ## ## ## 
##       ##     ## ##       #########    ##     ##  ##     ## ##  #### 
##       ##     ## ##    ## ##     ##    ##     ##  ##     ## ##   ### 
########  #######   ######  ##     ##    ##    ####  #######  ##    ##  */



#location {
    margin-bottom: 30px;
}

#location > p {
    font-size: larger;
}

#map {
    width: 100%;

}



/* 
########  ########  ####  ######  ########  ######  
##     ## ##     ##  ##  ##    ## ##       ##    ## 
##     ## ##     ##  ##  ##       ##       ##       
########  ########   ##  ##       ######    ######  
##        ##   ##    ##  ##       ##             ## 
##        ##    ##   ##  ##    ## ##       ##    ## 
##        ##     ## ####  ######  ########  ######   */

#prices {
    margin-bottom: 50px;
}

#prices-text {
    font-size: 1.2rem;
}

.price-list {
    font-style: italic;
    line-height: 50%;
}

#custom-session {
    font-size: 0.9rem;
    font-style: italic;
}



/* 
##       ########    ###    ##     ## ########  ######  
##       ##         ## ##   ##     ## ##       ##    ## 
##       ##        ##   ##  ##     ## ##       ##       
##       ######   ##     ## ##     ## ######    ######  
##       ##       #########  ##   ##  ##             ## 
##       ##       ##     ##   ## ##   ##       ##    ## 
######## ######## ##     ##    ###    ########  ######   */

.background-leaf{
    position: absolute;
    width: 320px;
    z-index: -1;
    filter: invert(88%) sepia(43%) saturate(265%) hue-rotate(101deg) brightness(98%) contrast(89%);
    opacity: 0.3;
}

.reversed {
    transform: scaleX(-1);
}

.leaf-one {
    top: 280px;
    left: -160px;
}

.leaf-two {
    top: 500px;
    left: 160px;
}

.leaf-three {
    top: 800px;
    left: -160px;
}

.leaf-four {
    top: 1100px;
    left: 160px;
}



/* 
########  #######   #######  ######## ######## ########  
##       ##     ## ##     ##    ##    ##       ##     ## 
##       ##     ## ##     ##    ##    ##       ##     ## 
######   ##     ## ##     ##    ##    ######   ########  
##       ##     ## ##     ##    ##    ##       ##   ##   
##       ##     ## ##     ##    ##    ##       ##    ##  
##        #######   #######     ##    ######## ##     ##  */

footer {
    width: 100%;
    background: var(--primary-color-softer);
}

#footer-content {
    width: 90%;   
    margin: auto;
    display: flex;
    flex-direction: column;

}

#acknowledgment {
    margin-bottom: 60px;
    text-align: center;
    font-style: italic;
}

#footer-content > img {
    width: 40%
}

#footer-contact-socials {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

#footer-address {
    margin-left: 3%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 0.55rem;
}

#footer-address p {
    margin: 0;
}

#footer-socials a {
    display: flex;
}

#footer-socials img {
    width: 2rem;
    height: 2rem;
    margin: auto auto auto 0;
}

#footer-socials p {
    width: 100%;
    margin-left: 0.5rem;
}

#copyright {
    margin-bottom: 0.2rem;
}



/* 
        ##     ## ######## ########  ####    ###            
        ###   ### ##       ##     ##  ##    ## ##           
        #### #### ##       ##     ##  ##   ##   ##          
####### ## ### ## ######   ##     ##  ##  ##     ## ####### 
        ##     ## ##       ##     ##  ##  #########         
        ##     ## ##       ##     ##  ##  ##     ##         
        ##     ## ######## ########  #### ##     ##          */




/* 
 #######  ########   #####           ##         #######    #####   
##     ## ##    ##  ##   ##          ##    ##  ##     ##  ##   ##  
       ##     ##   ##     ##         ##    ##  ##     ## ##     ## 
 #######     ##    ##     ## ####### ##    ##   #######  ##     ## 
       ##   ##     ##     ##         ######### ##     ## ##     ## 
##     ##   ##      ##   ##                ##  ##     ##  ##   ##  
 #######    ##       #####                 ##   #######    #####    */
@media (min-width: 370px) {#size-indicator:after {content: '370-480';}


    button {
        margin: 0px 10px;
        font-size: 1.2rem;
    }

    #bio-text {
        width: 100%;
    }

    footer p {
        font-size: 1.2rem;
    }

}



/* 
##         #######    #####           ########  #######   #######  
##    ##  ##     ##  ##   ##          ##    ## ##     ## ##     ## 
##    ##  ##     ## ##     ##             ##   ##        ##     ## 
##    ##   #######  ##     ## #######    ##    ########   #######  
######### ##     ## ##     ##           ##     ##     ## ##     ## 
      ##  ##     ##  ##   ##            ##     ##     ## ##     ## 
      ##   #######    #####             ##      #######   #######   */
@media (min-width: 481px) {#size-indicator:after {content: '480-768';}

    #header-image {
        width: 25%;
    }
    
    p, 
    footer p {
        font-size: 1.35rem;
    }

    h2 {
        font-weight: bold;
        font-size: 1.8rem;
    }

    #logo {
        width: 75%;
    }

    button {
        font-size: 1.5rem;
    }


    /*                             
            #              
    ### ###     ### ###  ## 
    # # #    #  #   ##   #  
    ### #    ## ### ### ##  
    #                        */

        #prices-text {
            font-size: 1.35rem;
        }


        #custom-session {
            font-size: 1rem;
        }

    /*                         
    ##          #          
    #  ### ### ### ### ### 
    ### # # # #  #  ##  #   
    #  ### ###  ## ### #   
    ##                       */

    #footer-socials img {
        width: 2.5rem;
        height: 2.5rem;
    } 
}



/* 
########  #######   #######             ##     #####    #######  ##        
##    ## ##     ## ##     ##          ####    ##   ##  ##     ## ##    ##  
    ##   ##        ##     ##            ##   ##     ##        ## ##    ##  
   ##    ########   #######  #######    ##   ##     ##  #######  ##    ##  
  ##     ##     ## ##     ##            ##   ##     ## ##        ######### 
  ##     ##     ## ##     ##            ##    ##   ##  ##              ##  
  ##      #######   #######           ######   #####   #########       ##   */
@media (min-width: 769px) {#size-indicator:after {content: '768-1024';}

    #logo {
        margin-bottom: 30px;
    }

    #CTA {
        justify-content: center;
    }

    button {
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 20px;
        font-size: 1.8rem;
    }

    #bio-image {
        width: 50%;
    }

    #location {
        width: 600px;
    }

    #acknowledgment,
    #footer-address p,
    #footer-socials a {
        font-size: 1.5rem;
    }

    #footer-socials img {
        width: 3rem;
        height: 3rem;
    } 

    /* HEADER */
    
    #header-links {
        display: flex;
    }

    #header-image {
        width: auto;
        padding: 0;
        margin: 0;
    }

    #spacing-image {
        display: flex;
        opacity: 0;
    }

    #spacing-image,
    #header-image {
        margin: 10px;
    }
}



/* 
   ##     #####    #######  ##                   ##    #######   #######    #####   
 ####    ##   ##  ##     ## ##    ##           ####   ##     ## ##     ##  ##   ##  
   ##   ##     ##        ## ##    ##             ##          ## ##     ## ##     ## 
   ##   ##     ##  #######  ##    ##  #######    ##    #######   #######  ##     ## 
   ##   ##     ## ##        #########            ##   ##        ##     ## ##     ## 
   ##    ##   ##  ##              ##             ##   ##        ##     ##  ##   ##  
 ######   #####   #########       ##           ###### #########  #######    #####    */
@media (min-width: 1025px) {#size-indicator:after {content: '1024-1280';}
/* DESKTOP LAYOUT */
    #logo {
        width: 60%;
        max-width: 600px;
    }

    #bio {
        flex-direction: row-reverse;
    }

    #bio-image {
        width: 40%;
        max-width: 550px;
        border-radius: 20%;
    }

    #bio-text {
        width: 60%;
        font-size: 1.5rem;   
        margin: auto 20px;
    }

    #massage-descriptions {
        display: flex;
        justify-content: space-between
    }

    #remedial-text,
    #relaxation-text {
        width: 90%;
        margin: auto;
    }


    #footer-content > img {
        width: 20%
    }


    #location-prices {
        display: flex;
    }

    #prices {
        margin-left: 12px;
        order: -1;
        width: 40%;
    }

 
    #CTA,
    #bio,
    #massage-descriptions {
        margin-bottom: 80px;
    }
}



/* 
   ##    #######   #######    #####          
 ####   ##     ## ##     ##  ##   ##    ##   
   ##          ## ##     ## ##     ##   ##   
   ##    #######   #######  ##     ## ###### 
   ##   ##        ##     ## ##     ##   ##   
   ##   ##        ##     ##  ##   ##    ##   
 ###### #########  #######    #####           */
 @media (min-width: 1280px) {#size-indicator:after {content: '1280+';}

/* LOCATION-PRICES */
    #location-prices {
        width: 100%;
    }

    #prices {
        width: 40%;
        padding-right: 50px;
    }
    #location {
        width: 60%;
        padding: 50px;
    }

/* FOOTER */
    #footer-address {
        justify-content: flex-start;
    }

}