body {
            margin: 0;
            padding: 0;
            text-align: center;
            background-color: #ffafdc;
            background-image: url('rainbow03.jpg'), url('footer-clouds.png');
            background-repeat: repeat-x, repeat-x;
            background-position: top, bottom;
            background-size: auto 220px, auto;
        }

    img {border: none; 
}

img.Logo {
  display: block;     
  margin: 0 auto;   
  border: none;     
	  max-width: 100%; /* never bigger than the parent */
  height: auto;    /* keep proportions */
  display: block;  /* removes extra spacing under image */
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
    padding: 3px 9px 3px 5px; 
}
img.floatRight { 
    float: right; 
    margin: 4px; 
    padding: 3px 9px 3px 5px; 
}

img.Center {
       display: block;
       margin-left: auto;
       margin-right: auto;
       background: none;
    }

a:link, a:visited { 
    color: #670DA8; 
    text-decoration: none; 
    text-decoration: underline;
}

a:hover { color: #fff;
          text-decoration: none;  }

a:active  { 
	color: #670DA8;
	text-decoration: none; 
	font-weight: bold;
}

h1 {
  color: #E15A94;
  font-family: 'Indie Flower', cursive;
  font-size: 2.9em;
  line-height: 1.2;
  font-weight: bold;
	margin-top: 10px;
  background: 
    url("sakuraleaf.png") no-repeat left center,
     linear-gradient(#FAE7FF 0 0) no-repeat; 
  padding-left: 55px;
  background-size: auto, 100% 3px;         /* height of the "border" */
  background-position: left center, 55px bottom; /* second one starts after image */
		}
		
h2 {
  color: #fff;
  font-weight: bold;
  font-size: 2em;
margin: 0; /* remove default margins */
  text-shadow:
     -1px -1px 0 #f684ba,
     1px -1px 0 #f684ba,
    -1px  1px 0 #f684ba,
     1px  1px 0 #f684ba,
    -2px  0   0 #f684ba,
     2px  0   0 #f684ba,
     0   -2px 0 #f684ba,
     0    2px 0 #f684ba,
    -2px -2px 0 #f684ba,
     2px -2px 0 #f684ba,
    -2px  2px 0 #f684ba,
     2px  2px 0 #f684ba;
     width: 100%;
}

h3 {
  color: #618419;
  font-family: Comic Sans;
  font-size: 0.9em;
  font-weight: bold;
  margin-top: 10px;
  background-color: #DDF77B;
  border-bottom: 5px solid #B5D890;
		}

        /* Container to limit max width */
        .container {
            max-width: 1100px;
            margin: 0 auto; /* Centers the content horizontally */
            padding: 0 20px; /* Optional padding for a little space around the content */
        }

        /* Header */
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 200px;
            width: 100%; /* Full width */	
        }
		
.header img[alt="Header Cloud"] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0; /* Cloud goes behind */
}
		
.header img[alt="Site Name"] {
    position: absolute;
    top: 0px;
    left: 180px;
    max-width: 80%;
    z-index: 2; /* In front of cloud */
}
		
.logo-image { /* New class for the logo image */
    position: absolute;
    right: 120px;
    top: 45px;
    width: 9%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}

.logo-image:hover {
    transform: scale(1.2);
}

        .sitename {
            position: absolute;
            top: 0px; /* Adjust this for vertical position */
            left: 180px; /* Adjust this for horizontal position */
            max-width: 80%; /* Prevents it from overflowing */
        }
			
	.star01 { 
    position: absolute;
    left: 110px;
    top: 85px;
    width: 5%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}
		
	.star02 { 
    position: absolute;
    left: 240px;
    top: 75px;
    width: 5%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}
		
	.star03 { 
    position: absolute;
    left: 370px;
    top: 94px;
    width: 5%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}
		
	.star04 { 
    position: absolute;
    left: 510px;
    top: 95px;
    width: 5%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}
		
	.star05 { 
    position: absolute;
    left: 640px;
    top: 90px;
    width: 5%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}
		
	.star06 { 
    position: absolute;
    left: 770px;
    top: 70px;
    width: 5%;
    transition: transform 0.3s ease;
    z-index: 1; /* In front of cloud */
}
		
		.star01:hover, 
.star02:hover, 
.star03:hover, 
.star04:hover, 
.star05:hover, 
.star06:hover {
    transform: rotate(360deg);
    transition: transform 0.6s ease-in-out;
	cursor: pointer;
}

        /* Content */
        .content {
            background: url('content-bg.png') repeat-x bottom, #F5E2E2;
            padding: 10px;
            min-height: 500px;
            display: flex;
			font-size: 1.2em;
 			font-family: 'Nunito', sans-serif;
  			font-weight: 500;
  			letter-spacing: 0.01em;
  			color: #523539;
			border-top: 6px solid #FCA9B3;
        }

