arregla un problema de importar el css a lo loco

src/lib/form/Colabs.svelte

@@ -57,10 +57,11 @@
 <style>
 	.colabs {
 		display: grid;
-		grid-template-columns: repeat(5, min-content);
+		grid-template-columns: repeat(3, min-content);
 		align-items: center;
 		justify-content: center;
 	}
+
 	.organization {
 		position: relative;
 		display: grid;
@@ -88,6 +89,7 @@
 		cursor: pointer;
 		background-color: white;
 		padding: 0 0.25rem;
+		z-index: 2;
 	}
 
 	input {

src/lib/form/Form.svelte

@@ -108,7 +108,7 @@
 			<textarea bind:value={$address} type="text" name="address" />
 		</div>
 	</div>
-	<div class="form-group media">
+	<div class="form-group ">
 		<label for="organizedBy">Organiza:</label>
 		<Organized />
 		<label for="colabs">Colabora:</label>
@@ -158,7 +158,7 @@
 	}
 
 	button {
-		margin: 0 1rem;
+		margin: 1rem;
 		padding: 0.5rem;
 		font-size: 1.1rem;
 		cursor: pointer;

src/lib/form/Organized.svelte

@@ -22,7 +22,7 @@
 	};
 </script>
 
-<div class="organized-by">
+<div class="form-organized-by">
 	{#if $organizedBy[0]}
 		{#each $organizedBy as organization, i}
 			<div class="organization">
@@ -55,7 +55,7 @@
 />
 
 <style>
-	.organized-by {
+	.form-organized-by {
 		display: grid;
 		grid-template-columns: repeat(5, min-content);
 		align-items: center;
@@ -87,11 +87,14 @@
 		cursor: pointer;
 		background-color: white;
 		padding: 0 0.25rem;
+		z-index: 2;
 	}
+
 	input {
 		display: block;
 		max-width: 100px;
 	}
+
 	button {
 		display: block;
 		padding: 0.5rem;

src/lib/preview/verde.css

@@ -1,11 +1,12 @@
-	.preview {
+.preview {
-		padding: 1rem;
+	padding: 0.5rem;
 	display: grid;
 	justify-content: center;
 	grid-template-columns: 1fr;
-	}
+  align-items: start;
+}
 
-	.result {
+.result {
 	display: block;
 	aspect-ratio: 1/1.4142;
 	min-height: 842px;
@@ -17,9 +18,9 @@
 	position: relative;
 	padding: 1rem;
 	/* border-radius: 0.5rem; */
-	}
+}
 
-	.heading {
+.heading {
 	position: absolute;
 	top: 300px;
 	left: 1rem;
@@ -29,9 +30,9 @@
 	font-variant: small-caps;
 	height: 1.2rem;
 	overflow: hidden;
-	}
+}
 
-	.title {
+.title {
 	position: absolute;
 	top: 320px;
 	left: 1rem;
@@ -48,8 +49,9 @@
 	justify-content: center;
 	align-items: end;
 	text-align: center;
-	}
+}
-	.subtitle {
+
+.subtitle {
 	position: absolute;
 	display: flex;
 	top: 410px;
@@ -63,9 +65,9 @@
 	text-align: center;
 	align-items: start;
 	justify-content: center;
-	}
+}
 
-	.content {
+.content {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
@@ -78,9 +80,9 @@
 	color: #222;
 	line-height: 1.5rem;
 	overflow: hidden;
-	}
+}
 
-	.weekday {
+.weekday {
 	position: absolute;
 	text-transform: uppercase;
 	top: 605px;
@@ -92,9 +94,9 @@
 	font-weight: 700;
 	overflow: hidden;
 	text-align: center;
-	}
+}
 
-	.date {
+.date {
 	position: absolute;
 	text-transform: uppercase;
 	top: 630px;
@@ -106,9 +108,9 @@
 	max-height: 2rem;
 	overflow: hidden;
 	text-align: center;
-	}
+}
 
-	.time {
+.time {
 	position: absolute;
 	top: 650px;
 	left: 22rem;
@@ -119,9 +121,9 @@
 	overflow: hidden;
 	text-align: center;
 	font-weight: 700;
-	}
+}
 
-	.address {
+.address {
 	position: absolute;
 	top: 620px;
 	left: 2rem;
@@ -135,16 +137,16 @@
 	max-height: 4.5rem;
 	overflow: hidden;
 	white-space: pre-wrap;
-	}
+}
 
-	.imagetitle {
+.imagetitle {
 	position: absolute;
 	top: 720px;
 	font-size: 0.8rem;
 	color: #444;
-	}
+}
 
-	.organized-by {
+.organized-by {
 	position: absolute;
 	top: 740px;
 	left: 1rem;
@@ -155,33 +157,34 @@
 	grid-auto-rows: auto;
 	justify-content: center;
 	align-items: center;
-	}
+}
 
-	.organization {
+.organization {
 	margin: 0 1rem;
 	display: flex;
 	flex-direction: column;
 	text-align: center;
 	align-items: center;
 	justify-content: center;
-	}
+}
 
-	.organization img {
+.organization img {
 	max-height: 48px;
 	max-width: 100px;
 	margin: 0 auto;
 	opacity: 75%;
-	}
+}
+
 
-	.caption {
+.caption {
 	margin: 0.5rem 0;
 	font-size: 0.7rem;
 	font-family: sans-serif;
 	text-transform: uppercase;
 	color: #666;
-	}
+}
 
-	.orgcolab {
+.orgcolab {
 	position: absolute;
 	top: 720px;
 	height: 7rem;
@@ -193,28 +196,28 @@
 	justify-content: start;
 	align-items: center;
 	width: 100%;
-	}
+}
 
-	.org {
+.org {
 	grid-row: 1/2;
 	grid-column: 1/2;
 	font-size: 0.8rem;
-	}
+}
 
-	.colab {
+.colab {
 	font-size: 0.8rem;
 	grid-row: 1/2;
 	grid-column: 2/3;
-	}
+}
 
-	.orgmixed {
+.orgmixed {
 	grid-row: 2/3;
 	grid-column: 1/2;
 	display: flex;
-	}
+}
 
-	.colabmixed {
+.colabmixed {
 	grid-row: 2/3;
 	grid-column: 2/3;
 	display: flex;
-	}
+}

src/routes/+page.svelte

@@ -23,6 +23,7 @@
 		grid-gap: 0.5rem;
 		min-height: calc(100vh - 5rem);
 	}
+
 	.form {
 		grid-column: 1/2;
 		background-color: rgb(230, 240, 240);