@font-face {
  font-family: 'A Year Without Rain';
  src: url('AYearWithoutRain.ttf') format('truetype');
  /* Make sure AYearWithoutRain.ttf is in the same directory as your CSS, or update the path */
  font-weight: normal;
  font-style: normal;
}

/* General body styling */
body {
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align to top for long content */
  flex-direction: column;
  min-height: 100vh;
  background-color: #F5D0E0; /* New darker pink background */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Soft sans-serif for body */
  color: #5D5D7D; /* Soft dark grayish-lavender text */
  /* cursor: default; */ /* Removing custom cursor from previous style */
  position: relative; /* For raindrop pseudo-elements */
  overflow-x: hidden; /* Prevent horizontal scroll from raindrops if any go off-screen */
  /* Cloud gradients moved to ::after pseudo-element */
}

/* Cloud layer using ::after */
body::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -2; /* Behind raindrops and content */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 75% 60%, rgba(240, 230, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.1) 0%, transparent 35%);
  background-size: 400px 400px, 500px 500px, 300px 300px;
  background-repeat: repeat;
}

/* Raindrop Background - Static Pattern inspired by CSS IRL */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1; /* Behind content, but above ::after (clouds) */
  background-image: 
    radial-gradient(ellipse at top, rgba(200, 200, 240, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at top, rgba(200, 200, 240, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at top, rgba(210, 210, 245, 0.5) 0%, transparent 55%);
  background-size: 60px 80px, 80px 100px, 50px 70px;
  background-position: 0px 0px, 20px 30px, 40px 10px;
  background-repeat: repeat;
  opacity: 0.6;
  /* For a more "falling" look, one might add a very slow animation here, but static is more performant */
  /* animation: slowFall 60s linear infinite; */
}

/* @keyframes slowFall {
  0% { background-position: 0px 0px, 20px 30px, 40px 10px; }
  100% { background-position: 0px 100vh, 20px calc(100vh + 30px), 40px calc(100vh + 10px); }
} */

/* Page Layout */
.page-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on very small screens if necessary */
  width: 100%;
  max-width: 1200px; /* Max width for the entire page layout */
  margin: 0 auto; /* Center the page container itself */
  padding: 0 10px; /* Add some padding to the sides of page container */
}

.main-column {
  flex: 2; /* Main content takes roughly 2/3rds */
  padding-right: 20px; /* Space between main content and sidebar */
  min-width: 300px; /* Ensure main content has some minimum width */
}

.sidebar-widgets {
  flex: 1; /* Sidebar takes roughly 1/3rd */
  min-width: 250px; /* Minimum width for sidebar */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between widgets */
}

/* Adjustments for existing centered elements, they are now part of .main-column */
.content-box, .counter, .friends-box {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 25px;
  margin-top: 0; /* Reset margin-top as spacing is handled by main-column/sidebar gap */
  margin-bottom: 20px; /* Add margin bottom for spacing between these items in main column */
  border: 1px dashed rgba(190, 190, 220, 0.7);
  box-shadow: 0 0 15px rgba(200, 200, 240, 0.3);
  width: auto; /* Let flexbox in main-column handle width, remove fixed % */
  max-width: none; /* Remove max-width as it's on main-column now */
  border-radius: 8px;
  margin-left: 0; /* Remove auto margins for centering */
  margin-right: 0;
  text-align: left;
}

.content-box:last-child, .counter:last-child, .friends-box:last-child {
    margin-bottom: 0; /* No margin on the last item in main column */
}

/* Widget Styling */
.widget {
  background-color: rgba(255, 255, 255, 0.85); /* Slightly different transparency or color for widgets */
  padding: 20px;
  border: 1px dotted rgba(210, 210, 230, 0.8); /* Different border style for widgets */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(200, 200, 240, 0.25);
}

.widget h3 {
  font-family: 'A Year Without Rain', 'Comic Sans MS', cursive, sans-serif;
  color: #E895C5; /* Soft pastel green for widget titles */
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
  border-bottom: 1px dotted rgba(180, 248, 200, 0.5);
  padding-bottom: 8px;
}

