body {
}
h3 {
	font-weight: bold;
}
u {text-decoration:none;}

.logo {
	color: #fff;
}
header {
background: rgb(63,94,251);
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%); 
}


/* center the blockquote in the page */
.blockquote-wrapper {
   display: flex;
   padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
	position: relative;
	margin: 3em auto;
	align-self: center;
}

/* Blockquote header */
.blockquote h1 {
	position: relative; /* for pseudos */
	color: #198754;
	font-size: 1.4rem !important;
	font-weight: normal;
	line-height: 1;
	margin: 0;
	border: 2px solid #e74848;
	border: solid 2px;
	border-radius:20px;
	padding: 25px;
}

.blockquote h1 span {
	color: #333;
}

/* Blockquote right double quotes */
.blockquote h1:after {
	content:"";
	position: absolute;
	border: 2px solid #198754;
	border-radius: 0 50px 0 0;
	width: 60px;
	height: 60px;
	bottom: -60px;
	left: 50px;
	border-bottom: none;
	border-left: none;
	z-index: 3; 
}

.blockquote h1:before {
	content:"";
	position: absolute;
	width: 80px;
	border: 2px solid #fff;
	bottom: -3px;
	left: 50px;
	z-index: 2;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
	.blockquote h1 {
		font-size: 3rem;
		line-height: 1.2;
   }

}

/* Blockquote subheader */
.blockquote h4 {
	position: relative;
	color: #333;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	padding-top: 15px;
	z-index: 1;
	margin-left:150px;
	padding-left:12px;
	text-align:left !important;
}

 
.blockquote h4:first-letter {
  margin-left:0;
}

.tapered {
   background-size:  100% 45%;
   background-repeat: repeat-x;
   background-position: left 0% bottom 10%;
   transform: rotate(5deg);
  background-image: linear-gradient(179deg,rgb(250, 250, 0) 0%, rgb(255, 250, 0) 50%,transparent 54%, transparent 100%);
}

.btn-warning {
 background: rgb(255,192,53);
background: linear-gradient(180deg, rgba(255,192,53,1) 20%, rgba(255,170,33,1) 100%);
box-shadow: 2px 2px 3px;
text-shadow: 2px 2px 3px rgba(255,255,255,.7);
}
.btn-dark {
background: rgb(74,74,74);
background: linear-gradient(180deg, rgba(74,74,74,1) 20%, rgba(0,0,0,1) 100%); box-shadow: 2px 2px 3px;
text-shadow: 2px 2px 3px rgba(255,255,255,.7);
}

.pro, .show {
  list-style-type: none;
}

.pro li::before {
  content: "✅";
  margin-right: 8px;
}

.show li::before {
  content: "▶️";
  margin-left: -1.7em;
  margin-right: 8px;
}

.pro li, .show li {
	margin-bottom:1.4em;
}


/* Stil für das Modal */
.modal-dialog {
max-height: 90vh;
display: flex;
align-items: center; /* Zentriert das Modal vertikal */
margin: 0 auto;
}

.modal-content {
height: auto;
max-height: 90vh;
overflow: hidden; /* Verhindert das Scrollen innerhalb des Modals, wenn das Bild zu groß ist */
}

.modal-body {
overflow-y: auto; /* Ermöglicht das Scrollen innerhalb des modal-body, falls nötig */
}

/* Stil für das Bild */
#modalImage {
max-height: 75vh; /* Begrenzt die Höhe des Bildes, um innerhalb des Modals zu passen */
width: auto; /* Behält das Seitenverhältnis des Bildes bei */
max-width: 100%; /* Verhindert, dass das Bild breiter als der modal-body ist */
}

.highlight {
	z-index:5;
}