@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* border: red solid 1px; */
}

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --------------- */
/* - Page header - */
/* --------------- */
.pageHeader {
    text-align: center;
    background-image: url("../images/header_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.pageHeader h1 {
    color: lemonchiffon;
    font-family: 'Dancing Script', cursive;
    font-size: max(3.4vw, 24px);
    padding-top: 5px;
}

.pageHeader a {
    color: lemonchiffon;
    text-decoration: none;
    margin-left: 4%;
    margin-right: 4%;
    font-weight: bold;
    font-size: max(1.5vw, 14px);
}

.pageHeader a:hover {
    color: cornflowerblue;
}

/* ---------------------------------------------- */
/* - Image source classes (used on various pages) - */
/* ---------------------------------------------- */
.imageSource, .imageSourceRelativePosition {
    color: lemonchiffon;
    font-size: 12px;
    background: rgba(72, 95, 53, 0.7);
}

.imageSource {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.imageSourceRelativePosition {
    clear: left;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    width: fit-content;
    margin-right: 10px;
    margin-left: 10px;
}

.imageSource a, .imageSourceRelativePosition a {
    font-family: 'Times New Roman';
    font-weight: normal;
    color: lemonchiffon;
    text-decoration: underline;
}

.imageSource a:hover, .imageSourceRelativePosition a:hover {
    color: darkmagenta;
}

/* ------------------------------------------------------------------ */
/* - mainContent class (used on various pages) - */
/* ------------------------------------------------------------------ */
.mainContent {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex-grow: 1;

    overflow-y: auto;
}

/* ------------- */
/* - Home page - */
/* ------------- */
#homeMain {
    background-image: url("../images/forest_detail.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex-grow: 1;
    position: relative;
}

#homeMain .divQuote {
    color: lemonchiffon;
    font-family: 'Architects Daughter', cursive;
    font-size: max(1.1vw, 14px);
    font-weight: bold;
    text-align: center;
    background: rgba(72, 95, 53, 0.7);
}

#homeMain #divQuote1 {
    position: absolute;
    top: 7%;
    left: 7%;
}

#homeMain #divQuote2 {
    position: absolute;
    right: 6%;
    top: 26%;
}

#homeMain #divQuote3 {
    position: absolute;
    top: 44%;
    right: 21%;
}

/* ------------------*/
/* - Services page - */
/* ----------------- */
#servicesMain {
    height: 100%;
}

.divService {
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.divService a {
    text-decoration: none;
    font-family: Papyrus, cursive;
    font-size: min(8vw, 78px);
}

.divService .pService {
    font-family: 'Times New Roman';
    font-size: min(4vw, 39px);
    padding-left: 5px;
    padding-right: 5px;
}

.divService .pInstruction {
    font-family: 'Times New Roman';
}

#divServiceCounselling {
    background-image: url("../images/service_counselling_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex-grow: 1;
}

#divServiceCounselling a {
    color: chocolate;
    background: rgba(222, 228, 228, 0.5);
    padding-right: 5px; /* The text ended right at the edge of the background without the padding which looked odd. */
}

#divServiceCounselling a:hover {
    color: cornflowerblue;
}

#divServiceCounselling .pService {
    color: chocolate;
    background: rgba(222, 228, 228, 0.5);
}

#divServiceCounselling .pInstruction {
    color: black;
    background: rgba(222, 228, 228, 0.5);
}

#divServiceNatureTherapy {
    background-image: url("../images/service_nature_therapy_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex-grow: 1;
}

#divServiceNatureTherapy a {
    color: chocolate;
    background: rgba(218, 198, 145, 0.5);
}

#divServiceNatureTherapy a:hover {
    color: cornflowerblue;
}

#divServiceNatureTherapy .pService {
    color: chocolate;
    background: rgba(218, 198, 145, 0.5);
}

#divServiceNatureTherapy .pInstruction {
    color: black;
    background: rgba(218, 198, 145, 0.5);
}

/* #divHerbalist {
    background-image: url("../images/service_herbalist_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#divHerbalist a {
    color: lemonchiffon;
}

#divHerbalist a:hover {
    color: cornflowerblue;
}

#divHerbalist .pService {
    color: lemonchiffon;
    background: green;
}

#divHerbalist .pInstruction {
    color: white;
    background: blue;
} */

/* -------------------- */
/* - Counselling page - */
/* -------------------- */
#counsellingMainContent {
    background-image: url("../images/service_counselling_background.jpg");
}

