/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
   background-color: #2a282c;
   background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%239C92AC' fill-opacity='0.88' fill-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat: repeat;
      font-family: sans-serif;
      color: #e0dfe6;
}

.floating-kitty {
  animation: float 3s ease-in-out infinite;
  transition: transform 0.5s;
}

.floating-kitty:hover {
  transform: scale(1.1) rotate(10deg);
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.rotating-kitty {
  animation: rotate 6s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.bouncing-kitty {
  animation: bounce 3s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.wiggling-kitty {
  animation: wiggle 0.5s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 20px;
  gap: 30px
  
}

nav ul li {
  margin: 10px 20px;
}

nav ul li a {
  text-decoration: none;
  color: white; /* muted purple-brown, change as you like */
  font-family: 'Gideon Roman', serif;
  background-color: black; /* soft bubble color */
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: #d4bfb3; /* slightly darker on hover */
}

.collage-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.collage-block {
  background-color: #fff8f3;
  border: 2px solid #d4c1b1;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Gideon Roman', serif;
  box-sizing: border-box;
}

.collage-block img {
  height: 450px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 10px;
  display: block;
  transition: transform 0.3s ease;
}

.collage-block img:hover {
  transform: scale(1.03);
}

.collage-block .p2 {
  font-size: 18px;
  color: #44322f;
  margin: 10px 0;
}

.collage-block a {
  color: #a36a8d;
  text-decoration: underline dotted;
}

.collage-block.wide {
  grid-column: span 2; /* spans 2 out of the 4 columns */
}

.collage-block.wide img {
  width: 100%;
  max-height: 400px; /* Adjust this as needed */
  object-fit: cover;
}


/* Mobile styles */
@media (max-width: 768px) {
  .collage-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .collage-block {
    width: 100%;
  }

  .collage-block img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}


h1 {
  color: white;
  font-family: 'Gloock', serif;
}

h2{
  color: white;
  font-family: 'Gloock', serif;
}

.p1{
    background: rgba(0, 0, 0, 0.6);
  border: 3px double #b266ff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: inset 0 0 20px #b266ff,
  0 0 10px #b266ff,
  0 0 20px #b266ff,
  0 0 30px #ff00ff;
  font-family: 'EB Garamond', Serif;
  font-size: 18px;
  margin: 2em auto;
  max-width: 800px;
  animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
  0% {
    box-shadow:
      inset 0 0 10px #b266ff,
      0 0 15px #b266ff,
      0 0 20px #b266ff;
  }
  50% {
    box-shadow:
      inset 0 0 25px #d99eff,
      0 0 40px #d99eff,
      0 0 50px #d99eff;
  }
  100% {
    box-shadow:
      inset 0 0 10px #b266ff,
      0 0 15px #b266ff,
      0 0 20px #b266ff;
  }
}


.p2{
  background-color: #f7efe7;
  color: black;
  font-family: 'EB Garamond', serif;
  text-align: left;
}

.p3{
  background-color: #e3dcd2;
  color: black;
  font-family: 'EB Garamond', serif;
  text-align: center; /* more natural for prose/poetry */
  padding: 16px 20px; /* slightly reduced vertical padding */
  border-radius: 10px;
  border: 1px solid #d4bfb3;
  width: max-content; /* better than fit-content for cross-browser */
  max-width: 90%; /* prevents it from stretching too wide */
  margin: 20px 20px 0 20px 20px; /* top right bottom left */
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
  word-break: break-word; /* ensures long words don't overflow */
  line-height: 1.6; /* adds breathability to the text */
}

.p3 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 15px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.p3 img:hover {
  transform: scale(1.03);
}

.p4{
  background-color: #d8c8d8;
  color: black;
  font-family: 'VT323', monospace;
  text-align: center; /* more natural for prose/poetry */
  padding: 16px 20px; /* slightly reduced vertical padding */
  border-radius: 10px;
  border: 1px solid #d4bfb3;
  width: max-content; /* better than fit-content for cross-browser */
  max-width: 90%; /* prevents it from stretching too wide */
  margin: 20px 20px 0 20px 20px; /* top right bottom left */
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
  word-break: break-word; /* ensures long words don't overflow */
  line-height: 1.6; /* adds breathability to the text */
}

.writing-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 20px;
}

.writing-left {
  flex: 1 1 60%;
  min-width: 300px;
}

.writing-right {
  flex: 1 1 35%;
  min-width: 250px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.paper {
  background: rgba(0, 0, 0, 0.6);
  border: 3px double #b266ff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: inset 0 0 20px #b266ff,
  0 0 10px #b266ff,
  0 0 20px #b266ff,
  0 0 30px #ff00ff;
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  margin: 2em auto;
  max-width: 800px;
  animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
  0% {
    box-shadow:
      inset 0 0 10px #b266ff,
      0 0 15px #b266ff,
      0 0 20px #b266ff;
  }
  50% {
    box-shadow:
      inset 0 0 25px #d99eff,
      0 0 40px #d99eff,
      0 0 50px #d99eff;
  }
  100% {
    box-shadow:
      inset 0 0 10px #b266ff,
      0 0 15px #b266ff,
      0 0 20px #b266ff;
  }
}


.gallery {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 10px;
  scroll-behavior: smooth;
}

.gallery img {
  height: 200px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

.gallery2 {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 10px;
  scroll-behavior: smooth;
}

.gallery2 img {
  height: 200px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery2 img:hover {
  transform: scale(1.05);
}

.gallery3 {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 10px;
  scroll-behavior: smooth;
}

.gallery3 img {
  height: 200px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery3 img:hover {
  transform: scale(1.05);
}

.gallery4 {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 10px;
  scroll-behavior: smooth;
}

.gallery4 img {
  height: 200px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.gallery4 img:hover {
  transform: scale(1.05);
}

.caption {
  text-align: center;
  font-family: 'Gideon Roman', serif;
  color: white; /* or any color you like */
  margin-top: 5px;
}

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  
  nav ul li {
    margin: 10px 0;
  }

  nav ul li a {
    font-size: 18px; /* slightly bigger for touch screens */
    padding: 10px;
  }
   
}