/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'ComicNeueSansID';
    src: url('fonts/ComicNeueSansID.woff2') format('woff2'),
        url('fonts/ComicNeueSansID.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'ADELIA';
    src: url('fonts/ADELIA.woff2') format('woff2'),
        url('fonts/ADELIA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Porkys';
    src: url('fonts/Porkys.woff2') format('woff2'),
        url('fonts/Porkys.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
}


body {
  background-image: url('/img/background.gif');
  color: black;
  font-family: "ComicNeueSansID", "Comic Sans MS", "Comic Sans", cursive;
}

.section-jenny {
	width: 100vw;
	height: 60vh;
	display: grid;
	place-items: center;
	padding: 4rem;
}

@media screen and (min-width: 640px) {
	.section-jenny {
		width: 100vw;
		height: 102vh;
		display: grid;
		place-items: center;
		padding: 2rem;
	}
}

.section-live {
	margin: 0 auto;
	max-width: 1200px;
}

.section-live-grid {
	display: grid;
	place-items: center;
	grid-template-columns: 1fr 1fr;
	margin: 0 2rem;
}

.section-portrait {
	width: 100vw;
	height: 150vh;
	display: grid;
	place-items: center;
	padding: 4rem;
}

@media screen and (min-width: 640px) {
	.section-portrait {
		height: 200vh;
	}
}

.herz-1 {
	grid-row: 1;
	grid-column: 1;
	rotate: -6deg;
}

.herz-2 {
	grid-row: 2;
	grid-column: 2;
	scale: 0.8;
	rotate: 9deg;
}

.herz-3 {
	grid-row: 3;
	grid-column: 1;
	scale: 0.7;
	rotate: -10deg;
}

.herz-4 {
	grid-row: 4;
	grid-column: 2;
	scale: 0.9;
	rotate: 5deg;
}

.layout-wrapper {
	display: grid;
	justify-content: center;
	width: 100%;
}

.start {
	/* display: grid; */
	/* place-items: center; */
	width: 100vw;
	height: 100vh;
}

.hidden {
  visibility: hidden;
  font-size: 0px;
}

.glitterjenny-box {
	max-width: 800px;
	width: 100%;
	position: relative;
}

.embossjenny {
	width: 100%;
	aspect-ratio: 295/160;
	position: absolute;
	background-image: url('/img/jenny-diamant.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 10;
	mix-blend-mode: plus-lighter;
	opacity: 1;
}

.glitterjenny {
  background-image: url('/img/fastsparkle.gif'), url('/img/sparkle1.gif'), url('/img/glitterbg2.jpg');
  background-size: 30% 30%, 60% 60%, 100% 100%;
	background-repeat: repeat;
  mask-image: url('/img/jenny.svg');
	width: 100%;
	aspect-ratio: 295/160;
	position: relative;
	overflow: hidden;
	z-index: 9;
}

@keyframes glitteranimation {
  from {mask-position: -100% 80%;}
  to {mask-position: 100% 50%;}
}

@keyframes glitterrotation {
	from {rotate: 0deg;}
	to {rotate: 360deg;}
}

.glitter {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	animation: glitterrotation 0.5s steps(4) infinite;
	z-index: 9;
	position: relative;
}

.glitter-bg {
	z-index: 9;
	position: relative;
	background-image: url('/img/glitterbg3.png');
	background-size: 50%;
	opacity: 0.5;
	width: 100%;
	height: 100%;
}

.jenny-shadow {
	width: 100%;
	aspect-ratio: 295/160;
	position: absolute;
	top: 5%;
	left: 5%;
	background-image: url('/img/jenny.svg');
	z-index: 7;
	filter: blur(10px);
	opacity: 0.2
}

.jenny-glow {
	width: 100%;
	aspect-ratio: 295/160;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('/img/jenny-purple.svg');
	z-index: 6;
	filter: blur(15px);
	opacity: 0.7;
}



.sparkle3 {
	position: absolute;
	left: 10%;
	top: 2%;
}

.sparkle4 {
	position: absolute;
	right: 15%;
	bottom: 7%;
}

.sparkle5 {
	position: absolute;
	right: 0;
	top: 15%;
}

.sparkle6 {
	position: absolute;
	left: 60%;
	top: 30%;
}

.sparkle7 {
	position: absolute;
	left: 3%;
	bottom: 5%;
}

.sparkle8 {
	position: absolute;
	right: 0;
	bottom: 50%;
}

.herz {
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	place-items: center;
	margin: -10% 0;
}

.herz:nth-child(1) {
		margin: 0 0 -10% 0;
}

.herz > * {
	grid-area: 1/1;
}

.herz-maske {
	mask-image: url('/img/herz.svg');
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	position: relative;
}

.herz-layover {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: rgb(255, 144, 214);
	opacity: 0.3;
	mix-blend-mode: lighten;
}

.herz-maske iframe {
	aspect-ratio: 315/560;
	width: 100%;
	height: auto;
	position: absolute;
	top: -46%;
	z-index: -1;
}

.herz-glow {
	aspect-ratio: 1/1;
	background-image: url('/img/herz-pink.svg');
	filter: blur(5px);
	width: 100%;
	height: auto;
	z-index: -1;
	opacity: 0.7;
}

.herz:hover .herz-glow {
	animation: heartbeat 0.4s infinite alternate;
}

@keyframes heartbeat {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}


.jennypic {
	 border-image-slice: 36 36 36 36;
		border-image-width: 42px 42px 42px 42px;
		border-image-outset: 36px 36px 36px 36px;
		border-image-repeat: round round;
		border-image-source: url("/img/border.gif");
		border-style: solid; 
		max-width: 500px;
		width: 100%;
}

.herz-font {
	z-index: 10;
	align-self: self-end;
}

.liebegruesse-font {
	rotate: -10deg;
	width: 80%;
	justify-self: center;
	margin-top: 20%;
	margin-left: 5%;
}





/*
ooooo      ooo                                     oooo                .       .                      
`888b.     `8'                                     `888              .o8     .o8                      
 8 `88b.    8   .ooooo.  oooo oooo    ooo  .oooo.o  888   .ooooo.  .o888oo .o888oo  .ooooo.  oooo d8b 
 8   `88b.  8  d88' `88b  `88. `88.  .8'  d88(  "8  888  d88' `88b   888     888   d88' `88b `888""8P 
 8     `88b.8  888ooo888   `88..]88..8'   `"Y88b.   888  888ooo888   888     888   888ooo888  888     
 8       `888  888    .o    `888'`888'    o.  )88b  888  888    .o   888 .   888 . 888    .o  888     
o8o        `8  `Y8bod8P'     `8'  `8'     8""888P' o888o `Y8bod8P'   "888"   "888" `Y8bod8P' d888b    
*/             

.section-newsletter {
	padding: 2rem;
	margin-top: 10rem;
}

@media screen and (min-width: 640px) {
	.section-newsletter {
	margin-top: 20rem;
	}
}
                                                                                                      
                                                                                                    
.inf-main_74d1e312f2320de5a6c94d0bece3923e { 
	width: 100%;
	max-width: 800px;
	margin:0 auto; 
	border-image-slice: 17 21 16 22;
	border-image-width: 20px 20px 20px 20px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: stretch stretch;
	border-image-source: url("/img/frame2.gif");
	border-style: solid;
	background-color: rgb(255, 184, 240);
	font-size: 1.5rem;
	padding: 4rem;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-content { 
	margin-top:13px;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e h4, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e span, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e label, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e input, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-submit, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-success p a { 
	color:#555555;
	font-size: 1.5rem;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e h4 { 
	/* font-size:18px;  */
	margin:0px 0px 13px 0px; 
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e h4, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e label { 
	font-weight:bold; 
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-input { 
	margin-bottom:7px; 
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e label { 
	display:block;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e input { 
	color:#999999; 
	border: 1px solid #E9E9E9; 
	border:none; 
	padding: 1rem; 
	font-size: 1.5rem;
	margin: 0 auto;
	border-radius: 1rem;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-input.inf-error label, 
.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-input.inf-error span.inf-message { 
	color: #cc0033; 
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-input.inf-error input { 
	border: 1px solid #cc0033; 
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-input input { 
		width: 100%;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-input.inf-error span.inf-message { 
	display: block; 
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-submit { 
	text-align: center;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-submit input { 
	background-color:#FFFFD3; 
	color:#709B68; 
	border:3px solid #709B68; 
	font-weight: normal; 
	font-style: italic;
	font-family: "ComicNeueSansID", "Comic Sans MS", "Comic Sans", cursive;
	height:auto; 
	padding: 4.5rem 1rem 1rem 1rem; 
	background-image: url('/img/abdiepost.gif');
	background-repeat: no-repeat;
	background-position: center 1rem;
	cursor: pointer;
} 

.inf-main_74d1e312f2320de5a6c94d0bece3923e .inf-submit input.disabled { 
	opacity: 0.4; 
} 

.inf-btn { 
	color: rgb(85, 85, 85); 
	border: medium none; 
	font-weight: normal; 
	height: auto; 
	padding: 7px; 
	display: inline-block; 
	background-color: white; 
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.24); 
	border-radius: 2px; 
	line-height: 1em; 
} 

.inf-rgpd { 
	margin:25px 0px 15px 0px; 
	color:#555555; 
} 

.altcha-label span { 
	color: #555 
} 

.newsletter-title {
	position: relative;
}

.newsletter-title > * {
	position: relative;
	width: 100%;
	height: auto;
}

.gif-letter {
	max-width: 400px;
	text-align: center;
}

.gif-newsletter {
	position: absolute;
	left: 0;
	top: 35%;;
}

.newsletter-title h4 {
	opacity: 0;
	pointer-events: none;
}