added files
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
new file mode 100644
index 0000000..94af64c
--- /dev/null
+++ b/styles/Components/panels.module.css
@@ -0,0 +1,92 @@
+.panel {
+ min-height: 50px;
+ padding: 10px;
+ padding-block: 30px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ gap: 10px;
+
+ background-color: var(--theme-ui-colors-panelColor);
+ border-radius: 20px;
+ transition: background-color 0.3s ease-in-out;
+
+}
+
+.doublePanel {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 20px;
+ column-width: 100%;
+}
+
+@media (max-width: 900px) {
+ .doublePanel {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ gap: 20px;
+ }
+ .halfWidth {
+ width: 100%;
+ }
+}
+
+
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ margin-block: 20px;
+ padding-inline: 20px;
+}
+
+.title {
+ width: 100%;
+ font-size: max(2em, 3.25vw);
+ margin: 0;
+ color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
+ font-weight: lighter;
+ text-align: center;
+ word-break: break-all;
+}
+
+.subtitle {
+ width: 100%;
+ font-size: max(2em, 2vw);
+ color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
+ font-weight: lighter;
+ text-align: center;
+ word-break: break-word;
+ margin-block: 0;
+}
+
+.text {
+ width: 100%;
+ text-align: center;
+ padding-inline: "15%";
+ font-size: 120%;
+ color: var(--card-text-color);
+ transition: color 0.3s ease-in-out;
+ margin-top: 0;
+ margin: 10px
+}
+
+.divider {
+ width: 75%;
+ height: 4px;
+ border-radius: 100vw;
+ margin-block: 10px;
+ background-color: var(--theme-ui-colors-hint);
+ transition: background-color 0.3s ease-in-out;
+}