#counsellingMainContent h1 {
    font-family: Papyrus, cursive;
    font-weight: normal;
    font-size: 8vh;
    color: chocolate;

    text-align: center;
}

#counsellingMainContent p {
    font-size: max(1vw, 16px);
    line-height: 130%;
}

.counsellingParagraphWithTopMargin {
    margin-top: 10px;
}

#divCounsellingContentUpperLeft {
    width: 50%;
    float: left;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCounsellingContentUpperRight {
    width: 50%;
    float: left;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCounsellingDescription {
    width: fit-content;
    max-width: 44vw;
    padding: 10px;
    color: black;
    background: rgba(222, 228, 228, 0.4);
    border-radius: 10px;
}

#divCounsellingSessionTypes {
    width: fit-content;
    max-width: 44vw;
    margin-top: 20px;
    padding: 10px;
    color: black;
    background: rgba(222, 228, 228, 0.4);
    border-radius: 10px;
}

#divCounsellingSessionTypes ul {
    font-size: max(1vw, 16px);
    list-style-type: disc;
    padding-left: 20px;
    line-height: 130%;
}

#divPriceAndAvailability {
    width: fit-content;
    max-width: 44vw;
    padding: 10px;
    color: black;
    background: rgba(222, 228, 228, 0.7);
    border-radius: 10px;
}

#divPriceAndAvailability table {
    margin-top: 10px;
    position: relative;
    display: block;
    height: 30vh;
    overflow-y: scroll;
    font-family: 'Courier New', Courier, monospace;
    /* table-layout: fixed; */
}

#divPriceAndAvailability th, #divPriceAndAvailability td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: max(0.9vw, 12px);
}

#divPriceAndAvailability thead th {
    position: sticky;
    top: 0;
    background: white;
    padding-left: 2vw;
    padding-right: 2vw;
}

#divPriceAndAvailability tbody th {
    padding-left: 2px;
    padding-right: 2px;
}

#cellMon08000815, #cellMon08150830, #cellMon08300845, #cellMon08450900, #cellMon09000915, #cellMon09150930, #cellMon09300945, #cellMon09451000, #cellMon10001015
    , #cellMon10151030, #cellMon10301045, #cellMon10451100, #cellMon11001115, #cellMon11151130, #cellMon11301145, #cellMon11451200, #cellMon12001215, #cellMon12151230
    , #cellMon12301245, #cellMon12451300, #cellMon13001315, #cellMon13151330, #cellMon13301345, #cellMon13451400, #cellMon14001415, #cellMon14151430, #cellMon14301445
    , #cellMon14451500, #cellMon15001515, #cellMon15151530, #cellMon15301545, #cellMon15451600, #cellMon16001615, #cellMon16151630, #cellMon16301645, #cellMon16451700
    , #cellMon17001715, #cellMon17151730, #cellMon17301745, #cellMon17451800
    , #cellTue08000815, #cellTue08150830, #cellTue08300845, #cellTue08450900, #cellTue09000915, #cellTue09150930, #cellTue09300945, #cellTue09451000, #cellTue10001015
    , #cellTue10151030, #cellTue10301045, #cellTue10451100, #cellTue11001115, #cellTue11151130, #cellTue11301145, #cellTue11451200, #cellTue12001215, #cellTue12151230
    , #cellTue12301245, #cellTue12451300, #cellTue13001315, #cellTue13151330, #cellTue13301345, #cellTue13451400, #cellTue14001415, #cellTue14151430, #cellTue14301445
    , #cellTue14451500, #cellTue15001515, #cellTue15151530, #cellTue15301545, #cellTue15451600, #cellTue16001615, #cellTue16151630, #cellTue16301645, #cellTue16451700
    , #cellTue17001715, #cellTue17151730, #cellTue17301745, #cellTue17451800
    , #cellThu08000815, #cellThu08150830, #cellThu08300845, #cellThu08450900, #cellThu09000915, #cellThu09150930, #cellThu09300945, #cellThu09451000, #cellThu10001015
    , #cellThu10151030, #cellThu10301045, #cellThu10451100, #cellThu11001115, #cellThu11151130, #cellThu11301145, #cellThu11451200, #cellThu12001215, #cellThu12151230
    , #cellThu12301245, #cellThu12451300, #cellThu13001315, #cellThu13151330, #cellThu13301345, #cellThu13451400, #cellThu14001415, #cellThu14151430, #cellThu14301445
    , #cellThu14451500, #cellThu15001515, #cellThu15151530, #cellThu15301545, #cellThu15451600, #cellThu16001615, #cellThu16151630, #cellThu16301645, #cellThu16451700
    , #cellThu17001715, #cellThu17151730, #cellThu17301745, #cellThu17451800
    , #cellFri18001815, #cellFri18151830, #cellFri18301845, #cellFri18451900, #cellFri19001915, #cellFri19151930, #cellFri19301945, #cellFri19452000 {

    background: gray;
}

