/* Tailwind base - put variables under: tailwind.config.js */
@import "node_modules/tailwindcss/base";
/* Tailwind component classes registered by plugins*/
@import "node_modules/tailwindcss/components";
/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";

/*----------- Don't forget to rerun hugo after changing this file! As this triggers node to regenerate main.css  */
/*
#
# Buttons
#
*/

/* Blinkender Bestellen Button */

blink {
  animation: blinker 2s linear infinite;
  color: #1c87c9;
 }
@keyframes blinker {
  50% { opacity: 0; }
}

.button-primary {
  background-color: green;
  text-shadow: 2px 2px 5px yellow;
  box-shadow: 10px 10px 15px lightgreen;
  border-radius: 20px;
}

/*Grüne Bullet Points*/

.prose ul > li::before {
	content: "";
	position: absolute;
	background-color: lightgreen;
	border-radius: 50%;
	width: 0.375em;
	height: 0.375em;
	top: calc(0.875em - 0.1875em);
	left: 0.25em;
}

.screenshot img {
        max-width: 2400px;
				max-height: 700px;
        /* Screenshots slider won't work fine without disabling image selection and dragging */
        user-select: none;
        pointer-events: none;
}



/**
 * (optional) define here the style definitions which should be applied on the slider container
 * e.g. width including further controls like arrows etc.
 */
.slider {
	position: relative;
	direction: ltr;
}

.frame {
		/**
		 * (optional) wrapper width, specifies width of the slider frame.
		 */
		position: relative;
		font-size: 0;
		line-height: 0;
		overflow: hidden;
		white-space: nowrap;
		margin: 0 30px;
}

.slides {
	position: relative;

	display: inline-block;
	vertical-align: middle;
	margin: 10px;

}

.slides li {
		position: relative;
		display: inline-block;
}

.screenshot {
	 position: relative;
	 display: inline-block;
	 vertical-align: middle;
	 margin: 10px;
}


.prev, .next {
		position: absolute;
		top: 50%;
		margin-top: -25px;
		display: block;
		cursor: pointer;
}

.next {
		right: 0;
}

.prev {
		left: 0;
}

.next svg, .prev svg {
		width: 25px;
}



/*
.button-primary:hover {
  background-color: rgb(236, 113, 18);
}

.button-secondary {
  color: rgba(255, 255, 255, 0.95);
  background-color: rgb(100, 100, 100);
}

.button-secondary:hover {
  background-color: rgb(90, 90, 90);
}
*/

/*
#
# Top border color of form inputs
#
*/

/*
.border-t {
  border-color: rgb(239, 130, 44);
}
*/

/*
#
# Header Background & Text
#
*/

/*
#header-inner-wrapper {
  background-color: rgba(26, 38, 191, 0.9);
}

#brand-headline {
  color: rgb(239, 130, 44);
}

#tagline-paragraph {
  color: rgba(255, 255, 255, 0.95);
}
*/

/*
#
# Content below the header
#
*/

/*
.prose h1 {
  color: rgb(239, 130, 44);
}

.prose p {
  color: white;
}
*/
