Upload 10 files

_res/_custom_image_edit.css

@@ -0,0 +1,932 @@
+html,
+body {
+	min-height: 101vh !important;
+}
+
+:root {
+	--layout-gap: 22px !important;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+	background: linear-gradient(to right, var(--slider-color) var(--range_progress), var(--neutral-600) var(--range_progress)) !important;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+	background-color: var(--primary-700) !important;
+	box-shadow: 0 0 0 1px var(--neutral-600), 1px 1px 4px #0000001a !important;
+	transition: transform 0.3s ease-in-out !important;
+}
+
+input[type="range"]:hover::-webkit-slider-thumb {
+	transform: scale(1.3);
+}
+
+.storyboard-column,
+.regieanweisung-column,
+.profi-einstellungen-column,
+.output-column,
+.info-column {
+	border: 1px solid rgba(255, 255, 255, 0.1) !important;
+	padding: calc(2 * var(--spacing-xxl));
+	border-radius: var(--radius-xl);
+	background: var(--block-background-fill);
+}
+
+@property --angle {
+	syntax: "<angle>";
+	initial-value: 0deg;
+	inherits: false;
+}
+
+.output-column::after,
+.output-column::before {
+	content: "";
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
+	top: 50%;
+	left: 50%;
+	translate: -50% -50%;
+	z-index: -1;
+	padding: 3px;
+	border-radius: var(--radius-xl);
+	animation: 3s spin linear infinite;
+}
+.output-column::before {
+	filter: blur(1.5rem);
+	opacity: 0.5;
+}
+@keyframes spin {
+	from {
+		--angle: 0deg;
+	}
+	to {
+		--angle: 360deg;
+	}
+}
+
+.info-column {
+	margin-top: var(--spacing-xxl);
+}
+
+.logo-html h1 {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-md);
+	fill: var(--primary-600);
+}
+
+.logo-html svg {
+	color: var(--primary-600) !important;
+}
+
+.row-logo,
+.row-logo .html-container {
+	padding: var(--spacing-xl) calc(var(--spacing-xxl) + 2px) !important;
+}
+
+.markdown-label {
+	flex-grow: 0 !important;
+}
+
+.profi-einstellungen-column {
+	padding: var(--spacing-xxl) calc(2 * var(--spacing-xxl));
+
+	& .profi-einstellungen-inner-column:nth-child(2) div.form:nth-child(2) {
+		gap: var(--layout-gap);
+		background: transparent !important;
+	}
+
+	& .profi-einstellungen-inner-row {
+		margin-top: 1rem;
+	}
+}
+
+.profi-einstellungen-accordion {
+	padding: var(--spacing-xl) 0 !important;
+	overflow: hidden !important;
+
+	& > button > span {
+		font-size: 1.3rem !important;
+	}
+}
+
+.storyboard-image {
+	border: 3px dashed rgba(255, 255, 255, 0.1) !important;
+	padding: 0 !important;
+	border-radius: var(--radius-xl);
+	background: var(--block-background-fill);
+	/* min-height: 300px; */
+	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+	/* height: 700px; */
+	/* height: min(500px, 100%); */
+
+	& > div.gallery-container > div {
+		overflow-y: auto !important;
+
+		&::-webkit-scrollbar {
+			height: 8px;
+			width: 8px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background-color: var(--neutral-800);
+			border-radius: 4px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: var(--primary-600);
+			border-radius: 4px;
+		}
+	}
+
+	& > button > div.wrap {
+		/* display: none !important; */
+		opacity: 0;
+	}
+
+	&:has(.image-frame) {
+		border-color: var(--primary-600) !important;
+	}
+
+	div.upload-container button div.wrap {
+		/* display: none !important; */
+		opacity: 0;
+	}
+
+	& div.upload-container.reduced-height {
+		height: 100% !important;
+	}
+
+	& label[data-testid="block-label"] {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		background: transparent;
+		font-weight: 800;
+		font-size: var(--text-xl);
+		text-align: center;
+		left: 50%;
+		top: 30%;
+		transform: translate(-50%, -50%);
+		border-width: 0;
+		& span {
+			display: none !important;
+		}
+
+		&::before {
+			content: "Hochladen";
+			font-weight: 400;
+			font-size: 0.8rem;
+			position: absolute;
+			top: 260%;
+			left: 50%;
+			transform: translateX(-50%);
+			position: absolute;
+			transition: border-color 0.3s ease-in-out, background-color 0.6s ease-in-out 0.4s;
+			width: 110px;
+			height: 40px;
+			border: var(--button-border-width) solid var(--button-secondary-border-color);
+			background: var(--button-secondary-background-fill);
+			color: var(--button-secondary-text-color);
+			box-shadow: var(--button-secondary-shadow);
+			border-radius: var(--button-large-radius);
+			padding: var(--button-large-padding);
+			font-weight: var(--button-large-text-weight);
+			font-size: var(--button-large-text-size);
+			pointer-events: all !important;
+		}
+
+		&::after {
+			content: "Bild hierher ziehen oder klicken zum Hochladen";
+			font-weight: 400;
+			font-size: 0.8rem;
+			position: absolute;
+			top: 38px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 95%;
+		}
+	}
+
+	&:hover label[data-testid="block-label"] {
+		&::before {
+			background-color: var(--primary-500) !important;
+		}
+	}
+
+	&:has(.gallery-item) label[data-testid="block-label"],
+	&:has(.image-frame) label[data-testid="block-label"] {
+		display: none !important;
+	}
+
+	/* & label[data-testid="block-label"]::after {
+		content: "akölfj asöf asd";
+		position: relative;
+	} */
+
+	& button[aria-label="Upload file"] {
+		position: absolute;
+		transition: border-color 0.3s ease-in-out, background-color 0.6s ease-in-out 0.4s;
+		top: 62%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 110px;
+		height: 40px;
+		border: var(--button-border-width) solid var(--button-secondary-border-color);
+		background: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+		box-shadow: var(--button-secondary-shadow);
+		border-radius: var(--button-large-radius);
+		padding: var(--button-large-padding);
+		font-weight: var(--button-large-text-weight);
+		font-size: var(--button-large-text-size);
+		pointer-events: all !important;
+		/* padding: var(--spacing-lg) calc(2 * var(--spacing-lg)); */
+
+		& svg {
+			display: none;
+		}
+	}
+
+	button[data-testid="file-upload"] {
+		z-index: 20 !important;
+		pointer-events: all;
+	}
+
+	div.image-container:has(.image-frame) span.source-selection {
+		display: none !important;
+	}
+
+	& span.source-selection {
+		position: absolute;
+		width: 100% !important;
+		height: 100% !important;
+		top: 0 !important;
+		left: 0 !important;
+		z-index: 1 !important;
+		pointer-events: none !important;
+
+		& button[aria-label="Upload file"]::after {
+			content: "Hochladen";
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+
+		& button[aria-label="Capture from camera"],
+		button[aria-label="Paste from clipboard"] {
+			bottom: 0;
+			position: absolute;
+			pointer-events: all;
+		}
+		& button[aria-label="Capture from camera"] {
+			left: 42%;
+		}
+
+		& button[aria-label="Paste from clipboard"] {
+			right: 42%;
+		}
+	}
+}
+
+.storyboard-image:hover {
+	border-color: var(--primary-600) !important;
+
+	& button[aria-label="Upload file"] {
+		background-color: var(--primary-500) !important;
+	}
+}
+
+.regieanweisung-textbox {
+	padding: 0 !important;
+
+	& label {
+		height: 100% !important;
+
+		& .input-container {
+			height: 100% !important;
+		}
+	}
+
+	& textarea {
+		transition: height 0.3s ease-in-out, border 0.3s ease-in-out;
+		height: 100% !important;
+	}
+
+	&:focus-within textarea {
+		/* height: 300px !important; */
+		border: 1px solid var(--primary-600) !important;
+	}
+}
+
+.regieanweisung-column .form {
+	gap: var(--layout-gap) !important;
+	background: var(--block-background-fill);
+}
+
+.regieanweisung-textbox textarea,
+.negative-prompt-textbox textarea,
+.einstellungen-seed input[type="number"] {
+	border: 1px solid rgba(255, 255, 255, 0.1) !important;
+	border-radius: var(--radius-xl) !important;
+	font-size: 1.2rem !important;
+}
+
+.regieanweisung-textbox:focus-within textarea,
+.einstellungen-seed:focus-within input[type="number"],
+.negative-prompt-textbox:focus-within textarea {
+	border: 1px solid var(--primary-600) !important;
+}
+
+.regieanweisung-videolaenge {
+	padding: var(--spacing-xl) 0 !important;
+	gap: var(--layout-gap) !important;
+}
+
+.negative-prompt-textbox {
+	padding: 0 !important;
+}
+
+.regieanweisung-videolaenge div > div > label > span,
+.einstellungen-slider div > div > label > span,
+.einstellungen-seed > label > span,
+.einstellungen-rewrite-prompt > label > span {
+	font-size: clamp(1rem, 0.82rem + 0.96vw, 1.3rem) !important;
+	font-weight: 600 !important;
+	color: var(--body-text-color) !important;
+	background: transparent !important;
+	padding: 4px 0 !important;
+}
+
+.einstellungen-steps > div.wrap > div.head > div.tab-like-container,
+.einstellungen-slider > div.wrap > div.head > div.tab-like-container {
+	align-self: end;
+}
+
+.einstellungen-steps > div.wrap > div.head > div.tab-like-container > input[type="number"] {
+	font-size: 1.8rem;
+	font-weight: 600;
+	color: var(--primary-600);
+	padding: var(--size-1) 0;
+}
+.einstellungen-steps > div.wrap > div.head > div.tab-like-container {
+	height: unset;
+}
+
+.einstellungen-steps > div.wrap > div.head > div.tab-like-container > button {
+	display: none;
+}
+
+/* .regieanweisung-videolaenge > div.wrap > div.head > div > input[type="number"]::-webkit-outer-spin-button,
+.regieanweisung-videolaenge > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
+.einstellungen-seed > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
+.einstellungen-slider > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-outer-spin-button,
+.einstellungen-seed > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button,
+.einstellungen-slider > div.wrap > div.head > div.tab-like-container > input[type="number"]::-webkit-inner-spin-button {
+	display: none;
+} */
+
+.einstellungen-slider > div.wrap > div.head > div > input[type="number"] {
+	background: transparent !important;
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		display: none;
+	}
+	&:focus {
+		border: 0px solid var(--primary-600) !important;
+		box-shadow: none !important;
+	}
+}
+
+.regieanweisung-videolaenge input[type="number"],
+.einstellungen-slider input[type="number"] {
+	text-align: right;
+}
+
+body > gradio-app > div > main,
+.fillable.svelte-99kmwu:not(.fill_width),
+.fillable:not(.fill_width) {
+	max-width: 1200px !important;
+}
+
+@media (min-width: 1920px) {
+	body > gradio-app > div > main,
+	.fillable.svelte-99kmwu:not(.fill_width),
+	.fillable:not(.fill_width) {
+		max-width: 1200px !important;
+	}
+}
+
+.merged-video,
+.result-video {
+	border-radius: var(--radius-xl) !important;
+	aspect-ratio: 16/9 !important;
+}
+
+.run-button {
+	padding: var(--spacing-xxl) calc(2 * var(--spacing-xxl)) !important;
+	border-radius: var(--radius-xl) !important;
+}
+
+.tab-container {
+	height: calc(2 * var(--size-8)) !important;
+}
+
+.tab-container * {
+	font-family: var(--font), "Font Awesome 7 Free" !important;
+}
+
+.tab-container button {
+	font-size: 1.3rem !important;
+	font-weight: 600 !important;
+	padding: 0 var(--size-3) !important;
+}
+
+.tab-container::after {
+	background-color: var(--neutral-600) !important;
+}
+
+.tab-wrapper {
+	padding: 0 calc(2 * var(--spacing-lg)) var(--size-2) calc(2 * var(--spacing-lg)) !important;
+}
+
+.storyboard-arrow {
+	display: none;
+}
+
+.storyboard-row {
+	/* height: 100%; */
+	min-height: 400px;
+	flex-direction: column !important;
+}
+
+@media (min-width: 768px) {
+	.storyboard-row {
+		/* height: 500px !important; */
+		flex-direction: row !important;
+	}
+}
+
+.profi-einstellungen-accordion > button {
+	& > span:nth-child(1) {
+		font-size: 1rem !important;
+		line-height: 1.5;
+	}
+	@media (min-width: 768px) {
+		& > span:nth-child(1) {
+			font-size: 1.3rem !important;
+		}
+	}
+}
+
+.einstellungen-seed-row {
+	padding: 10px 0 !important;
+	& .form {
+		background: transparent !important;
+		gap: 0 !important;
+	}
+
+	&:has(input[type="checkbox"]:checked) {
+		& .einstellungen-seed > label > span::after {
+			content: "(zuf\00E4llig \2713)";
+			color: var(--primary-600);
+			font-size: 0.8rem;
+		}
+	}
+}
+
+.einstellungen-seed,
+.einstellungen-random-seed {
+	padding: 0 !important;
+}
+
+.einstellungen-seed {
+	flex: 1 0 0;
+	min-width: min(140px, 100%) !important;
+	overflow: visible !important;
+
+	& label > div {
+		width: calc(100% + 47px) !important;
+	}
+
+	& input[type="number"] {
+		height: 47px !important;
+		border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
+	}
+
+	& input[type="number"]::-webkit-outer-spin-button,
+	& input[type="number"]::-webkit-inner-spin-button {
+		display: none;
+	}
+}
+
+.einstellungen-guidance-scale-1 {
+	padding: 10px 0 !important;
+}
+
+.einstellungen-random-seed {
+	padding: 0 !important;
+	min-width: min(47px, 100%) !important;
+	flex: 0;
+	display: flex;
+	flex-direction: column-reverse;
+	background: transparent !important;
+
+	& > label:has(input[type="checkbox"])::after {
+		content: "\f522";
+		font-family: "Font Awesome 7 Free" !important;
+		font-weight: 900;
+		position: absolute;
+		top: 3px;
+		left: 2px !important;
+		width: 40px;
+		height: 40px;
+		/* border-radius: 50%; */
+		border-radius: var(--radius-lg) !important;
+		background: transparent !important;
+		/* box-shadow: var(--shadow-inset); */
+		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
+		color: var(--neutral-900) !important;
+		text-align: center;
+		line-height: 2.5rem;
+		font-size: 1.4rem;
+	}
+
+	& > label:has(input[type="checkbox"]:checked)::after {
+		content: "\f522";
+		font-family: "Font Awesome 7 Free" !important;
+		font-weight: 900;
+		position: absolute;
+		background: transparent !important;
+		opacity: 1 !important;
+		left: 2px !important;
+	}
+
+	& > label {
+		position: relative;
+		width: 47px !important;
+		height: 47px;
+		display: inline-block;
+		border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
+		background: var(--neutral-600) !important;
+		box-shadow: var(--shadow-inset);
+		transition: background 0.3s ease-in-out !important;
+		/*border: 0.4px solid var(--border-color-primary);*/
+		border: 1px solid var(--neutral-600) !important;
+		cursor: pointer;
+
+		& > input[type="checkbox"] {
+			width: 0;
+			height: 0;
+			opacity: 0;
+		}
+
+		& > span {
+			display: none;
+		}
+	}
+
+	& > label:has(input[type="checkbox"]:checked) {
+		background: var(--primary-600) !important;
+	}
+}
+
+.einstellungen-rewrite-prompt {
+	padding: 10px 0 !important;
+	min-width: min(78px, 100%) !important;
+	flex: 0;
+
+	& > label:has(input[type="checkbox"])::after {
+		content: "\f00d";
+		font-family: "Font Awesome 7 Free" !important;
+		font-weight: 900;
+		position: absolute;
+		background: transparent !important;
+		left: 0;
+		top: 0;
+		font-family: "Font Awesome 7 Free" !important;
+		width: 30px;
+		height: 30px;
+		line-height: 30px;
+		border-radius: 50% !important;
+		text-align: center;
+		color: var(--neutral-900) !important;
+	}
+
+	& > label:has(input[type="checkbox"]:checked)::after {
+		content: "\f00c";
+		font-weight: 900;
+		position: absolute;
+		background: transparent !important;
+		left: 0;
+		top: 0;
+		font-family: "Font Awesome 7 Free" !important;
+		width: 30px;
+		height: 30px;
+		line-height: 30px;
+		border-radius: 50% !important;
+		text-align: center;
+		color: var(--neutral-900) !important;
+	}
+
+	& > label:has(input[type="checkbox"])::before {
+		content: "";
+		position: absolute;
+		width: 30px;
+		height: 30px;
+		background: var(--neutral-600) !important;
+		border: 1px solid var(--neutral-600) !important;
+		border-radius: 50% !important;
+	}
+
+	& > label:has(input[type="checkbox"]:checked)::before {
+		content: "";
+		position: absolute;
+		width: 30px;
+		height: 30px;
+		background: var(--primary-600) !important;
+		border: 1px solid var(--primary-600) !important;
+		border-radius: 50% !important;
+	}
+
+	& > label {
+		position: relative;
+		width: 100%;
+		height: 30px;
+		display: inline-block;
+		box-shadow: var(--shadow-inset);
+		background: transparent;
+		transition: background-color 0.3s, cursor 0.3s;
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--body-text-color);
+		border: 0px solid rgba(255, 255, 255, 0.1) !important;
+		font-size: 1.3rem !important;
+
+		& > input[type="checkbox"] {
+			/* width: 0;
+			height: 0; */
+			opacity: 0;
+		}
+
+		& > span {
+			height: 27px;
+			min-width: 100px;
+			line-height: 0.5;
+			white-space: nowrap;
+			padding-left: 84px;
+			/* font-size: 1.3rem !important; */
+			/* justify-self: center; */
+			/* align-self: center; */
+			/* min-height: 47px; */
+			overflow: hidden;
+			padding: 4px 0px !important;
+			padding-left: 8px !important;
+		}
+	}
+}
+
+@media (min-width: 768px) {
+	.storyboard-arrow {
+		/* display: block; */
+		align-self: center;
+		max-width: 30px;
+		min-width: 30px;
+		display: flex;
+		justify-content: center;
+
+		& .html-container {
+			padding: 0 !important;
+			margin: 0 auto;
+			text-align: center;
+			display: flex;
+			justify-content: center;
+		}
+	}
+}
+
+.result-gallery div.gallery-container div.grid-wrap {
+	padding: 0;
+	padding-bottom: var(--spacing-md);
+	overflow-y: hidden;
+	overflow-x: scroll;
+
+	& .icon-button-wrapper {
+		display: none;
+		position: fixed !important;
+		top: unset !important;
+		right: unset !important;
+		margin: var(--spacing-xxl);
+
+		& button.icon-button > div {
+			width: 22px !important;
+			height: 22px !important;
+		}
+	}
+
+	&::-webkit-scrollbar {
+		height: 8px;
+		width: 0;
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: var(--neutral-800);
+		border-radius: 4px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--primary-600);
+		border-radius: 4px;
+	}
+
+	& .grid-container {
+		display: flex;
+		flex-wrap: nowrap;
+		flex-direction: row;
+		width: auto;
+		height: 200px;
+
+		& .gallery-item {
+			max-width: 280px !important;
+		}
+
+		& button.delete-button {
+			/* top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%); */
+			left: unset !important;
+			right: var(--block-label-margin);
+			top: var(--block-label-margin);
+			border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-sm);
+			border: 1px solid var(--border-color-primary);
+		}
+
+		& .gallery-item button.delete-button {
+			opacity: 1;
+		}
+
+		& .gallery-item button.delete-button::after {
+			content: "entfernen";
+			padding-left: var(--spacing-md);
+		}
+
+		@media (min-width: 768px) {
+			& .gallery-item:hover button.delete-button {
+				opacity: 1 !important;
+			}
+			& .gallery-item button.delete-button {
+				opacity: 0 !important;
+			}
+			& button.delete-button {
+				opacity: 0 !important;
+			}
+		}
+	}
+}
+
+.toggle-btn {
+	display: flex;
+	flex-direction: column-reverse;
+
+	& > div.wrap {
+		display: none;
+	}
+
+	& > div:not(.wrap) {
+		margin-top: var(--spacing-lg);
+		margin-bottom: 0;
+	}
+
+	& > label {
+		position: relative;
+		width: 78px;
+		height: 47px;
+		display: inline-block;
+		border-radius: 13px;
+		background: var(--neutral-700);
+		box-shadow: var(--shadow-inset);
+		transition: background-color 0.3s, cursor 0.3s;
+		/*border: 0.4px solid var(--border-color-primary);*/
+		border: 1px solid rgba(255, 255, 255, 0.1) !important;
+		cursor: pointer;
+
+		& > input[type="checkbox"] {
+			width: 0;
+			height: 0;
+			opacity: 0;
+		}
+	}
+
+	& > label:has(input[type="checkbox"]:checked) {
+		background: var(--primary-600);
+	}
+}
+
+#wink,
+#heart {
+	display: inline;
+	width: 26px;
+	margin-bottom: 8px;
+}
+
+#wink {
+	animation: wink 3s ease-in-out infinite;
+}
+
+#heart {
+	animation: beat 2s ease-in-out infinite;
+}
+
+/* Keyframes */
+@keyframes wink {
+	0%,
+	60%,
+	100% {
+		transform: rotate(0deg);
+	}
+	10%,
+	30%,
+	70%,
+	90% {
+		transform: rotate(14deg);
+	}
+	20%,
+	80% {
+		transform: rotate(-8deg);
+	}
+	40% {
+		transform: rotate(-4deg);
+	}
+	50% {
+		transform: rotate(10deg);
+	}
+}
+
+@keyframes beat {
+	0% {
+		transform: scale(1);
+	}
+	5% {
+		transform: scale(0.75);
+	}
+	20% {
+		transform: scale(1);
+	}
+	30% {
+		transform: scale(1);
+	}
+	35% {
+		transform: scale(0.75);
+	}
+	50% {
+		transform: scale(1);
+	}
+	55% {
+		transform: scale(0.75);
+	}
+	70% {
+		transform: scale(1);
+	}
+}
+
+.run-button {
+	transition: border 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
+	border: 3px solid var(--button-primary-background-fill);
+	box-shadow: none;
+}
+.run-button:hover {
+	/* box-shadow: rgba(12, 121, 196, 0.27) -5px -4px 20px 3px, rgba(196, 18, 195, 0.19) -7px 7px 16px 3px, rgba(119, 237, 242, 0.14) 5px 5px 19px 3px; */
+	box-shadow: rgba(12, 121, 196, 0.17) -5px -4px 20px 3px, rgba(196, 18, 195, 0.1) -7px 7px 16px 3px, rgba(119, 237, 242, 0.08) 5px 5px 19px 3px;
+	border: 3px solid var(--primary-900);
+	background-color: var(--primary-700) !important;
+}
+
+.logo {
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	span:first-child {
+		width: 2rem;
+		* {
+			color: var(--color-accent) !important;
+			transform: rotate(-5deg);
+		}
+	}
+}
+
+/* span.winking-hand-emoji {
+              animation: wink 3s ease-in-out infinite;
+              /* display: inline; * /
+          } */
+
+/* span.heart-beat-emoji {
+              animation: beat 2s ease-in-out infinite;
+              /* display: inline; * /
+          } */