* {
  cursor: url('/MyImages/CustomCursorFinal.png'), auto !important;
  box-sizing: border-box !important;
}

/* Specific interactive selectors to force pointer fingers over active targets */
a, 
button, 
summary, 
details, 
.menu-trigger, 
.dropdown li a,
.main-menu li {
  cursor: url('/MyImages/CustomCursorFinal.png'), pointer !important;
}

@font-face { 
  font-family: Alegraya;  
  src: url('/Fonts/Alegraya');
} 

html, body { 
  margin: 0; 
  padding: 0; 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
  background-color: #ea88c9;
  color: #063b69;  
  font-family: 'Alegreya', serif;
} 

h2 {  
  font-family: Alegreya, serif; 
  font-size: 36px; 
  line-height: 1.3;
  text-align: center; 
  font-weight: bold; 
}

.poem-layout { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  min-height: 100vh; 
  margin: 0; 
  padding: 40px 20px; 
}  

.poem {
  text-align: center;
  font-family: Alegreya, serif;
  font-size: 18px;
  line-height: 1.8; 
  margin: 0 auto;
} 

pre {
  font-family: Alegreya, serif;
  font-size: 18px;
  line-height: 1.6;
  color: #063b69; 
  margin: 0 auto;
}

.story-title { 
  font-size: 28px; 
  font-weight: bold; 
  margin-bottom: 15px; 
  text-align: center;
} 

.story-text { 
  font-family: Alegreya, serif;  
  font-size: 18px;  
  line-height: 1.6; 
  margin-bottom: 1.5em; 
  text-align: left; 
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
} 

.centered-line { 
  display: block; 
  text-align: center; 
  margin: 10px 0; 
} 

.piece-title { 
  font-family: Alegreya, serif; 
  font-size: 24px !important; 
  font-weight: bold !important; 
  text-align: center !important; 
  margin-top: 30px; 
  margin-bottom: 30px; 
  display: block; 
} 


img { 
  max-width: 100%; 
  height: auto; 
  display: block;  
  margin: 20px auto;
} 
.navigation-bar.fixed-nav { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1000;
  background-color: #ea88c9;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.1); 
} 

.has-fixed-nav { 
  padding-top: 80px; 
} 

footer { 
  text-align: center; 
  width: 100%; 
  padding: 20px 0; 
  margin-top: auto;  
} 

.navigation-bar { 
  width: 100%; 
  margin: 20px auto 
  text-align: center; 
} 

.main-menu { 
  display: flex !important; 
  flex-direction: row !important; 
  list-style-type: none !important; 
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 25px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: max-content;
}

.main-menu > li {
  list-style: none !important;
  position: relative !important;
}


.main-menu details {
  display: inline-block;
  position: relative;
}

.menu-trigger, .main-menu summary {
  display: block !important;
  color: #063b69 !important;
  font-weight: bold !important;
  text-decoration: underline !important;
  padding: 5px 10px !important;
  list-style: none !important;
}

.main-menu summary::-webkit-details-marker {
  display: none !important; /* Hides the native browser triangle arrow */
}

.dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #ea88c9 !important;
  border: 1px solid #063b69 !important;
  padding: 10px !important;
  margin: 5px 0 0 0 !important;
  list-style-type: none !important;
  min-width: 200px !important;
  z-index: 99999 !important;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.dropdown li {
  list-style: none !important;
  width: 100% !important;
  text-align: left !important;
}

.dropdown li a {
  color: #063b69 !important;
  text-decoration: none !important;
  display: block !important;
  padding: 6px 10px !important;
  font-size: 15px !important;
}

.dropdown li a:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px;
}