start of comm page

comms.css

@@ -0,0 +1,70 @@
+@import url(style.css);
+
+:root {
+  --img-width: 1050px;
+  --img-height: 875px;
+}
+
+
+main {
+    max-width: calc(var(--img-width) + 150px);
+}
+
+#examples {
+  height: var(--img-height);
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  filter: drop-shadow(0 0 30px var(--glow-col));
+}
+
+#examples, #terms {
+  width: var(--img-width);
+  padding: 1.5em;
+  box-sizing: border-box;
+  margin: 1em auto;
+
+  border: 3px solid var(--glow-col);
+  border-radius: 1em;
+}
+
+#examples section {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+h2::before, h2::after {
+  content: none;
+}
+
+#examples section > * {
+  background: hsla(320deg, 40%, 20%, 60%);
+  font-size: 200%;
+  font-weight: 500;
+  margin: 0;
+}
+
+#terms { background: hsla(0deg, 0%, 100%, 75%); }
+
+#terms {
+  text-align: left;
+
+  color: black;
+  text-shadow: none;
+  font-weight: 400;
+}
+
+details {
+  margin-top: 1em;
+}
+
+summary > * {
+  display: inline;
+}
+
+@media (prefers-contrast: high), (prefers-color-scheme: dark) {
+  #terms { background: hsla(0deg, 0%, 0%, 65%); }
+  #terms { color: white; }
+}