/*general styles*/
@font-face
{
    font-family: 'mainFont';
    src: local('Gabriola');
    font-weight: bold;
    font-size-adjust: 110%;
    size-adjust: 110%;
}
@font-face
{
    font-family: 'secFont';
    src: local('Times new Roman');
    
}
@font-face
{
    font-family: 'tertFont';
    src: local('Arial');
}
*
{
    padding: 0;
    margin: 0;
}
body
{
    font-size: calc(12px + 1.8vh);
}
h2, h1
{
    font-size: 1.2em;
    margin-bottom: 3%;
}
h3
{
    font-size: 1.1em;
    margin-bottom: 2%;
}
a
{
    cursor: pointer;
    text-decoration: none;
}
ol
{
	list-style: none;
}
body .hidden
{
	display: none !important;
}

/*scrollbar for edge*/
div::-webkit-scrollbar
{
    width: 6px;
}
div::-webkit-scrollbar-track
 {
    -webkit-box-shadow: inset 0 0 5px white;
}
div::-webkit-scrollbar-thumb
{
  background-color: rgba(0,150,0,0.5);
  outline: none;
}
/*scrollbar for all other*/
div
{
    scrollbar-color: rgba(0,150,0,0.5) white;
    scrollbar-width: thin;
}

/*special styles, ordered from outer to inner div*/
body
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    position: absolute;
    font-family:'mainFont', 'secFont', 'tertFont';
    overflow: hidden;
}

#header
{
    height: 100vh;
    width: 11vw;
    min-width: 100px;
    position: sticky;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: rgb(0,150,0);
    opacity: 0.7;
    z-index: 2;
    background: linear-gradient(to left, rgb(0,150,0) 90%, white);
}
#header a
{
    position: relative;
    flex-grow: 1;
    font-size: calc(10px + 0.3vh);
    word-wrap: break-word;
    font-family: 'Lucida Handwriting';
    color: white;
    text-align: center;
    border-bottom: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header .logo
{
    width: 90%;
    height: auto;
    position: relative;
    margin-left: 10%;
}

#content
{
    height: 100%;
    width: 89vw;
    overflow-y: auto;
	overflow-x: hidden;
}
#content li
{
	margin: 10px 0 10px 0;
}
#content .panel
{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    align-items: center;
	padding:10px 5px 30px 5px; 
    overflow: hidden;
}

#content #hello
{
    min-height: 60vh;
    background: linear-gradient(to right, rgba(222, 200, 161, 0.5) 90%, white);
}
#content #uebermich
{
	background: linear-gradient(to right, rgba(222, 200, 161, 0.5) 90%, white);
}
#content #ayuveda
{
	background: linear-gradient(to right, rgba(168, 76, 1, 0.5) 90%, white);
}
#content #anwendungen
{
	background: linear-gradient(to right, rgba(248, 207, 127, 0.5) 90%, white);
}
#content #impressum 
{
	background: linear-gradient(to right, rgba(133, 79, 41, 0.5) 90%, white);
}
.panel img
{
    width: 30%;
    height: auto;
    max-height: 100%;
    flex-shrink: 0;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #aaa;
}
.textslider
{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.textslider div.arrow 
{
    width: 5%;
    margin: 2%;
    cursor: pointer;
}
div.arrow svg
{
    width: 100%;
}
.textbox
{
    overflow: hidden;
    padding: 5px;
}
.textbox > h2
{
	margin-left: 10%;
    margin-bottom: 1vh;
    display: inline-block;
}
.text
{
    display: inline;
    margin: 1vw;
    width: 80%;
    max-height: 75vh;
	min-height: 30vh;
    overflow-y: auto;
}

/*move layout in vertical order in portrait mode */
@media (orientation: portrait)
{
	/* in portrait vw is more important than vh */
    body
    {
        flex-direction: column-reverse;
        font-size: calc(12px + 1.4vw);
    }

    #header
    {
        width: 100%;
        height: 10vh;
        flex-direction: row;
        background: linear-gradient(to bottom, rgb(0,150,0) 90%, white);
    }
    #header .logo
    {
        max-height: 80%;
        margin-left: 1%;
    }
    #header a
    {
        position: relative;
        border-right: 2px solid white;
        border-bottom: none;
        height: 100%;
        width: 25%;
        font-size: calc(10px + 0.2vw);
    }

    #content
    {
        width: 100%;
    }
    #content .panel
    {
        flex-direction: column-reverse;
		justify-content: flex-end;
    }
    #content .panel img
    {
        width: auto;
        max-height: 35vh;
        flex-shrink: 1;
    }
    #content .textbox
    {
        margin-bottom: 1vh;
        max-height: 50vh;
    }
	.text
	{
		height: 44vh;
	}

	#content #hello
	{
		background: linear-gradient(to bottom, white, rgba(222, 200, 161, 0.5) 60%);
	}
    #content #hello .textbox, #content #hello .text
    {
        max-height: unset;
        height: auto;
    }
	#content #uebermich
	{
		background: linear-gradient(to bottom, rgba(222, 200, 161, 0.5) 90%, rgba(168, 76, 1, 0.5));
	}
	#content #ayuveda
	{
		background: linear-gradient(to bottom, rgba(168, 76, 1, 0.5) 90%, rgba(248, 207, 127, 0.5));
	}
	#content #anwendungen
	{
		background: linear-gradient(to bottom, rgba(248, 207, 127, 0.5) 90%, rgba(133, 79, 41, 0.5));
	}
	#content #impressum 
	{
		background: linear-gradient(to bottom, rgba(133, 79, 41, 0.5) 90%, white);
	}
}