.main-content {
  flex: 1;
  margin-right: 5px;
}
		
		
/* 3 Column Layout */
		
* {
  box-sizing: border-box;
}

.row {
  display: flex;              /* flexbox layout */
  flex-wrap: wrap;            /* allow wrapping */
}

.column {
  padding: 10px;
  min-width: 200px;
}

/* different sizes */
.column.small {
  flex: 0.6;  /* less space */
  padding: 10px;
  border-radius: 12px;
  outline: 3px dotted white;     /* dotted border */
  outline-offset: -10px;         /* pull the dots inward */
}

.column.large {
  flex: 1.4;  /* more space */
  padding: 18px;
  text-align: left;
  border-radius: 12px;
  outline: 3px dotted white;     /* dotted border */
  outline-offset: -10px;         /* pull the dots inward */
}
		
.column.menu {
  flex: 0.4;  /* more space */
  padding: 10px;
  border-radius: 12px;
  outline: 3px dotted white;     /* dotted border */
  outline-offset: -10px;         /* pull the dots inward */
}		

/* Stack columns vertically on small screens */
@media (max-width: 600px) {
  .row {
    flex-direction: column;   /* stack instead of side by side */
  }
}
		
/* column below 3columns */
		
.full-width {
  width: 100%; 
  background: #EEFEA4;
  padding: 20px;
  margin-top: 10px;
  border-radius: 12px;
  outline: 3px dotted white;     /* dotted border */
  outline-offset: -10px;         /* pull the dots inward */
}

span.Title {
  background-color: #f19f4b;   
  border-bottom: 2px dashed #FFB6D2;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 1.3em;
  color: #fff;
  font-weight: bold;
  display: inline-block;
}

/* Style the updates */
.update {
  padding: 6px 10px;
  border-bottom: 2px dashed;
  margin: 5px 0;
}

/* Alternating background colors */
.update:nth-of-type(odd) {
  background-color: #ECFDA5;   
  border-color: #fff;    
}

.update:nth-of-type(even) {
  background-color: #FACFA0;   
  border-color: #fff;    
}

/* Optional: style the date strong elements */
.update strong {
  color: #e87830;
}

#backyard-cats {
	flex-direction: column;
	font-size: 0.9em;
	text-align: left;
	padding: 0 10px 0 10px;
}

		
/* Homepage Menu */
		
.vertical-menu {
  width: 100%;
}

.vertical-menu a {
  background: linear-gradient(to top, #84f66a, transparent);
  color: #026002;
  display: block;
  font-size: 0.9em;
  font-weight: bold;
  padding: 7px;
  text-decoration: none;
	text-align: center;
  border-bottom: 3px dotted #F7D97F;
}

.vertical-menu a:hover {
  background-color: #D7FABF;
}

.vertical-menu a.active {
  background: #38e60f; /* overrides gradient */
  color: #F6F7B9;
  border-bottom: 6px solid #21ae00;
}

        /* Footer Section 1 */
        .footer-top {
            position: relative;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .footer-top img {
            max-width: 100%;
            height: auto;
        }
		
		/* Footer Bubbles */
		
.footer-overlay-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Keeps bubbles inside */
}

.footer-base {
    display: block;
    width: 100%;
    height: auto;
}

.bubble-overlay {
    position: absolute;
    bottom: 250px;  /* Keeps the position 100px from the bottom of its parent */
    height: 200px;  /* Set the desired height */
    width: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    padding-top: 50px;  /* Adds space at the top of the bubble overlay */
    transform: translateY(100px);  /* Moves the bubble area down by 100px, without affecting layout */
}

.bubble {
    position: absolute;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 200, 0.7), rgba(255, 255, 200, 0.1));
    border-radius: 50%;
    animation: float 6s linear forwards;
    filter: blur(1px) drop-shadow(0 0 6px rgba(255, 255, 180, 0.6));
    opacity: 0.8;
}

