:root {
  --default-font: -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --condensed: 'Bebas Neue', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --serif: 'Playfair Display', Times, "Times New Roman", serif;
  --cbm64: Michroma, sans-serif;
  --newspaper: 'Times New Roman', Times, "Times New Roman", serif;

  --dark: #434343;
  --pink: #FE027E;
  --yellow: #FFFD01;
  --rich-purple:  #54276F;
 }


body  {font-family: var(--default-font); padding: 10px;}
a { text-decoration: none;}
figure {margin: 0; padding: 0;}
p {line-height: 1.5;}
li {line-height: 1.4;}

.sixtyfour-cbm64 {
	font-family:'Share Tech Mono',monospace;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 1.5rem;
}



.yellow-pink-shadow {font-size: 4.2rem; color: var(--yellow); line-height: 1;
text-shadow: 2px 2px var(--pink); font-family: var(--condensed);
letter-spacing: 0.3rem; -webkit-text-stroke: 1px var(--pink); }


.before-after-list {display: flex; gap: 10px; flex-wrap: wrap;}
.before-after { display: flex; flex-wrap: wrap; gap: 10px; }

.image-box { flex: 1 1 300px; min-width: 300px; position: relative;overflow: hidden; }

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

.image-box figcaption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 4px; font-family: var(--default-font);
}

.image-box figcaption.after {
font-family: var(--cbm64); font-size: 0.6rem;
}

.led-red { width: 30px; height: 30px; background-color: #500; /* Dark, off-red color */ border-radius: 50%; border: 2px solid #300;
			box-shadow: 0 0 5px #000; transition: all 0.3s ease; /* Smooth transition */}

		.commodore-link:hover .led-red {
			background-color: #f00; /* Bright red */
			border: 2px solid #ffcccc;
			box-shadow:
				0 0 10px #f00,
				0 0 20px #f00,
				0 0 40px #f00,
				inset 0 0 5px #fff;
		}

		.commodore-link:hover:hover h1 {
			color: white;
		}




	p.cbm64 {font-family: var(--cbm64); font-size: 0.9rem;}
	h2.cbm64 {font-family: var(--cbm64); font-size: 1.4rem; margin: 0;}

	.commodore-link {font-family: var(--cbm64); font-size: 2rem; background-color: #827C72; border-radius: 10px;
	padding: 5px 10px; display: inline; color: white; text-decoration: none; letter-spacing: 0.3rem; display: inline-flex;
			align-items: center; cursor: pointer; font-size: 1rem; gap: 20px; width: auto; }
.commodore-link h1 {margin: 0;}

	a {color: blue; font-weight: bold;}
	a:hover {background-color: blue; color: white;}

	.stand-out {font-family: var(--condensed); font-size: 120%; }