/* =========================
   LAYOUT
========================= */

header 
{
    background: linear-gradient(                        
        /*Linearer Farbverlauf mit 0% - 50% - 100% hat man links und rechts helle Farbe und mittig dunkel*/
                                90deg,
                                #8b451383 0%,
                                #8b5a2b 50%,
                                #8b451383 100%
                                );

    color: #e0f0f0;         /*Text Farbe!*/
    text-align: center;

    
    position: fixed; 
    top: 0; 
    width: 100%;
    height: 80px;

    padding: px 20px; 
    border-radius: 0px 0px 10px 10px; /* nur unten etwas abrunden*/

    font-size: 14px;
    letter-spacing: 0.5px;
}


body 
{
    background-color: rgb(255, 255, 245);
    font-family: Arial, sans-serif;

    margin: 0;
    min-height: 100vh;

    background-image: url("../img/Image (3).jpg");
    background-size: cover;

    position: relative;
    overflow-x: hidden;
}

  
main 
{
    display: flex;                      /*festlegen auf eine Flexbox, ermöglicht flex befehle*/
    flex-direction: column;             /*legt die Richtung der Elemente fest; column für untereinander; row für nebeneinander*/
    align-items: center;                /*Ausrichtung quer zur Richtung*/
    justify-content: center;            /*Zentriert in der Hauptrichtung (hier also von oben nach unten)*/

    /*Heißt hier insgesamt: Nutze Flexbox, ordne alles untereinander an und zentriere es.*/

    padding-top: 90px;
    height: calc(100vh - 80px);                      /*100vh = view point -> Nutzt 100% der Browserhöhe Abzüglich 80px für den Header*/

    background-color: rgba(250, 250, 210, 0.4); /* 0.4 = 40% transparent */
    color: black;
    font-weight: 550;
}


footer 
{
    background: linear-gradient(                        /*Linearer Farbverlauf mit 0% - 50% und 100% hat man links und rechts helle Farbe und mittig dunkel*/
                            90deg,
                            #555 0%,
                            #222 50%,
                            #555 100%
                            );
                            
    color: lightcyan;
    text-align: center;

    
    padding: 20px;
    width: 100%;
    bottom: 0;


    font-size: 12px;
}

footer p 
{
    margin: 5px;
}


/* =========================
   COMPONENTS
========================= */


/* NAVIGATION / LINKS */
.main-nav               /* gesamter Nav-Container */
{
    margin-top: 10px; /* Abstand vom Header-Titel */
    background: linear-gradient(                        /*Linearer Farbverlauf mit 0% - 50% und 100% hat man links und rechts helle Farbe und mittig dunkel*/
                            90deg,
                            #888888 0%,
                            #555 50%,
                            #888 100%
                            );
    width: 100%;
    height: 25px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.main-nav ul            /* HTML-Element in der Navigation, quasi die Liste */
{
    list-style: none;   /* entfernt standardmäßige Punkte einer Liste */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* horizontal zentrieren */
}

.main-nav li            /* jedes Listen-Element bekommt horizontalen Abstand für gleichmäßige Verteilung */
{
    text-align: center;
    margin: 2px 15px;
    font-size: 15px;
}

.main-nav a             /* Gestaltung der Links selbst */
{
    text-decoration: underline;
    color: lightcyan;
    font-weight: bold;
    padding: 9px 12px;
    transition: background 0.2s, color 0.2s;        /* Animation des Hover Effekts */
}

.main-nav a:hover       /* styling des Mouse-over Effekts */
{
    background-color: #bbac6c;
    border-radius: 5px;
}

/*Text Feld*/
.textFeld 
{
    background-color: rgba(250, 250, 210, 0.8); /* 0.8 = 80% transparent */
    color: black;

    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);

    padding: 25px;
}

/* BOOB EFFECKT */

/* Container für Bild + Text */
.image-container 
{
    position: relative;
    display: inline-block;
}

/* Bild */
.boop-image 
{
    display: block;

    max-width: min(1000px, 90vw);
    max-height: 70vh;

    width: auto;
    height: auto;

    object-fit: contain;
}

/* BOOP Text */
.boop-text 
{
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) scale(0.5);

    opacity: 0;

    font-size: 24px;
    font-weight: bold;

    color: white;
    background: rgba(0, 0, 0, 0.6);

    padding: 10px 16px;
    border-radius: 12px;

    pointer-events: none;
}

/* Wenn sichtbar */
.boop-text.show 
{
    animation: boopPop 0.35s ease-out;
}

/* Pop Animation */
@keyframes boopPop 
{

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}