/* FIXED: Removed the colon from the class name */
.display { 
  display: grid; /* Moved the grid property inside where it belongs */
  box-sizing: border-box; 
  height: 150px; 
  width: 300px; 
  padding: 10px;
} 

.controls {
  margin-bottom: 20px;
  display: block;
}

#clickme { 
  border: 0;
  outline: none;
  background-color: pink; 
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer; 
}

.header-box{
  color: darkmagenta;
  border: 4px solid purple; 
  border-radius: 8px;
  padding:20px;
  margin: 20px auto;
  max-width: 500px; 
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  text-align: center; 
}

.output-area {
  color: purple;
}

.blue-text-box {
  display: inline-block;
  background-color: pink; /* Sets the background to light blue */
  color: darkmagenta;            /* Keeps the text color black for good contrast */
  border: 2px solid #87ceeb; /* Optional: Adds a slightly darker sky blue border */
  border-radius: 6px;        /* Softens and rounds the sharp corners */
  padding: 15px;             /* Adds breathing room inside the box for text */
  margin: 15px 0 auto;            /* Adds spatial separation above and below the box */
  box-sizing: border-box;    /* Keeps the width calculations perfect */
  width: 100%;               /* Adjusts to fill its layout container */
  max-width: 400px;          /* Prevents the text box from stretching too wide */
  text-align: center;
}

.inline { 
  position: relative; 
  display: inline-block; 
  top: 50px; 
  left: 50px;
} 

.border { 
  color: pink; 
  position: relative; 
  box-sizing: border-box; 
  display: inline-block; 
  top: 50px; 
  left: 50px;
}

.body {
    background-image: url('flowerbuns.jpg');
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
}

.container2 { 
  position: relative; 
  width: 10%;  /* Main box size constraints */
  height: 10%;
  object-fit: contain;
  display: flex; 
  padding: 10px; 
  box-sizing: border-box;
  margin-top: 30px; /* Safe physical gap pushing the image below the text */
  justify-content: center;
  align-items: center;
  margin: auto;
  z-index: 2; 
  /* REMOVED: border: 1px solid pink; is no longer here */
}

.p {
  color: pink;
}

.text {
  color: purple;
}


.element { 
  width: 100%;
  height: 100%;
  object-fit: contain; 
  
  /* ADDED: The pink border is now attached directly to the picture */
  border: 3px solid purple; 
  border-radius: 4px; 
  box-sizing: border-box; 
}

.flower-output p, .flower-output b {color: darkmagenta;
}

/* Center the main nav container on the page */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0;
}

/* Style the horizontal menu list */
.nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* Adds space between your menu links */
    padding: 0;
    margin: 0;
}

/* Style the individual links with a cute chunky font */
.nav-menu li a {
    text-decoration: none;
    color: darkmagenta;
    
    /* Cute, chunky, rounded fonts */
    font-family: "Fredoka", "Nunito", "Comic Sans MS", "Arial Round", sans-serif;
    font-weight: 700; /* Makes the text extra bold and thick */
    font-size: 1.2rem;
    
    transition: transform 0.2s ease; /* Adds a smooth bounce effect on hover */
    display: inline-block;
}

/* Add a fun hover effect when you glide over the links */
.nav-menu li a:hover {
    color: hotpink;
    transform: scale(1.1); /* Slightly inflates the link when hovered */
}

/* FIXED: Cute ribbon bullet point before each list item */
.nav-menu li::before {
    content: "🎀 ";
    font-size: 1.1rem;
    margin-right: 5px;
}