diff --git a/styles/colors/popup.css b/styles/colors/popup.css
new file mode 100644
index 0000000..f6aae80
--- /dev/null
+++ b/styles/colors/popup.css
@@ -0,0 +1,21 @@
+@import url("/styles/colors/defaults.results.css");
+
+#score {
+	background-color: #88888888;
+}
+
+#score::-webkit-progress-value {
+	background-color: #ffF;    
+}
+
+[result="bad"] {
+     background: var(--color-results_bad_gradient);
+}
+
+[result="ok"] {
+     background: var(--color-results_ok_gradient);
+}
+
+[result="good"], [result="trusted"] {
+     background: var(--color-results_good_gradient);
+}
\ No newline at end of file
diff --git a/styles/fonts/popup.css b/styles/fonts/popup.css
new file mode 100644
index 0000000..e4bb816
--- /dev/null
+++ b/styles/fonts/popup.css
@@ -0,0 +1,6 @@
+
+
+.card-title, #summary {
+	font-size: 175% !important;
+	font-weight: bold !important;
+}
\ No newline at end of file
diff --git a/styles/layouts/popup.css b/styles/layouts/popup.css
new file mode 100644
index 0000000..cd9e0fa
--- /dev/null
+++ b/styles/layouts/popup.css
@@ -0,0 +1,17 @@
+#score {
+     height: 2px;
+}
+
+#results > * {
+     padding: 2em;
+}
+
+#results > details {
+     margin-top: auto;
+     margin-bottom: auto;
+}
+
+#results:not(:has(details[open])) summary {
+     height: 80vh;
+}
+
diff --git a/styles/popup.css b/styles/popup.css
index e717f7f..f0a384d 100644
--- a/styles/popup.css
+++ b/styles/popup.css
@@ -1,17 +1,3 @@
-#summary {
-	font-weight: bold;
-}
-
-
-#score {
-	background-color: #88888888;
-	height: 2px;
-}
-
-#score::-webkit-progress-value {
-	background-color: #ffF;    
-}
-
-body:has(summary + details) summary {
-	padding-bottom: 2em;
-}
\ No newline at end of file
+@import url("/styles/layouts/popup.css");
+@import url("/styles/fonts/popup.css");
+@import url("/styles/colors/popup.css");
\ No newline at end of file