html {
	line-height: 1.4;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
}

body {
    font-family: 'QuicksandRegular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  margin: 40px auto;
  padding: 0 10px;
  border: 0px solid grey;
  background-color: #ffffff;
  max-width: 650px;
  height: 100%;
  background-image: url("/zap/wallpaper/g02.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


zzzbody {
    font-family: 'QuicksandRegular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  margin: 40px auto;
  padding: 0 10px;
  border: 0px solid grey;
  background-color: #336699;
  max-width: 650px;
  height: 100%;
}


blockquote {
  font-style: italic;
  color: #555;
  border-left: 4px solid #ccc;
  margin: 1.5em 0;
  padding: 0.5em 1em;
  background: #f9f9f9;
}

.page-wrap {
  max-width: 600px;
  margin: 5px auto;
  padding: 14px;
  border: 5px green;
  border-radius: 20px;
  background-color: white;
}


header {
	text-align: center;
	
}


.banner {
  display: flex; 
  gap: 10px; 
  align-items: center;
}

.banner h1 {
  font-family: 'QuicksandRegular', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'QuicksandRegular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

nav {
	margin: 5px auto;
	padding: 9px;
	background-color: #f6f6f6;
	border-top: 1px solid black;
	border-bottom: 1px solid;
	border-bottom-color: #e2e2e2;
	border-top-color: #e2e2e2;
	font-family: 'QuicksandRegular', sans-serif;
}


p {
	margin-left: 7px;

}

blockquote {
	font-style: italic;
}


figcaption {
	font-style: italic;
	text-align: center;
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #666;
}

.highlight {
  background-color: #e6d9f2;
  color: #2b1641; 
  padding: 0.2em 0.4em;
  border-radius: 7px;
}


.flex-row {
  display: flex;
  align-items: center; 
  gap: 1rem;           
}


.recipe {
	list-style: none;
  }

.meme {
  padding-top: 15px;
}

img[src$=".jpg"]  {
	border-radius: 5%;
	max-width: 100%;
	  height: auto;
		display: block;
  margin-left: auto;
  margin-right: auto;
}

img[src$=".jpeg"]  {
	border-radius: 5%;
	max-width: 100%;
	  height: auto;
		display: block;
  margin-left: auto;
  margin-right: auto;
}

img[src$=".JPG"]  {
  border-radius: 5%;
  max-width: 100%;
	height: auto;
	  display: block;
  margin-left: auto;
  margin-right: auto;
}

img[src$=".png"] {
	border-radius: 3%;
}

img[src$=".PNG"] {
  border-radius: 3%;
}

 .centering {
	display: flex;
	justify-content: center;
	align-items: center;
  }

 .zzcentering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* optional: full page height */
  }



li {
	color: #000000;
	margin-bottom: .5em; 
	padding-left: .5em;

  }

  .stars-yellow {
	list-style: none;
  }

  .stars-yellow li::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: -2em;
	margin-right: 0.5em;
	background-image: url('data:image/svg+xml;utf8,<svg fill="gold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.901 1.468 8.252L12 18.896l-7.404 4.563 1.468-8.252L.001 9.306l8.331-1.151z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
  }
  
  
  .stars-purple {
	list-style: none;
	padding-left: 2em;
  }
  
	.stars-purple li::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: -2em;
	margin-right: 0.5em;
	background-image: url("data:image/svg+xml;utf8,<svg fill='purple' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.901 1.468 8.252L12 18.896l-7.404 4.563 1.468-8.252L.001 9.306l8.331-1.151z'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
}


.pageupdate {
	display: flex;
	justify-content: center;
	align-items: center;justify-content: center;
  border: 1px solid #006699;      
  padding: 1em;
  background-color: #f9f8f3;
  text-align: center;            
  max-width: 300px;
  margin: 1em auto;              /* Center the box horizontally */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

						/* FOOTER */
		

hr {
  border: none;
  height: 1px;
  background: #ccc;
}

		
footer {
  text-align: center;
  padding: 20px;
  background-color: #f6f6f6;
  margin-top: 20px; 
  border-radius: 8px;
}

footer div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

				  /* COLUMNS */


.columns {
  display: flex;
}

.column1 {
  flex: 1; /* Takes up half the space */
  padding: 10px;
  border-radius: 7px;
  background-color: #ffffff;
}

.column2 {
  flex: 1; /* Takes up the other half */
  padding: 10px;
  background-color: #ffffff;
  border-radius: 7px;
}

				/* FONTS */



@font-face {
  font-family: 'Merriweather';
  src: url('/zap/fonts/merriweather/Merriweather-Regular.woff') format('woff'),
  url('/img/zap/merriweather/Merriweather-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Merriweather-Light';
  src: url('/zap/fonts/merriweather/Merriweather-Light.woff') format('woff'),
  url('/zap/fonts/merriweather/Merriweather-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'QuicksandRegular';
  src: url('/zap/fonts/Quicksand/Regular.woff2') format('woff2'),
	   url('/zap/fonts/Quicksand/Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Livingstone';
  src: url('/zap/fonts/Livingstone.woff2') format('woff2'),
	   url('/zap/fonts/Livingstone.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* LOVE */
@font-face {
  font-family: 'Fantasia';
  src: url('/zap/fonts/Fantasia.woff2') format('woff2'),
	   url('/zap/fonts/Fantasia.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* meh */
@font-face {
  font-family: 'KellsSD';
  src: url('/zap/fonts/KellsSD.woff2') format('woff2'),
	   url('/zap/fonts/KellsSD.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FunkyBird';
  src: url('/zap/fonts/FunkyBirdRegular.woff2') format('woff2'),
	   url('/zap/fonts/FunkyBird.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}