#cellMon18001815, #cellMon18151830, #cellMon18301845, #cellMon18451900, #cellMon19001915, #cellMon19151930, #cellMon19301945, #cellMon19452000
    , #cellTue18001815, #cellTue18151830, #cellTue18301845, #cellTue18451900, #cellTue19001915, #cellTue19151930, #cellTue19301945, #cellTue19452000
    , #cellWed08000815, #cellWed08150830, #cellWed08300845, #cellWed08450900, #cellWed09000915, #cellWed09150930, #cellWed09300945, #cellWed09451000
    , #cellWed17001715, #cellWed17151730, #cellWed17301745, #cellWed17451800, #cellWed18001815, #cellWed18151830
    , #cellThu18001815, #cellThu18151830, #cellThu18301845, #cellThu18451900, #cellThu19001915, #cellThu19151930, #cellThu19301945, #cellThu19452000
    , #cellFri08000815, #cellFri08150830, #cellFri08300845, #cellFri08450900, #cellFri09000915, #cellFri09150930, #cellFri09300945, #cellFri09451000, #cellFri10001015
    , #cellFri10151030, #cellFri10301045, #cellFri10451100, #cellFri11001115, #cellFri11151130, #cellFri11301145, #cellFri11451200, #cellFri12001215, #cellFri12151230
    , #cellFri12301245, #cellFri12451300, #cellFri13001315, #cellFri13151330, #cellFri13301345, #cellFri13451400, #cellFri14001415, #cellFri14151430, #cellFri14301445
    , #cellFri14451500, #cellFri15001515, #cellFri15151530, #cellFri15301545, #cellFri15451600, #cellFri16001615, #cellFri16151630, #cellFri16301645, #cellFri16451700
    , #cellFri17001715, #cellFri17151730, #cellFri17301745, #cellFri17451800 {
    
    background: green;
}

#cellWed10001015, #cellWed10151030, #cellWed10301045, #cellWed10451100, #cellWed11001115, #cellWed11151130, #cellWed11301145, #cellWed11451200, #cellWed12001215
    , #cellWed12151230, #cellWed12301245, #cellWed12451300, #cellWed13001315, #cellWed13151330, #cellWed13301345, #cellWed13451400, #cellWed14001415, #cellWed14151430
    , #cellWed14301445, #cellWed14451500, #cellWed15001515, #cellWed15001515, #cellWed15151530, #cellWed15301545, #cellWed15451600, #cellWed16001615, #cellWed16151630
    , #cellWed16301645, #cellWed16451700, #cellWed18301845, #cellWed18451900, #cellWed19001915, #cellWed19151930, #cellWed19301945, #cellWed19452000 {
    background: red;
}

#divCounsellingContentLower {
    /* When UpperRight had less height than UpperLeft, LowerLeft would be placed below UpperRight but next to UpperLeft. The cler fixes that.
       This is a good website with alternative solutions:display: 
       https://dev.to/dawnind/3-ways-to-display-two-divs-side-by-side-3d8b#:~:text=The%20most%20common%20way%20to,using%20inline%2Dblock%20css%20property.&text=The%20inline%2Dblock%20property%20on,like%20an%20inline%20element%20does. */
    clear: left;
}

#divCounsellingContentLowerLeft {
    width: 50%;
    float: left;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCounsellingContentLowerRight {
    width: 50%;
    float: left;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCounsellingTherapyRoom {
    width: fit-content;
    max-width: 44vw;
    margin-top: 20px;
    padding: 10px;
    color: black;
    background: rgba(222, 228, 228, 0.4);
    border-radius: 10px;
}

#divCounsellingTherapyRoom iframe {
    margin-top: 10px;
    width: calc(44vw - 20px);
    height: calc((44vw - 20px) / 2);
    max-width: 700px;
    max-height: 350px;
    min-height: 250px;
}

#outdoorCounselling {
    width: fit-content;
    max-width: 44vw;
    margin-top: 20px;
    padding: 10px;
    color: black;
    background: rgba(222, 228, 228, 0.7);
    border-radius: 10px;
}

#outdoorCounselling iframe {
    margin-top: 10px;
    width: calc(44vw - 20px);
    height: calc((44vw - 20px) / 2);
    max-width: 700px;
    max-height: 350px;
    min-height: 250px;
}