/* Random positions and sizes */
.bubble:nth-child(1) {
    left: 20%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.bubble:nth-child(2) {
    left: 40%;
    width: 25px;
    height: 25px;
    animation-delay: 2s;
}
.bubble:nth-child(3) {
    left: 60%;
    width: 15px;
    height: 15px;
    animation-delay: 4s;
}
.bubble:nth-child(4) {
    left: 75%;
    width: 22px;
    height: 22px;
    animation-delay: 1s;
}
.bubble:nth-child(5) {
    left: 85%;
    width: 18px;
    height: 18px;
    animation-delay: 3s;
}

@keyframes floatWiggle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate(10px, -5px) scale(1.1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-5px, 10px) scale(1);
        opacity: 0;
    }
}
	
		@keyframes float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(1.2);
        opacity: 0;
    }
}
		
		/* end footer bubbles */
		
		/* BUBBLE CURSOR */
.cursor-bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); /* soft white bubble */
  pointer-events: none;
  animation: floatUpFade 1.5s ease-out forwards;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* soft glow */
  z-index: 9999;
}

@keyframes floatUpFade {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-40px) scale(1.2);
    opacity: 0;
  }
}
		
		/* END BUBBLE CURSOR */


/* Footer Section 2 */
.footer-bottom {
	background-color: #e859a6;
	color: white;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Make sure the layout stays responsive on smaller screens */
@media screen and (max-width: 768px) {
	.content {
		flex-direction: column; /* Stack content and sidebar vertically on small screens */
	}
}

/* images within a div */

.image-container {
    display: flex; 
    gap: 10px; 
    justify-content: center; 
    flex-wrap: wrap; 
}

.image-container img {
    width: 31%; /* Default size */
    height: auto;
    transition: transform 0.3s ease-in-out;
	border: 4px solid #FBCBA7;
}

.image-container img:hover {
    transform: scale(2.2); 
	cursor: pointer; 
}

/* end images within a div */
	
/* gallery code */ 

div.gallery {
  border: 0px;
  margin-bottom: 12px;
}

div.gallery:hover {
  border: 1px solid #fff;
}

div.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid transparent;
  border-radius: 10px;
  background: linear-gradient(to right, #ffd1dc, #ffecb3); /* Pink to light orange pastel */
  padding: 4px; /* Creates the border effect */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for the zoom */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for a nice effect */
}

div.gallery a {
  display: block;
  width: 95%;
}

.responsive {
  padding: 0 2px;
  flex: 1 1 calc(25% - 12px); /* 4 images per row by default */
}

.desc {
font-family: Balsamiq Sans;
font-weight: bold;
color: #F65EA4;	
padding-left: 15px;
border-radius: 10px 0px 0px 10px;
background: linear-gradient(to right, #ffd1dc, #fff); /* Pink to light orange pastel */
white-space: nowrap; /* Prevents text from wrapping to the next line */
overflow: hidden; /* Hides the text that overflows the container */
text-overflow: ellipsis; /* Adds "..." at the end when text is too long */
max-width: calc(28ch + 20px); /* Limits the width based on 28 characters */
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Space between images */
  justify-content: center; /* Center images in the container */
}

/* Zoom-in effect on hover */
div.gallery a:hover img {
  transform: scale(1.1); /* Zoom in by 100% */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Optional deeper shadow on hover */
}

/* end gallery code */


/* -- FISH BOWL -- */

        #feed-fish {
		  font-size: 0.9em;
		  font-weight: bold;
   		  flex-direction: column;
  		  align-items: center;
        }

        #fish-container {
  		  display: flex;
   		  flex-direction: column;
  		  align-items: center;
        }
        #feed-button {
   		  margin-left: 0;   /* no side margin needed */
 		  margin-top: 10px; /* space between fish and button */
  		  padding: 5px 35px 5px 35px;
  		  font-size: 16px;
  		  background-color: #DDF77B;
  		  border: 4px solid #B0E753;
   		  border-radius: 10px;
  		  color: #E08A15;
   		  font-weight: bold;
   		  text-decoration: underline;
   		  cursor: pointer;
        }
        #feed-button:hover {
            background-color: #B0E753;
            border-color: #F7EDC9;
			color: #618419;
			text-decoration: none;
        }
        #feed-count {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 1px;
        }
        #message {
            color: #618419;
            font-size: 18px;
            font-weight: bold;
            display: none;
            margin-top: 10px;
        }

/* -- FISH BOWL -- */

/* art gallery code */ 

div.gallery {
  border: 0px;
  margin-bottom: 12px;
}

div.gallery:hover {
  border: 1px solid #fff;
}

div.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid transparent;
  border-radius: 10px;
  background: linear-gradient(to right, #ffd1dc, #ffecb3); /* Pink to light orange pastel */
  padding: 4px; /* Creates the border effect */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for the zoom */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for a nice effect */
}

div.gallery a {
  display: block;
  width: 95%;
}

