body {

  font-family: 'Rational Text', 'Segoe UI', sans-serif;
  background-color: #130F1E;
  color: #e6ebff;
  scroll-behavior: smooth;
 }

 
 /* NAVIGATION BAR */


 nav {
position: fixed;
top: 0%;
width: 100%;
background-color:#1c2848bf;
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(110,140,200,0.4);
box-shadow: 0 0 15px rgba(80,120,200,0.3);
text-align: center;
padding: 14px 0;
z-index: 10;
font-weight: 700;
letter-spacing: 1px;

 }


   nav a {
    color: #b8ccf0 ;
    text-decoration: none;
    margin: 0 20px;
    transition: color 0.2;

   }
 
 nav a:hover {color: #ffffff;}
 /* SECTIONS */
 section {
   min-height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: px 20px;
 }
 /* HOME IMAGE */
 #home img {
    
   width: 60%;
   height: 1%;
   object-fit: cover;
    max-width: 800px;
 }
 /* CHARACTER SECTION */
 #character {
   background: #130f1e;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px 0;
   
 }
 /* FOOD MENU */
 
   #menu {
   background: #130F1E;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px 0;
  
   
   width: 100%;
   height: 100%;
   object-fit: cover;

 }
 

 /* CHARACTER PAGE LAYOUT*/
#character {
 display: flex;
 justify-content: center;
 padding-top: 1%;
 padding-bottom: 1%;
 background-color: #130f1e;
}
.character-card {
 background: rgba(20, 27, 47, 0.92);
 border: 2px solid rgba(16, 31, 63, 0.6);
 border-radius: 14px;
 padding: 18px 22px;
 width: 300px;
 text-align: center;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}
/* HEADER — smaller + tighter */
.character-header {
 background: #1a2d52;
 border: 1px solid rgba(63, 74, 96, 0.5);
 padding: 6px;
 margin-bottom: 10px;
 border-radius: 8px;
 color: #cfe1ff;
 font-weight: 600;
 font-size: 14px;
}

.character-sprite {
 width: 220px;
 height: auto;
 image-rendering: pixelated;
 margin: 6px auto 10px;
}
/* Divider — thinner and closer */
.divider {
 width: 100%;
 height: 1px;
 background: linear-gradient(to right, transparent, #90aee8, transparent);
 margin: 8px 0;
}
/* FIELDS — closer and tighter */
.character-fields {
 display: flex;
 flex-direction: column;
 gap: 4px;
 text-align: left;
}
.character-fields label {
 color: #b8ccf0;
 font-size: 12px;
 letter-spacing: 0.5px;
 margin-top: 4px;
}
.character-fields input,
.character-fields select {
 background: #141a31;
 border: 1px solid rgba(42, 69, 126, 0.6);
 border-radius: 5px;
 padding: 5px 6px;
 color: #e6ebff;
 font-size: 12px;
}
/* BUTTONS — closer together + smaller */
.character-buttons {
 display: flex;
 justify-content: center;
 gap: 10px;
 margin-top: 8px;
}
.character-buttons button {
 padding: 6px 10px;
 border-radius: 6px;
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
 letter-spacing: 0.5px;
}
.btn-save {
 background: #13367b;
 border: 1px solid #89a9f6;
 color: white;
}
.btn-cancel {
 background: transparent;
 border: 1px solid #89a9f6;
 color: #89a9f6;
}
.btn-save:hover,
.btn-cancel:hover {
 filter: brightness(1.15);
}
 /* SHARED BOX STYLE FOR STORY, MENU, CONTACT */
 .content-box {
   background: #130F1E;
   border: 2px solid #130F1E;
   border-radius: 20px;
   padding: 40px;
   max-width: 700px;
   text-align: center;
   box-shadow: 0 0 25px #130F1E;
 }
 h1, h2 {
   color: #b8ccf0;
   letter-spacing: 2px;
   margin-bottom: 15px;
 }
 p {
   color: #c9d5ff;
   line-height: 1.6;
   font-size: 15px;
   max-width: 600px;
   margin: 0 auto 20px;
 }
 /* MENU */

 #menu
    
{
 width:  50% ;  
 height: auto;
 image-rendering: pixelated; 
 border-radius: 10px; 
 display: block;
 margin: 10px auto;
 max-width: 800px;
 }