@font-face {
  font-family: 'Louise';
  src: url('Louise-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

header {
  width: 100%;
  text-align: left;
  margin: 20px; /* Reset margin */
  padding: 0px; /* Reset padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 50px;
}


.header-logo {
  width: 300px;
  height: auto;
}

.header-logo:hover{
  scale: 1.1;
  rotate: 5deg;
  filter: hue-rotate(10deg);
}

.menu {
  margin: 20px;
  padding: 20px;
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 50px;
  margin: 0;
  padding: 0;
}

.menu ul li {
  margin: 0;
  padding: 0;
}

.menu ul li a {
  text-decoration: none;
  color: #001c64;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: 1.5em;
}

.menu ul li a:hover {
  color: white;
  scale: 1.1;
  text-shadow: 0 0 10px #ff35a8, 0 0 20px #ff35a8, 0 0 30px #ff35a8, 0 0 40px #ff35a8, 0 0 50px #ff35a8, 0 0 60px #ff35a8, 0 0 70px #ff35a8;
  transform: scale(1.1) rotate(5deg); /* Add rotation */
  transition: transform 0.3s ease; /* Smooth transition */
}

body {
  margin: 0;
  color: #001c64;
  letter-spacing: 0.010pt;
  padding: 20px;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
  background-image: url('bg-placeholder.png'); /* Set the background image */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Create three equal columns */
  gap: 20px; /* Space between columns */
  align-items: flex-start;
  justify-content: left;
  padding: 20px;
  border-color: #ff35a8;
  border-style: dotted;
  border-radius: 20px;
  border-width: 5px;
  background-image: url('bg-white.gif');
  background-size: contain;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center; 
  padding: 10px;
}

.column a {
display: flex;
justify-content: center;
width: 100%; 
}


.column h2, .column ul, .column p {
  text-align: left; 
}

.column ul {
  padding-left: 20px; 
  align-items: left;
}

.column ul li {
  list-style: none;
  margin-bottom: 10px; 
  align-items: left;
}

.column ul li a {
  color: #001c64;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: 1em;
}

.column ul li a:hover {
  color: #ff48b0;
}

.column-two img {
  max-width: 100%; /* Ensure the image does not exceed the column width */
  height: auto; /* Maintain aspect ratio */
  width: 300px; /* Set a specific width for the images */
}

.column-two img[src="3.png"] {
  max-width: 100%; /* Ensure the image does not exceed the column width */
  height: auto; /* Maintain aspect ratio */
  width: 600px; /* Set a specific width for the image */
}

.column-two img[src="photobooth-preview.png"] {
  max-width: 100%; /* Ensure the image does not exceed the column width */
  height: auto; /* Maintain aspect ratio */
  width: 500px; /* Set a specific width for the image */
}

.column-two img[src="6.png"] {
  max-width: 100%; /* Ensure the image does not exceed the column width */
  height: auto; /* Maintain aspect ratio */
  width: 600px; /* Set a specific width for the image */
}

img[src="7.png"] {
  max-width: 100%; /* Ensure the image does not exceed the container width */
  height: auto; /* Maintain aspect ratio */
  width: 500px; /* Set a specific width for the image */
  display: block; /* Ensure the image is treated as a block element */
  margin: 0 auto; /* Center the image horizontally */
}

.column-two img[src="7.png"] {
  max-width: 100%; /* Ensure the image does not exceed the column width */
  height: auto; /* Maintain aspect ratio */
  width: 600px; /* Set a specific width for the image */
}

img[src="10.png"] {
  max-width: 100%; /* Ensure the image does not exceed the container width */
  height: auto; /* Maintain aspect ratio */
  width: 500px; /* Set a specific width for the image */
  display: block; /* Ensure the image is treated as a block element */
  margin: 0 auto; /* Center the image horizontally */
}

h1{
  color: #ff35a8;
  font-family: 'Louise', serif;
  font-size: 3em;
  margin-bottom: 0;
}

h2{
  font-weight: 600;
  font-style: italic;
  font-size: 1.3em;
  margin-bottom: 0;
  padding: 20px;
}

p {
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  color: #001c64;
  margin-top: 0px;
}

.zine-cover{
  width: 50%;
  height: auto;
}

.zine-cover:hover{
  scale: 1.1;
  rotate: 5deg;
  box-shadow: 0 0 10px #fbff5f, 0 0 20px #fbff5f, 0 0 20px #fbff5f;
}

.photobooth-preview{
  width: 100%;
  height: auto;
}
.photobooth-preview:hover{
  scale: 1.1;
  rotate: -5deg;
  box-shadow: 0 0 10px #fbff5f, 0 0 20px #fbff5f, 0 0 20px #fbff5f;
}

footer{
  justify-content: center;
  align-items: center; 
  mix-blend-mode: color-dodge;
  margin-left: 20px;
  padding-top: 20px;
}

.container-section-zine {
  display: column;
  align-items: flex-start;
  justify-content: left;
  padding: 20px;
  border-color: #ff35a8;
  border-style: dotted;
  border-radius: 20px;
  border-width: 5px;
  background-image: url('bg-white.gif');
  background-size: cover;
  margin-top: 50px;
}

.column-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Create two equal columns */
  gap: 20px; /* Space between columns */
  padding: 20px;
}

.column-two p {
  margin: 0;
  padding: 20px;
}

hr.dashed {
  border-top: 3px dashed #5ec8e5;

}

#distributing-riso p{
  padding: 20px;
}

#the-riso-process p{
  padding: 20px;
}

#riso-colors p{
  padding: 20px;
}

#ending {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically if needed */
  text-align: center; /* Center text within the element */
  padding: 20px;
  font-size: 30px;
}