content upload

2026-08-08 13:48:05 +02:00
parent 72d60c5527
commit cd87f62263
7 changed files with 2463 additions and 0 deletions
@@ -0,0 +1,132 @@
+body {
+  width: 90vw;
+  max-width: 65ch;
+  margin-top: 40px;
+  margin: 0 auto; /* This centers the block */
+  line-height: 1.6;
+  background-color: #FFFFFF;
+  /* box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2); */
+  /* text-align: justify; */
+  /* hyphens: auto; */
+}
+
+html {
+    background-color: #AAAAAA;
+}
+
+.motto {
+  /* font-size: 1.5em; */
+  margin-top: 20px;
+}
+
+#mottotext {
+  width: fit-content;
+  text-align: left;
+  /* max-width: 330px; */
+  color: #555;
+  /* margin-right: 10px; */
+  margin-left: auto;
+
+}
+/* nav { */
+/*     position: sticky; */
+/*       top: 0; */
+/*       left -10px: z-index: 100; */
+/*       background-color: #00AAFF; */
+/*       height: 40px; */
+/*       padding-left: 20px; */
+/*       padding-top: 10px; */
+/*       font-size: larger; */
+/*       font-weight: bold; */
+/*       font-style: italic; */
+/* } */
+/*  */
+
+nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #bd6b4e;
+    padding: 0.6rem 1.2rem;
+    margin: 0 -1.6rem;
+    border-radius: 14px 14px 0 0;
+}
+
+
+/* Toggle wrapper */
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Labels: Human / AI */
+.toggle-label {
+  color: white;
+  font-size: 0.85rem;
+  font-weight: bold;
+  letter-spacing: 0.04em;
+  opacity: 0.6;         /* inactive label is dimmed */
+}
+
+/* Active label: Human side on human page */
+.toggle .toggle-label:first-child {
+  opacity: 1;
+}
+
+/* Active label: AI side on AI page */
+.toggle--ai .toggle-label:first-child {
+  opacity: 0.6;
+}
+.toggle--ai .toggle-label:last-child {
+  opacity: 1;
+}
+
+/* The pill track */
+.toggle-track {
+  position: relative;
+  width: 3rem;
+  height: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 999px;
+  border: 2px solid rgba(255,255,255,0.5);
+  transition: background 0.2s;
+}
+
+/* The knob */
+.toggle-knob {
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: white;
+  border-radius: 50%;
+  transition: left 0.2s;
+}
+
+
+#scene {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  display: block;
+}
+
+.page {
+  width: 90vw;
+  max-width: 65ch;
+  margin: 6vh auto 8vh;
+  padding: 0 1.6rem 2rem;
+  background: rgba(250, 246, 238, 0.86);
+  backdrop-filter: blur(7px) saturate(112%);
+  -webkit-backdrop-filter: blur(7px) saturate(112%);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  border-radius: 14px;
+  box-shadow: 0 30px 80px -40px rgba(60, 40, 20, 0.6);
+}