/* fiscalog archive css-styles */

/*
    Z-INDEX
    (keep index levels free for later additions)

    body            => z-index 0
    logo/text logo  => z-index 10
    content/buttons => z-index 20
    message boxes   => z-index 30
*/


/* global colour scheme */

@import "css_constants.css";

/* ########|   ALL SCREENS   |######## */

/* Global html inherited to all elements */
html {
    width: 100vw;
    height: 100vh;
    font: -apple-system-body;
    font-size: 0.9vw;   /* important for mobile phone in landscape orientation (otherwise false rem font size) */
}

p {
    padding: 0;
    margin: 0 0 0.5vw 0; /* top right bottom left */
}

h4 {
	display:inline;
    color: var(--primary);
    font-family: 'Open Sans Semibold', sans serif;
    font-size: var(--h4-font-size);
	margin: 0;
    padding: 0 0 1vw 0; /* top right bottom left */
}

/* HYPERLINKS, LINKS and pseudo-text buttons */
a,
.text-link,
.text-link a {
    color: var(--link);
    text-decoration:var(--link-text-decoration);
}
a:hover,
.text-link:hover,
.text-link a:hover {
    cursor: pointer;
	color: var(--link-hover);
   	text-decoration:var(--link-text-decoration-hover);
}

.text-link-underlined,
.text-link-underlined a {
    color: var(--link);
    text-decoration:underline;
}
.text-link-underlined:hover,
.text-link-underlined a:hover {
    cursor: pointer;
    color: var(--link-hover);
    text-decoration:underline;
}

/* FISCALOG TEXT LOGO embedded HYPERLINK to fiscalog.com */
.fiscalog-hyperlink {
    cursor: pointer;
    color: var(--fiscalog-website-hyperlink-color);
    text-decoration: none;
    & :hover {
        color: var(--fiscalog-website-hyperlink-color-hover);
        text-decoration: none;
    }
}

/* ######################################## */
/* ########|                      |######## */
/* ########|   NORMAL PC SCREEN   |######## */
/* ########|                      |######## */
/* ######################################## */

