/*!
This is the main CSS file for the front page of the website.
*/

/* main Layout and scrolling behavior snapping to
	 ========================================================================== */

/* layout and behavior */

body {
    margin: 0;
    padding: 0;
}

main {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

main > section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

main > section:nth-child(odd) {
}

main > section#section-1top {

    height: 50vh
}

main > section#section-1bottom {

    height: 50vh;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}


.sticky-header {
    position: sticky;
    top: 0;
    height: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* main Logo with animation
	 ========================================================================== */

.homepage-logo-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 90%;
    top: 50%;
    left: 0;
    align-content: center;
    pointer-events: none;

    z-index: 1000;
}     

.homepage-logo {
    align-self: center;
    justify-self: center;
}


/* name banner with links and animation
========================================================================== */

.main-banner {
    font-size: 1rem;
    padding-block: 0.4rem;
    background-color: yellow;
    box-shadow: 0 0 1.2px #9ca26f;
    display: -webkit-flex; 
    display: flex;

    overflow: hidden;
    gap: 0;
    min-width: 100%;
}

.main-banner ul {
    list-style: none;
    flex-shrink: 0;
    min-width: 100%;
    display: flex;
    display: -webkit-flex; 
    justify-content: space-around; 
    gap: 2rem;
    align-items: center;
    -webkit-align-items: center; 
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;

    animation: banner-animation 20s linear infinite;
}

.main-banner:hover ul {
    animation-play-state: paused;
}

.main-banner ul li.person-name a {
    text-decoration: none; 
    color: inherit; 
    font-weight: inherit; 
}

.main-banner ul li.person-name:hover {
    text-shadow: 0 0 0.8px #000;
}

@keyframes banner-animation {
    to {
        transform: translateX(-100%);
    }
}

/* up arrow scroll hint and animation
========================================================================== */

main > section#section-1bottom {
}

.front-page-arrow {
    display: flex;

    height: 50%;
    width: 20%;

    align-items: end;
    justify-content: center;

    font-size: clamp(2rem, 3.5vh, 5rem);

    animation: bounce-animation 3s infinite;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;

}

.front-page-arrow:hover {
    color: yellow;
    text-shadow: 0 0 1.2px #000;
    font-weight: bold;
    font-style: normal;
    transition: background-color 0.3s ease, color 0.3s ease;
}

@keyframes bounce-animation {
    0%, 30% {transform: translateY(0);}
    15% {transform: translateY(-20%);}
}


/* info und Kontakt
========================================================================== */


main > section#section-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.info-title {
    margin: 0;
    padding: 0;

    font-size: 3rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

.info-text {
    margin: 2rem;
    padding: 0;

    font-size: 1rem;
    text-align: center;
}

.contact-button {
    text-decoration: none !important; 
    color: black !important; 
    font-weight: bold !important; 

    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    background-color: rgb(208, 208, 208);
}

.contact-button:hover {
    background-color: yellow;
    color: white ;
    font-style: normal;
    transition: background-color 0.3s ease, color 0.3s ease;
}