/* ----------------------- */
/* - Nature Therapy page - */
/* ----------------------- */
#natureTherapyMainContent {
    background-image: url("../images/service_nature_therapy_background.jpg");
}

#natureTherapyMainContent h1 {
    font-family: Papyrus, cursive;
    font-weight: normal;
    font-size: min(8vw, 78px);
    color: rgb(150, 68, 9);

    text-align: center;
}

#natureTherapyMainContent p {
    font-size: max(1vw, 16px);
    line-height: 130%;
}

#natureTherapyMainContent ul {
    font-size: max(1vw, 16px);
    line-height: 130%;
}

#divNatureTherapyStaticContent {
    width: 66%;
    float: left;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 10px;
}

#divNatureTherapyChangingContent {
    width: 34%;
    float: left;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 10px;
}

#divNatureTherapyQuote {
    color: rgb(150, 68, 9);
    font-family: 'Architects Daughter', cursive;
    font-weight: bold;
    width: fit-content;
    max-width: 60vw;
    text-align: center;
    padding: 10px;
    /* Border idea from https://amethystwebsitedesign.com/decorative-borders-with-only-css-and-no-images/ */
    border-top: 5px dotted rgb(150, 68, 9);
    border-bottom: 5px dotted rgb(150, 68, 9);
	box-shadow: inset 0 -2px 0 0 rgb(150, 68, 9), inset 0 2px 0 0 rgb(150, 68, 9), 0 2px 0 0 rgb(150, 68, 9), 0 -2px 0 0 rgb(150, 68, 9);
    margin-top: 5px;
}

#divNatureTherapyQuote p {
    font-size: max(1.1vw, 14px);
}

#divNatureTherapyShortcuts {
    margin-top: 15px;
}

#divNatureTherapyShortcuts a {
    font-size: min(3vw, 24px);
    margin-right: 5px;
    margin-left: 5px;
}

.natureTherapyParagraphWithTopMargin {
    margin-top: 10px;
}

#divNatureTherapyMyServices {
    width: fit-content;
    max-width: min(60vw, 960px);
    margin-top: 20px;
    padding: 10px;
    color: black;
    background: rgba(196, 142, 78, 0.8);
    border-radius: 10px;
}

#divNatureTherapyMyServices ul {
    list-style-type: disc;
    padding-left: 20px;
}

#divNatureTherapyWhy {
    width: fit-content;
    max-width: min(60vw, 960px);
    margin-top: 20px;
    padding: 10px;
    color: black;
    background: rgba(196, 142, 78, 0.8);
    border-radius: 10px;
}

#divNatureTherapyWhy th, #divNatureTherapyWhy td {
    width: fit-content;
    text-align: left;
    vertical-align: text-top;
    font-size: max(1vw, 16px);
}

#divNatureTherapyWhy ul {
    list-style-type: disc;
    padding-left: 20px;
}

#divNatureTherapyWhy h3 {
    margin-top: 10px;
}

#divNatureTherapyWhat {
    width: fit-content;
    max-width: min(60vw, 960px);
    margin-top: 20px;
    padding: 10px;
    color: black;
    background: rgba(196, 142, 78, 0.8);
    border-radius: 10px;
}

#divNatureTherapyWhat img {
    display: block;
    margin: 10px auto 0px;
    width: min(53.3vw, 384px);
    height: min(35.4vw, 255px);
}

#divNatureTherapyWhat h3 {
    margin-top: 10px;
}

#divNatureTherapyUpcomingEvents {
    width: fit-content;
    max-width: 32vw;
    margin-top: 10px;
    padding: 10px;
    color: black;
    background: rgba(196, 142, 78, 0.8);
    border-radius: 10px;
}

/* ----------------------- */
/* - About me page - */
/* ----------------------- */
#aboutMeMainContent {
    background: rgb(45, 76, 111);
}

#divAboutMeProfileOuter {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#divAboutMeProfileInner {
    width: fit-content;
    min-width: 65vw; /* Needed because the fit-content above doesn't work properly. Maybe because of the floating picture. */
    max-width: 90vw;
}

#divAboutMeProfileInner #imgProfilePicture {
    width: min(20.8vw, 398px);
    height: min(21.8vw, 419px);
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.aboutMeParagraphWithTopMargin {
    margin-top: 10px;
}

#divAboutMeProfileInner p {
    font-size: max(1.2vw, 16px);
    color: blanchedalmond;
    text-shadow: 5px 5px 5px rgba(0,0,0,1);
}

