2 files changed, 159 insertions, 35 deletions

diff --git a/static/css/input.css b/static/css/input.css
index 0e05d6c..72124f8 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -16,7 +16,7 @@
 
 * {
   font-family: "Karla", sans-serif;
-  box-sizing: border-box;
+  /* box-sizing: border-box; */
 }
 
 main {
diff --git a/static/css/main.css b/static/css/main.css
index d235d15..1ff34f7 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -737,6 +737,14 @@ video {
   margin-top: 2rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.box-border {
+  box-sizing: border-box;
+}
+
 .block {
   display: block;
 }
@@ -753,6 +761,10 @@ video {
   display: inline-flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -761,6 +773,10 @@ video {
   aspect-ratio: 16 / 9;
 }
 
+.aspect-\[9\/13\] {
+  aspect-ratio: 9/13;
+}
+
 .size-3 {
   width: 0.75rem;
   height: 0.75rem;
@@ -776,6 +792,11 @@ video {
   height: 1.5rem;
 }
 
+.size-2 {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -816,10 +837,30 @@ video {
   height: 100%;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-\[42vw\] {
+  height: 42vw;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
 .max-h-24 {
   max-height: 6rem;
 }
 
+.max-h-\[806px\] {
+  max-height: 806px;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -869,24 +910,27 @@ video {
   width: max-content;
 }
 
-.max-w-7xl {
-  max-width: 80rem;
+.w-1\/3 {
+  width: 33.333333%;
 }
 
-.max-w-max {
-  max-width: -moz-max-content;
-  max-width: max-content;
+.w-3 {
+  width: 0.75rem;
 }
 
-.max-w-fit {
-  max-width: -moz-fit-content;
-  max-width: fit-content;
+.max-w-7xl {
+  max-width: 80rem;
 }
 
 .max-w-full {
   max-width: 100%;
 }
 
+.max-w-max {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
 .origin-left {
   transform-origin: left;
 }
@@ -943,6 +987,10 @@ video {
   list-style-position: inside;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1009,6 +1057,12 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1035,14 +1089,6 @@ video {
   white-space: nowrap;
 }
 
-.text-wrap {
-  text-wrap: wrap;
-}
-
-.text-nowrap {
-  text-wrap: nowrap;
-}
-
 .break-words {
   overflow-wrap: break-word;
 }
@@ -1067,6 +1113,11 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1366,8 +1417,8 @@ video {
   --tw-bg-opacity: 0.4;
 }
 
-.bg-opacity-30 {
-  --tw-bg-opacity: 0.3;
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
 }
 
 .bg-cover {
@@ -1474,6 +1525,14 @@ video {
   padding-top: 0.25rem;
 }
 
+.pt-\[140\%\] {
+  padding-top: 140%;
+}
+
+.pb-\[140\%\] {
+  padding-bottom: 140%;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1513,10 +1572,18 @@ video {
   line-height: 1rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1619,11 +1686,6 @@ video {
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
 
-.text-green-900 {
-  --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity));
-}
-
 .text-indigo-300 {
   --tw-text-opacity: 1;
   color: rgb(165 180 252 / var(--tw-text-opacity));
@@ -1808,11 +1870,6 @@ video {
   color: rgb(161 98 7 / var(--tw-text-opacity));
 }
 
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
-
 .opacity-25 {
   opacity: 0.25;
 }
@@ -1834,11 +1891,6 @@ video {
   outline-offset: 2px;
 }
 
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1898,7 +1950,7 @@ video {
 
 * {
   font-family: "Karla", sans-serif;
-  box-sizing: border-box;
+  /* box-sizing: border-box; */
 }
 
 main {
@@ -2207,10 +2259,54 @@ main {
 }
 
 @media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:size-3 {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .sm\:size-4 {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .sm\:w-1\/2 {
+    width: 50%;
+  }
+
+  .sm\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .sm\:gap-2 {
+    gap: 0.5rem;
+  }
+
+  .sm\:p-2 {
+    padding: 0.5rem;
+  }
+
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .sm\:text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -2221,6 +2317,14 @@ main {
   .md\:w-64 {
     width: 16rem;
   }
+
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1024px) {
@@ -2232,6 +2336,14 @@ main {
     display: none;
   }
 
+  .lg\:h-\[42vw\] {
+    height: 42vw;
+  }
+
+  .lg\:max-h-\[806px\] {
+    max-height: 806px;
+  }
+
   .lg\:w-1\/2 {
     width: 50%;
   }
@@ -2248,6 +2360,14 @@ main {
     width: 15rem;
   }
 
+  .lg\:w-1\/5 {
+    width: 20%;
+  }
+
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -2301,6 +2421,10 @@ main {
     width: 24rem;
   }
 
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .xl\:flex-row {
     flex-direction: row;
   }