body {
  margin: 0;
  padding: 0;
  font-family: 'Cutive Mono', monospace;
  background: #fff;
  color: #111;
  font-size: 20px;
  line-height: 1.4;
}

h1, h2 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.fakeh3 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  margin: 0 0 10px;
  font-size:4.5em;
}

.outro {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 2em 1em;
  border-top: 6px double #ff006e;
  border-bottom: 6px double #ff006e;
}

header {
	padding-left:25px;
	  column-count: 2;
  column-gap: 2em;
}

.credits {
	
  margin-bottom:10px;
}

header p {
	font-family:'Courier New',serif;
	font-size:.8em;
}

header h1 {
  font-size: 3em;
  letter-spacing: 0.05em;
  margin-bottom:200px;
}

.zine-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2em;
background-color: #fefefe;
background-image: 
  repeating-linear-gradient(90deg, #bbb 0 1px, transparent 1px 6px),
  repeating-linear-gradient(0deg, #bbb 0 1px, transparent 1px 6px);
background-size: 8px 8px;
      
}



.zine-section {
  width: 90%;
  max-width: 100%;
  background: #fff;
  border: 3px dashed #000;
  padding: 2em;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(var(--rotate, 0deg));
  max-height: 350px;
  overflow-y: auto;
}

.zine-section:nth-child(odd) {
  --rotate: -0.8deg;
}

.zine-section:nth-child(even) {
  --rotate: 1.2deg;
}

.taped-sticker {
	max-width:225px;
}

.taped-image {
  max-width:60%;
  position: relative;
  display: inline-block;
  padding: 0.5em;
  background: #fff;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-1.5deg);
  margin: 1em;
  border: 1px solid #ccc;
}

.taped-image img {
  display: block;
  max-width: 60%;
  height: auto;
}

/* TAPE corners */
.taped-image::before,
.taped-image::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 15px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.6) 4px,
    rgba(200, 200, 200, 0.8) 4px,
    rgba(200, 200, 200, 0.8) 8px
  );
  z-index: 2;
  transform: rotate(-10deg);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.taped-image::before {
  top: -10px;
  left: 10px;
}

.taped-image::after {
  bottom: -10px;
  right: 10px;
  transform: rotate(15deg);
}


.black {
	background-color:#212121;
	color:#ffffff  ;
}

#z1 {
		  column-count: 3;
  column-gap: 2em;
}

#z4 {
		  column-count: 2;
  column-gap: 2em;
}

#z5 {
		  column-count: 4;
  column-gap: 2em;
}


.rainbow-list {
  list-style: none;
  padding: 0;
  font-family: 'Schoolbell', cursive;
  font-size: .8em;
  text-transform:uppercase;
}

.rainbow-list li {
  margin: 3px 0;
  padding: 5px;
  font-weight: bold;
}

.rainbow-list li:nth-child(odd) {
  background-color: #000;
}

.rainbow-list li:nth-child(even) {
  background-color: #fff;
}

.rainbow-list li:nth-child(1) { color: #e63946; } /* red */
.rainbow-list li:nth-child(2) { color: #f4a261; } /* orange */
.rainbow-list li:nth-child(3) { color: #e9c46a; } /* yellow */
.rainbow-list li:nth-child(4) { color: #2a9d8f; } /* green */
.rainbow-list li:nth-child(5) { color: #457b9d; } /* blue */
.rainbow-list li:nth-child(6) { color: #7b2cbf; } /* purple */
.rainbow-list li:nth-child(7) { color: #d63384; } /* pink */
.rainbow-list li:nth-child(8) { color: #e63946; } /* red */
.rainbow-list li:nth-child(9) { color: #f4a261; } /* orange */
.rainbow-list li:nth-child(10) { color: #e9c46a; } /* yellow */
.rainbow-list li:nth-child(11) { color: #2a9d8f; } /* green */
.rainbow-list li:nth-child(12) { color: #457b9d; } /* blue */
.rainbow-list li:nth-child(13) { color: #7b2cbf; } /* purple */
.rainbow-list li:nth-child(14) { color: #d63384; } /* pink */

/* Style links inside list items */
.rainbow-list a {
  text-decoration: underline;
  font-weight: normal;
  color: inherit; /* keeps the item’s text color */
}

.rainbow-list a:hover {
  text-decoration: none;
  font-weight: bold;
}



#z7 {
	overflow:hidden;
	font-size:16px;
}

.silver {
	background-color:#e4e2e0;
	color:#212121 ;
	font-family: "Pangolin", cursive;
  font-weight: 400;
  font-style: normal;
}

.green {
	background-color:#e7f4e4;
	color:#212121 ;
	font-family: "Goudy Bookletter 1911", serif;
  font-weight: 400;
  font-style: normal;
}


.layout-notes {
  font-size: 16px;
  background: #f4f4f4;
  padding: 1.5em;
  margin: 2em;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 2em;
}


footer.outro {
  font-size: 1.5em;
  padding: 2em 1em 3em;
  text-align: center;
  background: #000;
  color: #fff;
  border-top: 8px solid;
  border-bottom: 8px solid;
  border-image: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  ) 1;
}

@media (max-width: 800px) {
header {
	padding-left:25px;
	  column-count: 1;
  column-gap: 0;
}

header h1 {
  margin-bottom:75px;
}

#z7 {
	overflow-y: auto;
}

}


@media (max-width: 600px) {
  .intro h1 {
    font-size: 2em;
  }

  .zine-section {
	  width:80%;
	  max-width:90%;
    transform: none !important;
  }
  

  
}