body {
    background-color: #990066;
    margin: 0;
    height: 100vh; /* Full viewport height */
    position: relative; /* Ensures the fixed element is positioned relative to the body */
	padding-top: 100px;
}

#hallo {
   font-size: 4rem;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   text-transform: italic;
   font-weight: bold;
   color: #ffffcc; /* Light gray color */
   transform: rotate(-10deg); /* Slight rotation */
   position: fixed; /* Keeps the text in a fixed position */
   top: 70%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(-10deg); /* Centers the text and rotates it */
   z-index: -2; /* Sends the text behind other elements */
   pointer-events: none; /* Ensures it doesn't interfere with any user interaction */
}

.container {
   background-color: white;
   padding: 1.5em;
   margin-bottom: 100px;
   position: relative;
   background-color: #f4f4f4;
   padding: 20px;
   overflow: visible;
   padding-bottom: 100px;
  /* z-index: 1; *//* Ensures the container is above #hallo */
}

/* Sicherstellen, dass das jQuery UI Autocomplete-Dropdown über der Navigation angezeigt wird */
.ui-autocomplete {
    z-index: 10000; /* Höherer Wert als die Navigation */
    position: absolute; /* Wichtige Regel für z-index */
}


.nix {
    position: relative; /* Makes sure all other elements are positioned above the background text */
    z-index: 0; /* Default z-index for all other elements */
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1em;
    border-top: 1px solid gray;
    background-color: white;
	z-index: 2;
}

label{
	margin-top: 10px;
}



blockquote {
    border-left: 4px solid gray;
    padding-left: 10px;	
}

.highlight, .selected-verse, .highlighted {
    background-color: lightblue;
    cursor: pointer;
}

mark, .mark{
	padding: 3px 0;
	background-color: lightyellow;
}

#generate-quote, #quoteButton, .btn-primary {
	background-color: darkgreen;
	margin-bottom: 10px;
}

.pray-icon::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 512%22 fill=%22%23990066%22%3E%3Cpath d=%22M351.2 4.8c3.2-2 6.6-3.3 10-4.1c4.7-1 9.6-.9 14.1 .1c7.7 1.8 14.8 6.5 19.4 13.6L514.6 194.2c8.8 13.1 13.4 28.6 13.4 44.4l0 73.5c0 6.9 4.4 13 10.9 15.2l79.2 26.4C631.2 358 640 370.2 640 384l0 96c0 9.9-4.6 19.3-12.5 25.4s-18.1 8.1-27.7 5.5L431 465.9c-56-14.9-95-65.7-95-123.7L336 224c0-17.7 14.3-32 32-32s32 14.3 32 32l0 80c0 8.8 7.2 16 16 16s16-7.2 16-16l0-84.9c0-7-1.8-13.8-5.3-19.8L340.3 48.1c-1.7-3-2.9-6.1-3.6-9.3c-1-4.7-1-9.6 .1-14.1c1.9-8 6.8-15.2 14.3-19.9zm-62.4 0c7.5 4.6 12.4 11.9 14.3 19.9c1.1 4.6 1.2 9.4 .1 14.1c-.7 3.2-1.9 6.3-3.6 9.3L213.3 199.3c-3.5 6-5.3 12.9-5.3 19.8l0 84.9c0 8.8 7.2 16 16 16s16-7.2 16-16l0-80c0-17.7 14.3-32 32-32s32 14.3 32 32l0 118.2c0 58-39 108.7-95 123.7l-168.7 45c-9.6 2.6-19.9 .5-27.7-5.5S0 490 0 480l0-96c0-13.8 8.8-26 21.9-30.4l79.2-26.4c6.5-2.2 10.9-8.3 10.9-15.2l0-73.5c0-15.8 4.7-31.2 13.4-44.4L245.2 14.5c4.6-7.1 11.7-11.8 19.4-13.6c4.6-1.1 9.4-1.2 14.1-.1c3.5 .8 6.9 2.1 10 4.1z%22/%3E%3C/svg%3E');

    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 8px;
}

       .blinking-text {
            color: #990066;
            animation: blink 2s ease-in-out infinite; /* Smooth blinking effect */
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.2; } /* Reduced opacity for a subtle blink */
            100% { opacity: 1; }
        }

.subnavi{
	text-align: center;
	border-top: 1px solid lightgray;
	margin-top: 1em;padding-top: 5px;

}

.verse-result {
    cursor: pointer;
	margin-bottom: 5px;
	font-size: .9em;
}

.left-column {
    border-right: 1px solid #ddd;
}

