/* 
font-family: 'Bubblegum Sans', cursive;
font-family: 'Merriweather', serif;
font-family: 'Oswald', sans-serif;
*/
/*
* {
    border: solid 1px lightgrey;
}
*/
html {
    font-family: 'Oswald', sans-serif;
    /* font-family: 'Merriweather', serif; */
    background-color: lightgoldenrodyellow;
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}
.verhaal {
    font-style: italic;
    color: rgb(68, 68, 68);
    padding-left: 1em;
    padding-right: 2em;
}
/* css for a device in portrait mode */
@media screen and (orientation:portrait) {
    .container {
        width: 80%;
        margin: auto;
    }
    .logo {
        /* position: relative; */
        display: block;
        width: 80%;
        height: auto;
        margin: auto;
        margin-top: 4em;
    }
    .smallLogo {
        display: block;
        width: 40%;
        height: auto;
        margin: 5% auto;
    }
    .btnCoaching {
        font-size: 1.5em;
        width: fit-content;
        margin: 5em 2em 2em;
    }
    .comingSoon {
        font-size: .9em;
        width: fit-content;
        float: right;
        margin: 2em 5em 5em;
        /* margin-right: 5em; */
    }
    h4 {
        margin: 0;
        font-weight: bold;
        font-size: 1.5em;
    }
    h5 {
        margin: 0;
        font-size: .75;
    }
    p {
        margin: 0 0 .5em;
        font-size: .65em;
    }
    ul {
        list-style: none;
        text-align: center;
        margin: 0;
    }
    li {
        display: inline;
        margin: 0 2em 0 0;
    }

    /* picture galleries */
    .gallery {
        width: 100%;
        height: 20em;
        overflow: hidden;
        margin: 2em 0 1em;
        /* height: 6em; */
    }
    .gallery img {
        display: inline-block;
        width: 100%;
        position: relative;
        bottom: 15%;
        /* max-height: auto;
        max-width: 100%; */
        margin: 0 auto;
    }
    #pic1, #pic2, #pic3, #pic5, #pic6 {
        display: none;
    }
    .picture{
        width: 90%;
        max-height: 25em;
        overflow: hidden;
        margin: 3em auto;
    }
    .picture img {
        position: relative;
        bottom: 12em;
    }
    .galleryHoe {
        width: 100%;
        margin: 2em 0;
        /* height: 10em; */
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }
    .galleryHoe img {
        width: 49%;
        height: auto;
    }

    .pageNav {
        margin-top: 2.5em;
        margin-bottom: .25em;
        font-size: .75em;
    }
    .pageNav a {
        /* text-decoration: underline; */
        color: lightgoldenrodyellow;
        background-color: black;
        text-decoration: none;
        padding: 0 0.35em; 
    }
    .footer {
        /* position: relative; */
        /* bottom: 1em;
        left: 0; right: 0; */
        width: 90%;
        /* bottom: 0;
        left: 5em; right: 5em; */
        margin: 2em auto;
        font-size: .75em;
    }
    a {
        text-decoration: none;
        color: inherit;
    }
    .socialMedia ul {
        border-bottom: solid 5px black;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .email {
        text-align: right;
        border-bottom: solid 5px black;
    }
    .toggleDisplay {
        display: none;
    }
}
/* css for a device in landscape mode */
@media screen and (orientation:landscape) {
    .container {
        /* !!! absolute centering a div horizontally and vertically !!! */
        /* Must manually set width/height */
        width: 80%;  
        height: 75%;

        /* Prevent div from overflowing main window */
        max-width:100%;
        /* max-height:75%; */
        overflow: auto;
    
        /* Hide scrollbar for IE, Edge and Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */

        /* The magic centering code */
        margin: auto;
        /* position: absolute; */
        /* top: 0; bottom: 0; Aligns Vertically - Remove for Horizontal Only */
        left: 0; right: 0; /* Aligns Horizontally - Remove for Vertical Only  */
    }
    .logo {
        /* position: relative; */
        display: block;
        width: 20%;
        height: auto;
        margin: auto;
        margin-top: 1em;
    }
    .smallLogo {
        display: block;
        width: 50%;
        height: auto;
        margin: 2% auto;
    }
    .title {
        font-family: 'Bubblegum Sans', cursive;
        font-size: 4em;
        margin: 0;
        text-align: center;
    }
    .btnCoaching {
        font-size: 1.25em;
        width: fit-content;
        margin-top: 2em;
        margin-left: 5em;
    }
    .btnCoaching:hover {
        transform: scale(1.1);
    }
    .comingSoon {
        font-size: .9em;
        width: fit-content;
        float: right;
        margin: 2em 5em;
        /* margin-right: 5em; */
    }
    .comingSoon:hover {
        transform: scale(1.1);
    }
    h4 {
        margin: 0;
        font-weight: bold;
        font-size: 1em;
    }
    h5 {
        margin: 0;
        font-size: .75;
    }
    p {
        margin: 0 0 .5em;
        font-size: .65em;
    }
    ul {
        list-style: none;
        text-align: center;
        margin: 0;
    }
    li {
        display: inline;
        margin: 0 2em 0 0;
    }
    .pageNav {
        margin-top: 1em;
        margin-bottom: .25em;
        font-size: .75em;
    }
    .picture{
        float: right;
        width: 60%;
        max-height: 25em;
        overflow: hidden;
        margin: 1em;
    }
    .picture img {
        position: relative;
        bottom: 12em;
    }
    .gallery {
        width: 100%;
        margin: 3em 0 1em;
        height: 6em;
        display: flex;
        justify-content: space-evenly;
        overflow: hidden;
    }
    .galleryHoe {
        width: 100%;
        margin: 1em 0;
        /* height: 10em; */
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }
    .gallery img {
        display: inline-block;
        max-height: 100%;
        max-width: auto;
        margin: 0 auto;
    }
    .galleryHoe img {
        width: 49%;
        height: auto;
    }
    .pageNav a {
        /* text-decoration: underline; */
        color: lightgoldenrodyellow;
        background-color: black;
        text-decoration: none;
        padding: 0 0.35em; 
    }
    .pageNav a:hover {
        background-color: darkgrey;
        color: black;
    }
    .footer {
        /* position: relative; */
        /* bottom: 1em;
        left: 0; right: 0; */
        width: 90%;
        /* bottom: 0;
        left: 5em; right: 5em; */
        margin: 2em auto;
        font-size: .75em;
    }
    a {
        text-decoration: none;
        color: inherit;
    }
    .socialMedia ul {
        border-bottom: solid 5px black;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    .email {
        text-align: right;
        border-bottom: solid 5px black;
    }
    .toggleDisplay {
        display: none;
    }
}