remade boykisser license to be easier to modify and update

toys/license/license.css

@@ -1,18 +1,3 @@
-#licenseContainer {
-  position: relative;
-  max-width: min(100vw, 600px);
-  max-height: 400px /* min(calc(50vh - calc(25px * var(--pxDensity))), 400px) */;
-  aspect-ratio: 3 / 2;
-  width: auto;
-  height: auto;
-  padding: 0px min(20px, 3.333%) min(40px, 6.667%) min(20px, 3.333%);
-  margin: calc(5px * var(--pxDensity)) auto 0% /* calc(25px * var(--pxDensity)) */ auto;
-  font-size: min(max(1.05vmax, 1.5vmin), 0.75rem);
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(2, auto);
-  grid-template-rows: repeat(2, auto);
-}
 .sans {
   font-family: "Comic Neue", serif;
   font-weight: 400;
@@ -28,50 +13,6 @@
   font-weight: 400;
   font-style: normal;
 }
-#picContainer {
-  width: max(10vmax, 15vmin);
-  height: max(10vmax, 15vmin);
-  max-height: 150px;
-  max-width: 150px;
-  display: block;
-  overflow: hidden;
-  background-color: transparent;
-  border-radius: 25%;
-}
-#picValue {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-#credits {
-  position: absolute;
-  bottom: 0%;
-  left: 0%;
-  margin: 0% 0% 0% 20px;
-  color: var(--navBarBtn_Inner);
-  font-size: min(max(1vmax, 1.2vmin), 0.6rem);
-}
-#signatureContainer {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 5% 0% 0% 0%;
-}
-#signatureValue {
-  margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
-  text-align: center;
-  font-size: min(max(2.5vmax, 3vmin), 1.5rem);
-}
-#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;
 }
@@ -105,9 +46,84 @@ h2 {
 .sillyValue:last-child {
   border-radius: 0px 5px 5px 0px;
 }
-#titleValue {
+#licenseContainer {
+  width: 600px;
+  height: 400px;
+  padding: 0px 20px 40px 20px;
+  font-size: 0.75rem;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  grid-template-rows: repeat(2, auto);
+}
+#picContainer {
+  width: 150px;
+  height: 150px;
+  display: block;
+  overflow: hidden;
+  background-color: transparent;
+  border-radius: 32px;
+}
+#picValue {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+#credits {
+  position: absolute;
+  bottom: 12px;
+  left: 0%;
+  margin: 0% 0% 0% 20px;
+  color: var(--navBarBtn_Inner);
+  font-size: 0.6rem;
+}
+#signatureContainer, #DsignatureContainer {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 5% 0% 0% 0%;
+}
+#signatureValue {
+  margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
+  text-align: center;
+  font-size: 1.5rem;
+}
+#signHere {
+  border-top: #000000 solid 6px;
+  margin: 0%;
+  padding: 0% 25px;
+  text-align: center;
+}
+#detailsContainer {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+.sillyBar {
+  width: auto;
+  height: auto;
+  background-color: #000000;
+  border: 3px solid black;
+  border-radius: 8px;
+  align-self: center;
+  display: flex;
+  gap: 3px;
+}
+.sillyValue {
+  position: relative;
+	width: calc(100% / 10);
+	height: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+.sillyValue:first-child {
+  border-radius: 5px 0px 0px 5px;
+}
+.sillyValue:last-child {
+  border-radius: 0px 5px 5px 0px;
+}
+#titleValue, #DtitleValue {
   grid-area: 1 / 1 / 2 / 3;
-  font-size: min(max(3vmax, 4vmin), 2rem);
+  font-size: 2rem;
   margin: 0% auto 0% auto;
   height: max-content;
   text-align: center;