/* main.css */
 @import url(https://db.onlinewebfonts.com/c/ef6bdf5ef216552c7e9869841e891ca0?family=Arial+Rounded+MT+Bold); 
 @import url(https://db.onlinewebfonts.com/c/af37a17ad53d1410778d941a0951508b?family=Arial+Rounded+MT+Std); 
 @import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
 @import url('https://fonts.googleapis.com/css?family=Mynerve');
 @import url('https://fonts.googleapis.com/css?family=Hachi Maru Pop');

 body {
  
	  background: linear-gradient(to bottom, #fefeff, #ffd9d9);
	  background-repeat: no-repeat; /* prevent tiling */
	  background-attachment: fixed; /* optional: stays in place on scroll */
	  background-size: cover;       /* stretch gradient to fill page */
	  
	  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
	  font-size: 20px; 
	  /*  font-size: clamp(20px, 2vw, 30px); */ 
	 
	  margin: 0;
	  padding-top: 125px; /* pushes everything down, including h1 */
	  padding-bottom: 25px;
	}
	
	hr {
	  width: 90%;            /* 90% of parent */
	  max-width: 900px;      /* match flex container max-width */
	  margin: 20px auto;     /* center horizontally with vertical spacing */
	  display: block;        /* ensures margin auto works */
	}
	
	h1 {
	  color: #f5f5e0;                   /* text color inside */
	  -webkit-text-stroke: 1px black; /* outline for WebKit browsers */
	  text-stroke: 1px black;         /* standard property (limited support) */
	  text-align: center;             /* optional: center the text */
	  text-shadow: 2px 2px 0.1px black;
	  padding-bottom: 70px; 
		}
		
	h1 .subtitle {
	  display: block;          /* subtitle on its own line */
	  color: black;          /* optional, can set different color */
	  -webkit-text-stroke: 0; /* remove outline */
	  text-stroke: 0;          /* remove outline */
	  text-shadow: none;       /* remove shadow */
	  font-size: clamp(20px, 2vw, 30px);         /* override size if desired */
	}
	
	/* less padding under title when on mobile */
	@media (max-width: 480px) {
	  h1 {
		padding-bottom: 50px;
		 }
	}
		

	.centered {
	  display: flex;
	  flex-direction: column;
	  justify-content: center; /* vertical centering of all content */
	  align-items: center;     /* horizontal centering of all content */
	  text-align: center;
	  min-height: 100vh;       /* ensures vertical centering even on tall screens */
	}

	a { /* adjusts for links */
	  text-decoration: none;
	  display: block;
	}
	
	/* flex boxes items etc */
	
	/*alternating colors */
	
	/*
	
	.flex-section .item:nth-child(odd) {
	  background: magenta; 
	}

	.flex-section .item:nth-child(even) {
	  background: black; 
	}
	
	*/

	

	.flex-section .container {
	  display: flex;             
	  flex-wrap: wrap;           
	  width: 100%;               
	  justify-content: center;   /* horizontal centering of items */
	  align-items: center;      /*  match heights of siblings */
	  margin: 0;
	}


	.flex-section .item	{ /*used for main page */
	  flex: 0 0 90%;            
	  display: flex;             
	  justify-content: center;   
	  align-items: center;       
	  text-align: center;        
	  height: auto;              /* allow stretching */
	  margin-bottom: 75px;	  
	}
	
	
	.flex-section .item1 { /*used for sub pages. less margin and aligned to top*/
	  flex: 0 0 90%;            
	  display: flex;             
	  justify-content: center;   
	  align-items: top;       
	  text-align: center;        
	  height: auto;              /* allow stretching */
	  margin-bottom: 50px;   
	}
	
	.flex-section .item1 pre,
	.flex-section .item pre {
	  aspect-ratio: auto;    /* remove the forced 16:9 ratio */
	  max-height: none;      /* remove max height */
	  width: 100%;           /* optional: make it span full item width */
	  height: auto;          /* adjust height based on content */
	}

	/* This is for two columns*/

	@media (min-width: 480px) {
		
	  .flex-section .container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 90px;                /* fixed gap between items */
		max-width: 900px;         /* ✅ must fit 2 items + gap */
		margin-left: auto;
		margin-right: auto;
	  }

	  .flex-section .item1,
	  .flex-section .item {
		flex: 0 0 405px;          /* each item width */
		max-width: 405px;
	  }
	}
	
	.flex-section img {
	  width: 100%;
	  height: 100%;              /* fill container fully */
	  object-fit: contain;         /* scale/crop image to fit 16:9 box */
	  display: block;
	}
	
	.top-bar {
	  width: 100%;
	  height: 75px;
	  background: #ffd9d9;
	  position: fixed;       /* fixed at top of viewport */
	  top: 0;
	  left: 0;
	  z-index: 999;          /* keeps it above other content */

	  display: flex;         /* enable flexbox */
	  align-items: center;   /* vertical centering */
	  justify-content: center; 
	  padding: 0 0px;       /* spacing on sides */
	  gap: 35px;             /* spacing between items */
	  
	  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	}
	
	
	

	
	/* Base style for plink (pink link) with gradient */
	a.plink {
	  display: block;
	  color: #333;
	  padding: 10px 16px;
	  text-decoration: none;
	  border-radius: 8px;
	  background: linear-gradient(to bottom, #fefeff, #ffd9d9); /* gradient added */
	  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	  transition: all 0.2s ease;
	}

	/* Hover/focus effect */
	a.plink:hover,
	a.plink:focus {
	  background: linear-gradient(to bottom, #ffd9d9, #ffb3b3); /* slightly stronger pink on hover */
	  color: #000;
	  border-color: #ff8080;
	  box-shadow: 0 0 8px rgba(255, 128, 128, 0.6);
	  outline: none;
	}

	/* --- SIDE PANEL STYLES --- */
	.sidepanel  {
	  width: 0;
	  position: fixed;
	  z-index: 1000;
	  height: 100%;
	  top: 0;
	  left: 0;
	  background-color: rgba(17, 17, 17, 0.95); /* 95% transparent */
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 60px;
	}

	.sidepanel a {
	  padding: 8px 8px 8px 32px;  /* keep top/bottom padding */
	  text-decoration: none;
	  font-size: 25px;
	  color: white;
	  display: block;
	  transition: 0.3s;
	  text-align: center;          /* center text horizontally */
	}

	.sidepanel a:hover {
	  color: #ffd9d9;
	}


	.sidepanel .closebtn {
	  position: absolute;
	  top: 15px;                  
	  left: 50%;                /* start at horizontal center */
	  transform: translateX(150px); /* move px to the right from center */
	  font-size: 36px;
	  color: white;
	  cursor: pointer;
	}
	
	pre {
	  font-family: 'Arial Rounded MT Std', Arial, sans-serif;
	  width: 85%;
	  max-width: 100%;
	  white-space: pre-wrap;
	  overflow-wrap: normal;
	  word-break: normal;
	  font-size: 18px; 
	  text-align: left;
	  margin: 0 auto;             /* <-- centers the pre horizontally */
	  
	  -webkit-text-size-adjust: none; /*stops text size changing automaticall on mobile */
	  text-size-adjust: none;
	}

	/* Only apply curved corner to images with class="photo" */
	img.photo {
	  border-radius: 20px;
	}

	iframe{
	  border-radius: 25px;
	  overflow: hidden; /* Ensures rounded corners clip the video */
	  display: block;   /* Avoids inline spacing issues */
	  width: 150%; /*idk why this w/h works */
	  height: 150%;
	}
	
	/* ===== Wobble Animations ===== */
	
	/* Top-left wobble */
	.top-left.wobble {
	  position: absolute;
	  width: 50px;
	  height: 50px;
	  top: 0;
	  left: 0;
	  animation: tilt-top 1s infinite alternate ease-in-out;
	}

	/* Bottom-right wobble */
	.bottom-right.wobble {
	  position: absolute;
	  width: 50px;
	  height: 50px;
	  bottom: 0;
	  right: 0;
	  animation: tilt-bottom 1s infinite alternate ease-in-out;
	}

	/* New: Bottom-right-1 wobble (tilt in place) */
	.bottom-right-1.wobble {
	  position: absolute;
	  width: 50px;
	  height: 50px;
	  bottom: 0;
	  right: 0;
	  animation: tilt-bottom-1 1s infinite alternate ease-in-out;
	}

	/* Keyframes for top-left */
	@keyframes tilt-top {
	  0%   { transform: translate(-10%, -49%) rotate(-15deg); }
	  100% { transform: translate(-10%, -44%) rotate(5deg); }
	}

	/* Keyframes for bottom-right */
	@keyframes tilt-bottom {
	  0%   { transform: translate(-20%, 30%) rotate(10deg); }
	  100% { transform: translate(-20%, 35%) rotate(-10deg); }
	}

	/* Keyframes for bottom-right-1 (idk why i had to make a seperate keyframe for the main page, it doesn't line up right) */
	@keyframes tilt-bottom-1 {
	  0%   { transform: translate(-30%, -110%) rotate(-10deg); }
	  100% { transform: translate(-35%, -110%) rotate(5deg); }
	}

	/* ===== End Wobble Animations ===== */

	/* ===== Polaroid CSS ===== */

	.flip-card {
	  background: transparent;
	  width: 334px;
	  height: 405px;
	  perspective: 1000px;
	}

	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.6s;
	  transform-style: preserve-3d;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	}

	.flip-card:hover .flip-card-inner {
	  transform: rotateY(180deg);
	}

	.flip-card-front,
	.flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	}

	.flip-card-front {
	  background: snow;
	  color: black;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}

	/* CSS */
	.flip-card-back {
	  background: snow;
	  color: black;
	  transform: rotateY(180deg);
	  font-family: 'Mynerve', sans-serif; /* default */
	}

	/* any descendant element whose language is Japanese */
	.flip-card-back :lang(ja) {
	  font-family: 'Hachi Maru Pop', sans-serif;
	}


	/* All images inside the front */
	.flip-card-front img {
	  width: 296px;
	  height: 296px;
	  margin: 20px;        /* equal spacing on all sides */
	  margin-bottom: 0px;
	  object-fit: cover;
	}

	.flip-card-front p {
	  flex: 1;             
	  display: flex;
	  align-items: center; 
	  justify-content: center;
	  font-size: 25px;
	  font-family: 'Permanent Marker';
	  margin: 0;
	}
	}
	
	/* ===== End Polaroid CSS ===== */
	
	
	/* Container grid for polaroids */
	
	
	
	.grid {
	  display: grid;
	  width: 480px;
	  height: 480px;
	  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
	  place-items: center; /* centers items both horizontally and vertically */
	  margin: 0 auto;      /* optional: center the grid on page */
	}

	/* Grid items */
	.grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, 480px); /* each column is 480px */
	  grid-auto-rows: 480px;                          /* each row is 480px */
	  place-items: center;
	  gap: 0;         /* no gaps, unless you want spacing */
	  margin: 0 auto; /* center the whole grid */
	  /* border: 2px dashed red; /* outlines the grid container */
	}


	/* Grid items */
	.grid-item {
	  max-width: 100%;
	  max-height: 100%;
	}

	/* Mobile: stack vertically */
	@media (max-width: 480px) {
	  .grid {
		grid-template-columns: 1fr; /* one item per row */
	  }
	}

	/*grid end */
	
}
}