.widget p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #E895C5; /* Slightly different shade for widget text */
}

.widget p:last-child {
  margin-bottom: 0;
}

/* Specific Widget Styling */
.music-widget em {
  font-family: 'A Year Without Rain', 'Comic Sans MS', cursive, sans-serif;
  color: #E895C5; /* Soft pink for artist name */
  font-style: normal;
}

/* Analog Clock Styling */
.analog-clock {
  width: 150px; /* Size of the clock */
  height: 150px;
  margin: 20px auto; /* Center clock in its widget area */
  position: relative;
}

.clock-face {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* Make it round */
  background-color: #F0EFFF; /* Pale lavender face */
  border: 3px solid #D8D0E8; /* Slightly darker lavender border */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 0 5px rgba(200,200,240,0.3); /* Inner shadow and soft outer glow */
  position: relative;
}

.hand {
  width: 50%; /* Start from center */
  height: 4px; /* Thickness of hands */
  background-color: black; /* Default, will be overridden */
  position: absolute;
  top: 50%; /* Align to vertical center */
  left: 50%; /* Start drawing from the center */
  transform-origin: 0% 50%; /* Pivot point at the very left of the hand (center of clock) */
  border-radius: 2px; /* Rounded ends for hands */
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.hour-hand {
  width: 30%; /* Updated length as requested */
  left: 50%;
  background-color: #E895C5; /* Soft pink */
  z-index: 1;
}

.minute-hand {
  width: 35%; /* Adjusted length */
  left: 50%;
  background-color: #A0E7E5; /* Soft mint/cyan */
  z-index: 2;
}

.second-hand {
  width: 45%; /* Remains longest */
  height: 2px; /* Thinner second hand */
  left: 50%;  /* Corrected: Start from center */
  background-color: #FFAEBC; /* Soft coral */
  z-index: 3;
}

.center-dot {
  width: 10px;
  height: 10px;
  background-color: #FFF9E6; /* Pale cream dot */
  border: 1px solid #D8D0E8;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the dot precisely */
  z-index: 4;
}

/* Heading styling */
h1 {
  font-family: 'A Year Without Rain', 'Comic Sans MS', cursive, sans-serif;
  margin: 0 0 20px 0;
  color: #E895C5; /* Soft darker Pink */
  font-size: 36px; /* Larger for dreamy effect */
  text-align: center;
  font-weight: normal; /* Font might have its own weight */
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7); /* Light shadow for pop */
}

