/* MAGNOLIA=#EAE6F0
GLACOUS=#6C83B6
SKYMAGENTA=#CC86B1
ROSETOUPE=#844F5B
COOLGREY=#878598
POWDERBLUE=#ABBDE5 */

html, body {
  height: 100%;  /* Make sure the body takes up the full height of the page */
  margin: 0;     /* Remove any default margin */
  background-color: #ECFEFE; /* Your desired background color */
  font: "Amatic SC";
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* top menu items go side by side */
  background: #333;
}

nav ul li {
  position: relative; /* needed for dropdown positioning */
}

nav ul li a {
  display: block;
  padding: 12px 18px;
  text-decoration: none;
  color: #fff;
}

nav ul li a:hover {
  background: #444;
}

/* Hide dropdown by default */
nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;   /* sit just below parent */
  left: 0;
  background: #444;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 180px; /* controls submenu width */
  z-index: 1000;
  flex-direction: column; /* stack vertically */
}

/* Submenu links stacked */
nav ul li ul li a {
  padding: 10px 15px;
  color: #fff;
  white-space: nowrap;
}

nav ul li ul li a:hover {
  background: #555;
}

/* Show dropdown on hover */
nav ul li:hover > ul {
  display: block;
}


h1{
    background-color: #ECFEFE;
    color: #878598;
    text-align: center;
    font-size: 96pt;
    font: "Amatic SC";
}

ul{
    list-style-type: none;
    text-align: center;
    color: #CC86B1;
    background-color: #ECFEFE;
    font: "Amatic SC";
    font-size: 48px;
}


.main-link{
    
    padding: 20px;
    text-align: center;   
}

.link-button {
  
  display: inline-block;
  padding: 10px 20px;
  background-color: #2980b9;
  color: white;
  font-family: "Amatic SC", cursive;
  font-size: 48pt;
  text-decoration: none;
  border-radius: 12px; /* Soft edges */
  text-align: center;
  cursor: pointer;
}

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

.form-container {
  display: flex;
  justify-content: center;  
  align-items: center;      
  min-height: 100vh;        
}

form {
  text-align: center;      
}


.product-link {
  width: 217px;
  height: 300px;
}

.dancing-script-family {
  font-family: "Amatic SC", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
h2{
  font-family: "Amatic SC", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 96pt;
  text-align: center;
}
nav {
      background-color:  #ECFEFE;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Navigation list */
    nav ul {
      display: flex;            
      justify-content: center;   
      list-style: none;          
      margin: 0 20pt;
      padding: 0;
      font-size: 64pt;
    }

    /* Each nav item */
    nav li {
        font-family: "Amatic SC", cursive;
        font-optical-sizing: auto;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        margin: 0pt 20pt
    }

    /* Links */
    nav a {
      display: block;
      padding: 20px 0;
      text-decoration: none;
      color: #878598;
      font-size: 64px;
      transition: color 0.3s, border-bottom 0.3s;
    }

    /* Hover effect */
    nav a:hover {
      color: #ff9800;
      border-bottom: 2px solid #ff9800;
    }
form {
  text-align: center; /* centers labels + inline elements */
}
.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

form input,
form textarea,
form button {
  display: block;       /* puts them on their own line */
  margin: 0 auto 15px;  /* centers them horizontally */
  width: 60%;           /* adjust width as needed */
  max-width: 400px;     /* optional: limit large screens */
}