diff --git a/src/app.css b/src/app.css
index eab58c0..8414242 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,75 +1,90 @@
-:global(body) {
- margin: 0;
- padding: 0;
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
- background: #f9fafb;
- color: #1f2937;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- line-height: 1.5;
+body {
+ margin: 0;
+ padding: 0;
+ font-family:
+ "Space Grotesk",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ background: #f9fafb;
+ color: #1f2937;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ line-height: 1.5;
}
-:global(*),
-:global(*::before),
-:global(*::after) {
- box-sizing: border-box;
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
}
-:global(h1, h2, h3, h4, h5, h6, p) {
- margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+ margin: 0;
}
-:global(button, input, select, textarea) {
- font-family: inherit;
- font-size: inherit;
- color: inherit;
+button,
+input,
+select,
+textarea {
+ font-family: inherit;
+ font-size: inherit;
+ color: inherit;
}
-:global(select) {
- appearance: none;
- -webkit-appearance: none;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: right 0.75rem center;
- padding-right: 2rem;
+select {
+ appearance: none;
+ -webkit-appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.75rem center;
+ padding-right: 2rem;
}
-:global(input[type='range']) {
- appearance: none;
- -webkit-appearance: none;
- background: transparent;
- cursor: pointer;
+input[type="range"] {
+ appearance: none;
+ -webkit-appearance: none;
+ background: transparent;
+ cursor: pointer;
}
-:global(input[type='range']::-webkit-slider-runnable-track) {
- height: 6px;
- border-radius: 3px;
- background: #e5e7eb;
+input[type="range"]::-webkit-slider-runnable-track {
+ height: 6px;
+ border-radius: 3px;
+ background: #e5e7eb;
}
-:global(input[type='range']::-webkit-slider-thumb) {
- -webkit-appearance: none;
- appearance: none;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: #3b82f6;
- border: 2px solid #ffffff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
- margin-top: -7px;
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #3b82f6;
+ border: 2px solid #ffffff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ margin-top: -7px;
}
-:global(input[type='range']::-moz-range-track) {
- height: 6px;
- border-radius: 3px;
- background: #e5e7eb;
+input[type="range"]::-moz-range-track {
+ height: 6px;
+ border-radius: 3px;
+ background: #e5e7eb;
}
-:global(input[type='range']::-moz-range-thumb) {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: #3b82f6;
- border: 2px solid #ffffff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
\ No newline at end of file
+input[type="range"]::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #3b82f6;
+ border: 2px solid #ffffff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
diff --git a/src/app.html b/src/app.html
index 4770a13..4e3a133 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,16 +1,19 @@
-
-
-
-
-
-
-
- English Style Converter
- %sveltekit.head%
-
-
- %sveltekit.body%
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+ English Style Converter
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
+