.responsive {
  padding: 0 2px;
  flex: 1 1 calc(25% - 12px); /* 4 images per row by default */
}

.desc {
font-family: Balsamiq Sans;
font-weight: bold;
color: #F65EA4;	
padding-left: 15px;
border-radius: 10px 0px 0px 10px;
background: linear-gradient(to right, #ffd1dc, #fff); /* Pink to light orange pastel */
white-space: nowrap; /* Prevents text from wrapping to the next line */
overflow: hidden; /* Hides the text that overflows the container */
text-overflow: ellipsis; /* Adds "..." at the end when text is too long */
max-width: calc(28ch + 20px); /* Limits the width based on 28 characters */
}

@media only screen and (max-width: 1024px) {
  .responsive {
    flex: 1 1 calc(33.33% - 12px); /* 3 images per row */
  }
}

@media only screen and (max-width: 768px) {
  .responsive {
    flex: 1 1 calc(50% - 12px); /* 2 images per row */
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    flex: 1 1 100%; /* 1 image per row */
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Space between images */
  justify-content: center; /* Center images in the container */
}

/* Zoom-in effect on hover */
div.gallery a:hover img {
  transform: scale(2.0); /* Zoom in by 100% */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Optional deeper shadow on hover */
}

/* end art gallery code */

/* Goodies Section Styles */

 .blinkie-box {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            padding: 10px;
            margin: 10px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .blinkie-box img {
            max-width: 100%;
            max-height: 100%;
        }

.circular-menu {
  position: relative;
  width: auto;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circular-menu a {
  width: 140px;
  height: 55px;
  background-color: #3E2563;
  color: #3E2563;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  line-height: 55px;
  text-decoration: none;
  transition: transform 0.3s ease-in-out;
  padding: 0 15px;
  margin: 0 10px;
  position: relative;
  
  /* Create a wavy border using clip-path */
  clip-path: polygon(
    5% 92%, 15% 96%, 25% 92%, 35% 96%, 45% 92%, 55% 96%, 
    65% 92%, 75% 96%, 85% 92%, 95% 96%, 100% 92%, 
    100% 8%, 95% 4%, 85% 8%, 75% 4%, 65% 8%, 
    55% 4%, 45% 8%, 35% 4%, 25% 8%, 15% 4%, 5% 8%
  );
}

.circular-menu a:nth-child(1) { background-color: #70C0FC; }
.circular-menu a:nth-child(2) { background-color: #D6B1FE; }
.circular-menu a:nth-child(3) { background-color: #FE34A7; }
.circular-menu a:nth-child(4) { background-color: #FCBDAF; }
.circular-menu a:nth-child(5) { background-color: #FDF398; }
.circular-menu a:nth-child(6) { background-color: #7EFCC8; }
.circular-menu a:nth-child(7) { background-color: #E19782; }

.circular-menu a:hover {
  transform: scale(1.2);
  animation: pulse 0.6s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

/* Description Box */
.description-box {
  background: #C6BDFE;
  margin-top: 5px;
  font-size: 20px;
  font-weight: bold;
  height: 35px;
  line-height: 30px;
  padding-left: 25px;
  color: #5F1F9D;
  transition: opacity 0.3s ease-in-out;
}

/* End Goodies Styles */

/*-- PAGE: ABOUT ME --*/

.CDcontainer {
    text-align: center; /* Optional: Centers the content within the container */
}

.CDbox {
    display: inline-block;
    width: 35%; /* Adjust the width as needed */
    margin: 30px; /* Adjust the margin as needed for spacing between the boxes */
    padding: 10px; /* Optional: Adds padding to the boxes */
    border: 10px solid lightgreen; /* Light Green border */
    border-radius: 7px; /* Round the corners of the border */
    position: relative;
}

.CDbox::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 10px solid yellow; /* Yellow border */
    border-radius: 7px;
}

.CDbox::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: 10px solid pink; /* Pink border */
    border-radius: 7px;
}

/* -- 2 DIVS NEXT TO EACH OTHER -- */

.DivNextcontainer {
    text-align: center; /* Optional: Centers the content within the container */
}

.DivNext {
    display: inline-block;
    width: 40%; /* Adjust the width as needed */
    margin: 20px; /* Adjust the margin as needed for spacing between the boxes */
    padding: 10px; /* Optional: Adds padding to the boxes */
    position: relative;
}

.DivNext::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
}

.DivNext::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
}

/* - end divs */

span.about {
	color: #fe3586;
	font-weight: bold;
	font-family: georgia;
	font-size: 1.3em;
	border-bottom: 2px dashed #9200d1;
}