@media only screen and (orientation: landscape) {
    
    body {
        display: block;
        font-family: 'Open Sans', sans serif;
        font-size: var(--root-font-size);
        font-weight: 400;
        color: var(--primary);
        background-color: var(--background-gradient-dark);
        background-image: linear-gradient(290deg, var(--background-gradient-dark) 0%, var(--background-gradient-bright) 100%);
        margin: 0;
        padding: 0;
        overflow: hidden;
        z-index: 0;
    }

    /* image logo animation */
    .image-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .image-container img {
        object-fit: cover;  /* crop logo to keep inside screen */
    }
    /* NO logo animation upon certain types of reloads */
    .fixed-image-logo {
        position:fixed;
        float: right;
        opacity: 1;
        z-index: 10;
        left: -4vw;
        top: -3.5vw;
        height: 16vw;
    }

    /* ANIMATION EFFECTS */

    .animated-image-logo {
        position:fixed;
        float: right;
        opacity: 1;
        z-index: 10;
        animation: 1.5s logo-move ease-in-out forwards;
	}
	@keyframes logo-move {
		from { left: 46vw; top: -9vh; height: 118vh }
		to { left: -4vw; top:-3.5vw; height: 16vw }
	}
    @-webkit-keyframes logo-move {
		from { left: 46vw; top: -9vh; height: 118vh }
		to { left: -4vw; top:-3.5vw; height: 16vw }
    }
    @-moz-keyframes logo-move {
		from { left: 46vw; top: -9vh; height: 118vh }
		to { left: -4vw; top:-3.5vw; height: 16vw }
    }
    @-ms-keyframes logo-move {
		from { left: 46vw; top: -9vh; height: 118vh }
		to { left: -4vw; top:-3.5vw; height: 16vw }
    }
    @-o-keyframes logo-move {
		from { left: 46vw; top: -9vh; height: 118vh }
		to { left: -4vw; top:-3.5vw; height: 16vw }
    }

    .fade-in-element {
        opacity:0;
        -webkit-animation: fade-in-anim 0.5s ease-in forwards;
        -moz-animation: fade-in-anim 0.5s ease-in forwards;
        -ms-animation: fade-in-anim 0.5s ease-in forwards;
        -o-animation: fade-in-anim 0.5s ease-in forwards;
        animation: fade-in-anim 0.5s ease-in forwards;
    }

    @-webkit-keyframes fade-in-anim {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    @-moz-keyframes fade-in-anim {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    @-ms-keyframes fade-in-anim {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    @-o-keyframes fade-in-anim {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    @keyframes fade-in-anim {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .delay1s {
        animation-delay: 1.4s;
        -o-animation-delay: 1.4s;
        -ms-animation-delay: 1.4s;
        -moz-animation-delay: 1.4s;
        -webkit-animation-delay: 1.4s;
    }

    .delay2s {
        animation-delay: 2s;
        -o-animation-delay: 2s;
        -ms-animation-delay: 2s;
        -moz-animation-delay: 2s;
        -webkit-animation-delay: 2s;
    }

    /* LANGUAGE DROP DOWN MENU */

    .language-selector {
        display:block;
        position: fixed;
        top: 5vh;
        right: 2vw;
        z-index: 20;
    }
    .language-selector-drop-down {
        background-color:rgba(0,0,0,0);
        color: var(--link);
        font-size: 1.2rem;
        font-weight: 300;
        cursor: pointer;
        border: none;
        width: 3vw;
        outline: none;
    }

    /* SCHRIFTLOGO "FISCALOG ARCHIVE" oben links */

    /* container */
    .text-logo {
        position: absolute;
        font-family: "Open Sans Light", sans serif;
        cursor:	default;
        padding-top: 1vw;
        padding-left: 14vw;
        font-weight: 200;
        & .logo-topline {
            font-size: 1.8vw;
        }
        & .logo-subline {
            color: var(--fiscalog-logo-subline-color);
            font-size: 1vw;
        }
    }

    /* FISCALOG TEXT LOGO embedded HYPERLINK to fiscalog.com (lower left) */

    .fiscalog-hyperlink {
        cursor: pointer;
        color: var(--fiscalog-website-hyperlink-color);
        text-decoration: none;
        &:hover {
            color: var(--fiscalog-website-hyperlink-color-hover);
        }
    }

    /* SCREEN CONTAINER */

    /********************** SCREEN-CONTAINER ******************/
    /* (logo/brand)       HEADLINE-CONTAINER                  */
    /**************** CONTENT-CONTAINER ***********************/
    /*   MENU    *  CONTENT-TITLE                             */
    /* CONTAINER **********************************************/
    /*           *  CONTENT                                   */
    /*           *                                            */
    /*           *                                            */
    /**********************************************************/
    /*    FOOTLINE-CONTAINER                                  */
    /**********************************************************/

    /* Container that contains topline, content [menu and content] and footer */
    .screen-container {
        position: fixed;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
/*
        align-items: stretch;
        float: left;
        
*/
        /* HEADLINE CONTAINER*/
        /* container that contains the entire topline - from logo in left upper corner to the very right */ 
        & .headline-container {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 8vw;
            min-height: 6vw;
            cursor:	default;
        } /* headline-container */

        & .menu-and-content-container {
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 90vw;
            flex: 1; /* make THIS container shrink or grow to fill entire screen height between header and footer, both with specified heights */
            overflow-y:hidden;

            /* container that contains page title */
            & .menu-container {
                display: flex;
                flex-direction: column;
                font-size: 0.9vw;
                margin: 0;
                width: 20vw;
                height: 100%;
                padding-top: 14vh;;
            } /* content-title */

            & .vertical-separator {
                display: flex;
                height: 100%;
                width: 1px;
                z-index: 40;
                background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2), rgba(0,0,0,0));
            }

            /* container that contains */
            & .content-container {
                margin: 0;
                padding: 0 0 0 1vw; /* oben, rechts, unten, links */
                display: flex;
                flex-direction: column;
                width: 80vw;
                height: 100%;
                z-index: 20;
                overflow-y:hidden;
                justify-content: flex-start;
                align-items: flex-start;
            
                /* container that contains page title */
                & .content-title {
                    display: flex;
                    margin: 0;
                    padding: 0 0 1vw 0; /* oben, rechts, unten, links */
                    height: 2vw;
                    width: 100%;
                    font-size: 1.1vw;
                    font-family: 'Open Sans SemiBold', sans serif;
                    font-weight: 400;
                    justify-content: space-between;
                    align-items: stretch;
                } /* content-title */

                & .content {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    width:100%;
                    height:100%;
                    overflow-y:auto;
                } /* content */

            }   /* content-container */            

        } /* menu-and-content-container */

        & .footer-container {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: nowrap;
            width: 100vw;
            overflow-y: hidden;
            height: 2vw;   /* #######
        }

    } /* screen-container END */

    /* IMPRESSUM link (lower right) */
    .impressum-button {
        display: flex;
        margin-right: 3vw;
        cursor: pointer;
        color: var(--primary);
        font-size: 1.3rem;
        z-index: 20;
        & :hover {
            color: var(--link-hover);
        }
    }

} /* @media PC screen */
    }}