#divAboutMeProfileInner h2 {
    color: blanchedalmond;
    text-shadow: 5px 5px 5px rgba(0,0,0,1);
    margin-top: 30px;
}

#divAboutMeProfileInner a {
    text-shadow: none;
    color: cornflowerblue;
}

/* --------------------- */
/* - Announcement page - */
/* --------------------- */
#divAnnouncement {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;

    background-image: url("../images/birds_nest_building.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#divAnnouncement p {
    color: lemonchiffon;
    font-family: 'Architects Daughter', cursive;
    font-size: min(3.5vw, calc(1920 / 984 * 100vh / 3 / 28));

    text-align:center;
}

#divAnnouncement p a {
    color:cornflowerblue;
}

/* --------------------------------- */
/* - Media queries for page header - */
/* --------------------------------- */
@media(max-width: 300px) {
    .pageHeader a {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------- */
/* - Media queries for image source (used on various pages) - */
/* ---------------------------------------------------------- */
@media(max-height: 390px) {
    .imageSource {
        font-size: 8px;
        bottom: 5px;
    }
}

/* ------------------------------- */
/* - Media queries for Home page - */
/* ------------------------------- */
@media(max-width: 300px) {
    #homeMain .divQuote {
        font-size: 10px;
    }
}

@media(max-height: 390px) {
    #homeMain #divQuote3 {
        top: 55%;
    }
}

/* -------------------------------------- */
/* - Media queries for Counselling page - */
/* -------------------------------------- */
/* Place divs below each other instead of next to each other below a certain screen width. 
   (When the max-width value is changed here, change the min-width value in the media queries below that target divs next to each other too.) */
@media(max-width: 759px) {
    #divCounsellingContentUpperLeft {
        float: unset;
        width: 100%;
    }
    #divCounsellingContentUpperRight {
        float: unset;
        width: 100%;
    }
    #divCounsellingContentLowerLeft {
        float: unset;
        width: 100%;
    }
    #divCounsellingContentLowerRight {
        float: unset;
        width: 100%;
    }
    #divCounsellingDescription {
        max-width: 88vw;
    }
    #divCounsellingSessionTypes {
        max-width: 88vw;
    }
    #divPriceAndAvailability {
        max-width: 88vw;
        margin-top: 20px;
    }
    #divCounsellingTherapyRoom {
        max-width: 88vw;
    }
    #outdoorCounselling {
        max-width: 88vw;
    }
    #divCounsellingTherapyRoom iframe {
        width: calc(88vw - 20px);
        height: calc((88vw - 20px) / 2);
    }
    #outdoorCounselling iframe {
        width: calc(88vw - 20px);
        height: calc((88vw - 20px) / 2);
    }
}

/* Change padding of table columns for weekdays when divs placed next to each other and resolution has a greater height than width.
   Otherwise the times in the Time column are broken down into several lines. */
@media (min-width: 760px) and (max-width: 1024px) {
    #divPriceAndAvailability thead th {
        padding-left: 1vw;
        padding-right: 1vw;
    }
}

/* Below a certain screen width the font size and padding in the availability table has to be reduced.
   Otherwise the times in the Time column are broken down into several lines. */
@media(max-width: 354px) {
    #divPriceAndAvailability thead th {
        padding-left: 2px;
        padding-right: 2px;
    }

    #divPriceAndAvailability th, #divPriceAndAvailability td {
        font-size: 4vw;
    }
}

/* In some resolution the height of the availability table is too small and needs to be increased. */
@media (min-width: 760px) and (max-width: 780px) {
    #divPriceAndAvailability table {
        height: 42vh;
    }
}
@media (min-width: 760px) and (max-height: 600px) {
    #divPriceAndAvailability table {
        height: 59vh;
    }
}

/* ----------------------------------------------------- */
/* - Media queries for Integrative Forest Therapy page - */
/* ----------------------------------------------------- */
@media (max-width: 370px) {
    #divNatureTherapyQuote {
        margin-top: 10px;
        padding: 5px;
    }

    #divNatureTherapyShortcuts {
        margin-top: 10px;
        display: flex;
        text-align: center;
    }
    
    #divNatureTherapyShortcuts a {
        font-size: 10px;
    }

    #divNatureTherapyUpcomingEvents h2 {
        font-size: small;
    }

    #divNatureTherapyWhy th, #divNatureTherapyWhy td {
        font-size: 12px;
    }

    #divNatureTherapyWhy ul {
        font-size: 12px;
        padding-left: 12px;
    }
}