:root {
  --moriroz: rgb(252, 194, 209);
  --moroz: rgb(253, 163, 188);
	--momoroz: rgb(240, 116, 152);
  --zielony: rgb(104, 163, 87);
  --niebieski: rgb(137, 215, 227);
  --bialy: rgb(251, 234, 239);

	--gradient: linear-gradient(359.27deg, #FE90B0 0.59%, #FFADC2 28.88%, #FFBDC9 59.03%, #FDE6D8 85.97%);
}


/* font-family: "BloggerSans"; */
/* font-family: "SetoFont"; */

/* @media screen and (899px < width < 1200px) {} */

/* @media screen and (width < 900px) {} */

body {
        background-color: #ffffff;
	margin: 0;
	overflow-x: hidden;
	/* contain: paint; */
	font-family: "Ubuntu";
}

main {
	display: flex;
	flex-direction: column;
}

.button {
	border-radius: 35px;
	background: #DA1A82;

	/* -webkit-text-stroke: 1px var(--momoroz); */
	color: #ffffff;
	font-size: 40px;
	font-weight: bolder;
	line-height: 44px;
	letter-spacing: 0em;
	text-align: center;
	padding: 20px 44px;
	text-decoration: none;
	text-transform: uppercase;

	position: relative;
}

*:disabled, *.disabled {
	filter: grayscale(100%) !important;
	cursor: not-allowed !important;
}

.button:hover:not(:disabled) {
	scale: 1.05;
	cursor: pointer;
}

.button:hover:disabled::after {
	position: absolute;
	top: 100%;
	left: 0%;
	display: block;
	/* content: attr("disabledInfo"); */
	/* content: attr("data-foo") " "; */
	/* content: "TESTING"; */
	content: var(--text);
}

.buttonFlower {
	position: relative;
	/* background: url("./assets/flower.png") no-repeat; */
	/* background-size: contain; */
	background: none;
	aspect-ratio: 1/1;
	border: none;
	width: 280px;
	height: 280px;

	-webkit-text-stroke: 1px var(--bialy);
	color: var(--momoroz);
	font-size: 42px;
	font-weight: 600;
	/* line-height: 44px; */
	/* line-height: 0; */
	letter-spacing: 0em;
	text-align: center;
	/* padding: 20px 40px; */
	text-transform: uppercase;
	cursor: pointer;
}

.buttonFlower span {
	position: absolute;
	transform: translateX(-50%);
}

.buttonFlower::after {
	background: url("../assets/flower.png") no-repeat;
	background-size: contain;
	content: " ";
  position: absolute;
  top: 0;
  left: 0;
	width: 280px;
	height: 280px;
  opacity: .4;
  z-index: -1;
	aspect-ratio: 1/1;
}

.buttonFlower:hover:not(:disabled)::after {
  opacity: .6;
}

/* .buttonFlower:disabled {
	filter: grayscale(100%);
} */

.buttonFlower:hover:not(:disabled) {
	scale: 1.05;
	cursor: pointer;
}

.stripeLeft, .stripeRight {
	background: #fff;
	font-size: 56px;
	text-transform: uppercase;
	width: 50%;
	color: var(--momoroz);
	padding-top: 15px;
	padding-bottom: 15px;
}

.stripeLeft {
	align-self: flex-start;
	text-align: end;
	padding-right: 40px;
}

.stripeRight {
	align-self: flex-end;
	padding-left: 40px;
}

.stripeLeft h2, .stripeRight h2 {
	margin: 0;
	text-align: unset;
	position: relative;
	z-index: 1;
}

h2 {
	color: #ffffff;
	
	font-size: 60px;
	width: 100%;
	text-align: center;
	font-weight: bold;
	/* text-shadow: 2px 2px var(--bialy), -2px -2px var(--bialy), -2px 2px var(--bialy), 2px -2px var(--bialy), 0px 2px var(--bialy), 2px 0px var(--bialy), -2px 0px var(--bialy), 0px -2px var(--bialy); */
}

@media screen and (width < 900px) {
	.stripeLeft, .stripeRight {
		font-size: 40px;
	}


	.button {
		font-size: 20px;
		padding: 5px 44px;
		font-weight: 600;
	}
}

.pageLoading {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--momoroz);
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pageLoading img {
	max-height: 400px;
	max-width: 400px;
	width: 100%;
	animation: flowerRotation 3.5s ease-in-out 0s infinite;
}

.pageLoading.hidding {
	transition: 1s;
	opacity: 0;
	pointer-events: none;
}

@keyframes flowerRotation {
	0% {
		rotate: 0deg;
	}
	100% {
		rotate: 360deg;
	}
}