#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; font-style: normal; } .sans-bold { /* TODO: bold not working */ font-family: "Comic Neue", serif; font-weight: 700; font-style: normal; } .yellowTail { font-family: "Yellowtail", serif; 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; } .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; } .on { background-image: url(/assets/scribble_32x32.png); } .off { background-image: none; background-color: #FFFFFF; } .sillyValue:first-child { border-radius: 5px 0px 0px 5px; } .sillyValue:last-child { border-radius: 0px 5px 5px 0px; } #titleValue { grid-area: 1 / 1 / 2 / 3; font-size: min(max(3vmax, 4vmin), 2rem); margin: 0% auto 0% auto; height: max-content; text-align: center; }