/* This is a giant mess of a css. I'm new to coding so be patient with me. */

/* ===== Imports ===== */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=IM+Fell+Double+Pica&family=Tagesschrift&display=swap');

/* Font utility classes */
.font-bungee {
  font-family: 'Bungee', sans-serif;
}

.font-doublepica {
  font-family: 'IM Fell Double Pica', serif;
}

.font-tagesschrift {
  font-family: 'Tagesschrift', sans-serif;
}

/* Set defaults for the whole site */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("SiteBG.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: 'IM Fell Double Pica', serif;
  color: #f0f0f0;
}

/* ===== Main Theme ===== */
:root {
	--background-color: #003B55; /* Navy Blue for menus, back buttons, etc. */
	--background-color-opacity1: #003B55FC; /* For Navbar & Other */
	--background-color-opacity2: #633758CF; 
	--innerbox-color1: #FFFFFFCC; /* Main Boxes */
	--innerbox-color2: #FFFFFFBF;
	--accentbox-color: #F5C6D296;
	--accentbox-border: #D6678438;
	--dark-gradient: linear-gradient(180deg, var(--bg-color-opacity1) 50%, var(--bgcolor-opacity2));
	
	/* Text */
	--title-color: #450214;
	--text-color: #720421;
	--light-text: #FFFFFF; /* White text on dark backgrounds */
	--link-color: #CB063B;
	--link-hover: #FB8DAB;
	--link-visited: #BB1669;
	--text-shadow: #72042160; /* Text color with opacity */
	--primary-font: "IM Fell Double Pica" monospace;
	--secondary-font: "Tagesschrift" monospace;
	--tertiary-font: "Bungee" monospace;
	--text-effect: 1px 1px var(--shadow-color1), -1px -1px var(--shadow-color2);
	--border-effect: 1px 1px var(--border-color1), -1px -1px var(--border-color2);
	--border-hover: 2px 0px var(--border-color1), -2px -0px var(--border-color2);
	
	/* Boxes */
	--shadow-color1: #FF3B5599;
	--shadow-color2: #007E5999;
	--border-color1: #FF3B55;
	--border-color2: #007E59;
	
	/* Misc */
	--bg-img: url(https://postimg.cc/K1QY7V4);
	
	/* Images */
	
	
	/* Art Showcase */
	--showcase-img1: url(https://postimg.cc/7fnBVM);
	--showcase-title1: "Rom's Willing Visitor";
	--showcase-caption1: "It's pretty chill in here actually.";
	
	--showcase-img2: url(https://postimg.cc/JGL6ZY9P);
	--showcase-title2: "Midna's Couch";
	--showcase-caption2: "I wonder if you could ask and use it as a beanbag...";
	
	--showcase-img3: url(https://postimg.cc/fkXq3QgV);
	--showcase-title3: "A Relaxing Shower";
	--showcase-caption3: "Commission for funnyman on Eka's";
	
	--showcase-img4: url(https://postimg.cc/4HzWjph6);
	--showcase-title4: "Lily is Hungry";
	--showcase-caption4: "Crop of a comic I did of Lily because I have problems.";
	
	--showcase-img5: url(https://postimg.cc/fS4HH8kW);
	--showcase-title5: "Packed Appointment";
	--showcase-caption5: "Pokemon Girl Preds? Always the best.";
	
	--showcase-img6: url(https://postimg.cc/Hj2Z09d);
	--showcase-title6: "Marceline Gets an Offer";
	--showcase-caption6: "My friend paunchee told me to include this one so I did.";
	
}

/* ===== Animations ===== */
/* Floating */
.floating { animation-iteration-count: infinite; animation-name: floatingani; animation-duration: 5s; position: relative; bottom: 5px; }
@keyframes floatingani { 50% { transform: translateY(10px); } }

.floatingrotate { animation-iteration-count: infinite; animation-name: floatingrotate; animation-duration: 5s; position: relative; bottom: 5px; }
@keyframes floatingrotate { 50%  { transform: translateY(10px); transform: rotate(5deg); } }
@keyframes rotation       { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

/* ===== Text Stuff ===== */

h1, h2, h3, h4 { text-shadow: var(--text-effect); color: var(--title-color); font-weight: 100; }
h1 { font-family: var(--secondary-font); margin: 10px 0; font-size: 2.5em; letter-spacing: 1px;  }
h2 { font-family: var(--tertiary-font); font-size: 27px;  }  
h3 { font-family: var(--secondary-font); font-size: 23px; margin: 10px 0; }
h4 { font-family: var(--secondary-font); font-size: 17px; margin: 8px 0px; }

/* === /home - Slideshow Gallery === */
#slideshowbox { filter: drop-shadow(3px 3px var(--border-color1)) drop-shadow(-3px -3px var(--border-color2)); }
#slideshowbox > .coolheader { max-width: 670px; margin: auto; box-shadow: none; }
.slideshow { border-radius: 0 0 10px 10px; position: relative; max-width: 670px; overflow: hidden; height: 350px; margin: auto; padding: 0 1px; background: var(--bg-color); }

.mySlides { display: none; height: 350px; overflow: hidden; }
.mySlides img { width: 100%; height: 100%; object-fit: cover; }

.mySlides:nth-child(1) img { content: var(--slideshow-img1); }
.column:nth-child(1)   img { content: var(--slideshow-img1); }
.mySlides:nth-child(1) h3:after { content: var(--slideshow-title1); }
.mySlides:nth-child(1) p:after  { content: var(--slideshow-caption1); }

.mySlides:nth-child(2) img { content: var(--slideshow-img2); }
.column:nth-child(2)   img { content: var(--slideshow-img2); }
.mySlides:nth-child(2) h3:after { content: var(--slideshow-title2); }
.mySlides:nth-child(2) p:after  { content: var(--slideshow-caption2); }

.mySlides:nth-child(3) img { content: var(--slideshow-img3); }
.column:nth-child(3)   img { content: var(--slideshow-img3); }
.mySlides:nth-child(3) h3:after { content: var(--slideshow-title3); }
.mySlides:nth-child(3) p:after  { content: var(--slideshow-caption3); }

.mySlides:nth-child(4) img { content: var(--slideshow-img4); }
.column:nth-child(4)   img { content: var(--slideshow-img4); }
.mySlides:nth-child(4) h3:after { content: var(--slideshow-title4); }
.mySlides:nth-child(4) p:after  { content: var(--slideshow-caption4); }

.mySlides:nth-child(5) img { content: var(--slideshow-img5); }
.column:nth-child(5)   img { content: var(--slideshow-img5); }
.mySlides:nth-child(5) h3:after { content: var(--slideshow-title5); }
.mySlides:nth-child(5) p:after  { content: var(--slideshow-caption5); }

.mySlides:nth-child(6) img { content: var(--slideshow-img6); }
.column:nth-child(6)   img { content: var(--slideshow-img6); }
.mySlides:nth-child(6) h3:after { content: var(--slideshow-title6); }
.mySlides:nth-child(6) p:after  { content: var(--slideshow-caption6); }

/* ===== PAGE LAYOUT SPECIFIC CSS ===== */
/*index*/

 
/* Full-page flex centering */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0f0f0;
  font-family: 'IM Fell Double Pica', serif;
}

/* Layout container */
.landing-container {
  display: flex;
  align-items: center;
  gap: 40px;
  transform: translateX(-10%); /* nudge whole container left */
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Warning box */
.warning-box {
  background: #222;
  padding: 32px;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  animation: float 3s ease-in-out infinite;
  text-align: center;
}

.warning-box h1 {
  font-family: 'Bungee', sans-serif;
  color: #ff4444;
  margin-bottom: 16px;
}

.warning-box ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  font-family: 'Tagesschrift', sans-serif;
  text-align: left;
}

.warning-box ul li {
  margin: 10px 0;
  padding-left: 1.2em;
  position: relative;
}

.warning-box ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ff4444;
}

/* Button */
.continue-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 20px;
  background: #ff4444;
  color: #fff;
  font-family: 'Bungee', sans-serif;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
}

.continue-btn:hover {
  background: #ff6666;
}

/* Floating image */
.floating-image img {
  max-width: 200px;
  border-radius: 12px;
  animation: float 3s ease-in-out infinite;
  
}

/* Flex container for warning box + image */
.container {
  display: flex;
  align-items: flex-start; /* align top of items */
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap; /* allow wrapping on small screens */
}

/* Let warning box shrink if needed */
.warning-box {
  flex: 1 1 300px;
}

/* Let image shrink and scale */
.side-image img {
  width: 100%;
  max-width: 350px;  /* adjust for large screens */
  flex: 1 1 200px;
  border-radius: 8px;
}
/* Responsive tweaks */
@media (max-width: 900px) {
  .container {
    flex-direction: column; /* stack vertically */
    align-items: center;
  }

  .warning-box,
  .side-image img {
    max-width: 80%; /* shrink to fit smaller screens */
  }

  .side-image {
    margin-top: 1rem;
  }
}