aaaah

web/style.css

@@ -1,12 +1,6 @@
-::root{
-    
-}
-
 :root{
   /* --spot-color-1: #53018e; */
-  --spot-color-1: #000;
-  --baseline: 5mm;
-  --margin-left: 10mm;
+  --spot-color-1: #60f;
 }
 
 @font-face {
@@ -53,39 +47,36 @@
   font-style: oblique;
 }
 
+
 body{
   font-family: worksans;
-  text-align: center;
   background-color: #000;
   color: #fff;
-  max-width: 30rem;
+  max-width: 40rem;
   margin: 2rem auto;
   line-height: 1.3;
   letter-spacing: 0.1px;
 }
+
 img{
-  max-width: 80vw;
-  margin: 10vw 0;
+  width: 100%;
+  margin: 1rem 0;
   z-index: -3;
 }
 ::selection{
-  background-color: rgb(106, 0, 255);
+  background-color: var(--spot-color-1);
   color: #fff;
 }
-
-html, body {
-  margin: 0;
-  padding: 0;
-}
 body {
   background: #000;
   background: rgba(0, 0, 0, 1);
+  color: #fff;
   overflow-x: hidden; 
 }
 
 a{
   text-decoration: none;
-  color: #000;
+  color: var(--spot-color-1);
 }
 
 blockquote{
@@ -110,39 +101,25 @@ blockquote{
   line-height: 1.1;
   white-space: pre-wrap; 
 }
-#contenteo{
-  font-family: 'worksans';
-  line-height: 1.3;
-  font-size: 12px;
-  letter-spacing: -0.1px;
-  line-height: var(--baseline);
-}
 figure{
-  margin: 5mm 0;
+  margin: 0;
 }
 .full-image, .centered-image, .centered-text{
-  break-before: right;
-  height: 186mm;
-  width: 133mm;
-  margin: -13mm 0 0 -30mm;
+  height: 20rem;
+  width: 100%;
+/*   margin: -13mm 0 0 -30mm; */
   position: relative;
 }
 .full-image figure{
   margin: 0;
 }
 .full-image figcaption{
-  position: absolute;
-  bottom: 15mm;
-  left: 30mm;
   z-index: 10;
-  padding-right: 20mm;
 }
 .white-caption + figcaption{
   color: #fff;
 }
 .full-image img{
-  height: 186mm;
-  width: 133mm;
   object-fit: cover;
 }
 
@@ -152,19 +129,16 @@ img{
 
 h1,h2,h3,h4,h5,h6{
   text-transform: uppercase;
+  padding-top: 0rem;
   font-family: 'Consolation';
-  font-size: 1.2em;
-  line-height: 1;
-  /* color: var(--spot-color-1); */
+  font-size: 3.5em;
+  line-height: 0.8;
 }
 
 h1{
   font-size: 1.8rem;
   break-after: page;
-  /* background-color: var(--spot-color-1); */
   color: #fff;
-  /* height: 190mm;
-  width: 133mm; */
   margin: 0;
   padding: 0;
 }
@@ -172,6 +146,9 @@ h1#colophon{
   break-after: unset;
   margin-bottom: 25mm;
 }
+h2{
+  color: var(--spot-color-1);
+}
 h6{
   font-size: 3rem;
   break-before: right;
@@ -183,6 +160,10 @@ h6{
   padding: 86mm 10mm 0;
   text-align: center;
 }
+li{
+  list-style: none;
+  color: #fff;
+}
 ol, ul{padding: 0;}
 div#licence ol, div#licence ul{
   padding-left: 5mm;
@@ -196,7 +177,6 @@ section{
 
 .section{
   break-before: left;
-  page: section;
 }
 
 @media print{
@@ -254,4 +234,11 @@ section{
 }
 .yt-tarot-images{
   margin-top: 29.5mm;
+}
+
+@media only screen and (max-width: 767px) {
+  body{ 
+    max-width: calc(100% - 2rem);
+    margin: 2rem 1rem;
+  }
 }