h2 {
  font-family: 'A Year Without Rain', 'Comic Sans MS', cursive, sans-serif;
  font-size: 28px;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #94D5DD; /* Soft pastel blue/teal */
  border-bottom: 1px dotted rgba(148, 213, 221, 0.5);
  padding-bottom: 8px;
  font-weight: normal;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

/* Text styling */
p {
  color: #5D5D7D;
  line-height: 1.7; /* More spacing for dreamy read */
  font-size: 16px; /* Slightly larger body text */
  margin-bottom: 15px;
}

ul {
  list-style-type: '- '; /* Custom, simple list style */
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
  color: #5D5D7D;
}

a {
  color: #A0E7E5; /* Soft mint/cyan from palette */
  text-decoration: none;
  font-weight: bold; /* Keep some definition */
  transition: color 0.3s ease;
}

a:hover {
  color: #FFAEBC; /* Soft coral pink for hover */
  text-decoration: underline; /* Underline on hover for clarity */
  text-shadow: 0 0 3px #FFAEBC;
}

/* Under Construction message styling */
.under-construction {
  margin-top: 15px;
  margin-bottom: 25px;
  font-size: 1.1em;
  color: #E895C5; /* Using the heading pink */
  font-weight: normal; /* Using body font weight */
  font-family: 'A Year Without Rain', 'Comic Sans MS', cursive, sans-serif;
  text-align: center;
  border: 1px dotted #E895C5;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(255, 230, 240, 0.5); /* Very light pinkish background */
}

/* Counter styling */
.counter {
  font-size: 0.9em;
  color: #5D5D7D;
  /* Styling inherited from .content-box general rules initially */
  /* Now, adjust for flex item context */
  padding: 0; /* Removed padding */
  border: none; /* Removed border */
  background-color: transparent; /* Transparent background */
  box-shadow: none; /* Removed box shadow */
  border-radius: 0; /* Optionally remove/reset radius if no bg/border */
  text-align: center; /* Center the counter images */
  /* Remove width, max-width, margin-top, margin-left, margin-right */

  /* --- REMOVING DEBUGGING STYLES FOR COUNTER --- */
  /* min-width: 70px; */
  /* min-height: 25px; */
  /* border: 2px solid red !important; */ 
  /* display: inline-block !important; */ /* Revert to default display or let flex handle */
  /* --- END DEBUGGING STYLES --- */
}

/* Style for the image(s) that FC2 script injects */
.friends-box .counter img {
  display: inline-block !important; /* Key change for horizontal layout */
  width: auto !important;
  height: auto !important;
  /* border: 1px solid blue !important; */ /* Remove debug border */
  margin: 0 1px; /* Optional: add tiny space between digit images */
}

/* Friends Box styling */
.friends-box {
   /* Styling inherited from .content-box, .counter, .friends-box rule */
   display: flex; /* Re-enable flex for horizontal alignment */
   align-items: center; /* Vertically align items */
   justify-content: space-between; /* Push items to opposite ends */
   /* gap: 20px; */ /* Gap might not be needed with space-between */
   /* text-align: center; */ /* Text alignment handled by children or flex */
}

.friend-link-item {
    display: flex; /* To align the friends-text and image if needed, or just let them flow */
    align-items: center;
}

.friends-text {
  font-size: 1em;
  color: #5D5D7D; /* Match body text */
  vertical-align: middle;
  margin-right: 10px;
  font-family: 'A Year Without Rain', 'Comic Sans MS', cursive, sans-serif; /* Use special font for this text too */
}

.friends-box img {
  width: 88px;
  height: 31px;
  border-radius: 4px; /* Softer rounding */
  vertical-align: middle;
  border: 1px solid rgba(190, 190, 220, 0.5); /* Soft border matching content boxes */
  transition: transform 0.3s ease;
}

.friends-box img:hover {
  transform: scale(1.05); /* Slight grow on hover */
  box-shadow: 0 0 8px rgba(174, 235, 199, 0.7); /* Soft green glow on hover */
}

/* Styling for the quote in the friends box */
.quote-text {
  font-size: 0.9em; /* Slightly smaller */
  color: #6a6a8a; /* Same as widget text color */
  font-style: italic;
  text-align: right;
  /* margin-top: 15px; */ /* Remove top margin, flex handles alignment */
  margin-bottom: 0;
  padding-left: 10px;
  line-height: 1.5;
}

/* Remove old button styling as there are no .button classed elements in index.html */
/* .button { ... } */
/* .button:hover { ... } */

/* Footer styling (currently no footer element in HTML) */
footer {
  margin-top: 30px;
  padding: 15px 0;
  text-align: center;
  font-size: 0.9em;
  color: rgba(93, 93, 125, 0.7); /* Softer footer text */
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
  .content-box {
    padding: 10px;
  }
}

/* Button container styling */
.button-container {
  margin-top: 20px; /* Space above buttons */
}

/* Button styling (for friend's button, though it's an image) */
.button {
  background-color: #333333;
  color: #FF00FF;
  padding: 5px 10px;
  border-radius: 0px;
  text-decoration: none;
  font-weight: bold;
  transition: none;
  display: inline-block;
  margin: 5px;
  border: 1px solid #FF00FF;
}

.button:hover {
  background-color: #FF00FF;
  color: #000000;
}

/* Analog Clock Styling */
.clock-widget h3 {
  color: #E895C5; /* Soft pink for clock title */
  border-bottom-color: rgba(232, 149, 197, 0.5); /* Matching pink for border */
}