organized styles

toys/license/license.css

@@ -0,0 +1,69 @@
+#licenseContainer {
+  width: 600px;
+  height: 400px;
+  padding: 40px 10px 40px 40px;
+  position: absolute;
+  left: 50%;
+  bottom: 0%;
+  transform: translate(-50%, calc(-22px * var(--pxDensity)));
+  font-size: 0.75rem;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+}
+#picContainer {
+  margin-top: 40px;
+  width: 150px;
+  height: 150px;
+}
+#credits {
+  position: absolute;
+  bottom: 0%;
+  left: 0%;
+  margin: 0% 0% 0% 20px;
+  color: var(--navBarBtn_Inner);
+  font-size: 0.6rem;
+}
+#signatureContainer {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 5% 0% 0% 0%;
+}
+#signature {
+  margin: 0% 0% 0.2rem 0%;
+  text-align: center;
+  font-size: 1rem;
+}
+#signHere {
+  border-top: #000000 solid 6px;
+  margin: 0%;
+  padding: 0% 25px;
+  text-align: center;
+}
+#detailsContainer {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+h2 {
+  margin: 5px;
+}
+#sillyValue {
+  height: 100%;
+  background-color: #FF0000;
+}
+.sillyGrid {
+  width: 99%;
+  aspect-ratio: 10 / 1;
+  height: auto;
+  background-image: repeating-linear-gradient(
+    to right, 
+    #000000 0px, 
+    #000000 3px,
+    transparent 3px, 
+    transparent 10%
+  );
+  border: 3px solid black;
+  border-radius: 8px;
+  align-self: center;
+}