#notification, #hintMessage {
    display: none;
    color: green;
    font-weight: bold;
    margin-top: 10px;
}

.counter{
	border: 1px solid lightgray;
	padding: 10px;
	margin-bottom: 20px;
	font-weight: bold;
}

.search-result-testament{
	border-bottom: 1px solid lightgray;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

textarea.form-control{
	border: 2px solid darkgreen;
	background-color: #e0f5b4;
	cursor: copy;
	margin-bottom: 20px;
}

.fixed-header .navi a {
    text-decoration: none;
    font-weight: bold;
}

.copyHTML,
.copyText{
	background-color: darkblue;
	color: white;
	margin-right: 10px; margin-bottom: 20px;
}

button.copyHTML:hover,
button.copyText:hover{
	background-color: darkgreen;
	color: white;
}


#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
	padding-top: 15px;
    text-align: center;
    font-size: 0.7em;
    border-top: 1px solid gray;
    background-color: #ddd;
}

#footer a, a{
	color: #990066;
}

/* Allgemeine Stile für die Navigation */
nav {
    background-color: #333;
    padding: 10px;
    position: relative; /* Wichtig, um sicherzustellen, dass das Dropdown relativ zum übergeordneten Element angezeigt wird */
    z-index: 0; /* Hoher z-index, um das Menü über anderen Elementen zu platzieren */
	margin-top: 10px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;

}

.nav-list li {
    margin: 0 15px;
}

.nav-list li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

/* Menü-Toggle (wird nur auf mobilen Geräten angezeigt) */
.menu-toggle {
    display: none;
    background-color: #333;
    color: white;
    padding: 10px;
    cursor: pointer;
    text-align: center;
}

     

/* Media Query für Handy-Displays */
@media only screen and (max-width: 768px) {
    .nav-list {
        display: none; /* Verstecke die Navigation standardmäßig */
        flex-direction: column;
        position: absolute; /* Absolut positioniert, damit das Menü über anderen Inhalten angezeigt wird */
        top: 50px; /* Position unter dem Menü-Toggle */
        left: 0;
        width: 100%;
        background-color: #333;
        z-index: 1000; /* Hoher z-index für das Dropdown */
    }

    .nav-list li {
        text-align: center;
        margin: 10px 0;
    }

    .menu-toggle {
        display: block; /* Zeige den Menü-Toggle-Button an */
        z-index: 1001; /* Der Toggle-Button soll über der Navigation bleiben */
    }

    /* Zeige die Navigation an, wenn sie aktiv ist */
    .nav-list.active {
        display: flex;
    }
	.fixed-header nav{
		display:none;
	}
}


  /* Style for the popup background overlay */
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
            justify-content: center;
            align-items: center;
        }

        /* Style for the popup window */
        .popup-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            width: 380px;
            text-align: center;
			position: relative;
			z-index: 2;	
        }

        /* Style for the close button */
        .close-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #990066;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
        }

        /* Style for the link */
        a.open-popup {
            color: #990066;
			font-weight:bold;
            text-decoration: none;
            cursor: pointer;
        }
		
		   /* Style for the SVG icon as the open button */
        .open-popup {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            color: #007BFF;
        }

        .open-popup svg {
			
            width: 16px; /* Adjust the size of the SVG */
            height: 16px;
            fill: #990066; /* Fill color for the SVG */
			top: 3px;
		}
@media only screen and (max-width: 768px) {
	body{
		padding-top: 40px;
	}
	.navi{
		display:block;
	}
		.subline{
		display:none;
	}
	#hallo {
		font-size: 3rem;
	}
	#generate-quote, #quoteButton, .btn-primary {
	display:block;
	width: 100%;
	}
	 nav {
        position: fixed;
        bottom: 60px;
        left: 0;
        width: 100%;
        z-index: 10000; /* Hoch genug, damit es über anderen Inhalten bleibt */
        background-color: #333; /* Hintergrundfarbe der Navigation */
    }

    .nav-list {
        display: flex;
        justify-content: space-around;
        flex-direction: row; /* Die Links horizontal anordnen */
		top: 0;
    }

    .nav-list li {
        margin: 10px 0;
    }

    /* Verstecke den Menü-Toggle auf Mobilgeräten, da das Menü unten fixiert ist */
    .menu-toggle {
        display: none;
    }

    .fixed-header nav {
        display: block;
    }

}

@media only screen and (max-width: 534px) {
	.nav-list li a{
		font-size: .7em;
	}
	nav{
		bottom: 80px;
	}
	
	
}