/* css reset */
                    *::before,
                    *::after {
                        box-sizing: inherit;
                    }
                    
                    :root { /* or html or body */
                        box-sizing: border-box;
                    }
                    
                    /* Prevent font size inflation */
                    html {
                        -moz-text-size-adjust: none;
                        -webkit-text-size-adjust: none;
                        text-size-adjust: none;
                    }
                    
                    /* Remove default margin in favour of better control in authored CSS */
                    body, h1, h2, h3, h4, p,
                    figure, blockquote, dl, dd {
                        margin-block-end: 0;
                    }
                    
                    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
                    ul[role='list'],
                    ol[role='list'] {
                        list-style: none;
                    }
                    
                    /* Set core body defaults */
                    body {
                        min-height: 100vh;
                        line-height: 1.5;
                    }
                    
                    /* Set shorter line heights on headings and interactive elements */
                    h1, h2, h3, h4,
                    button, input, label {
                        line-height: 1.1;
                    }
                    
                    /* Balance text wrapping on headings */
                    h1, h2,
                    h3, h4 {
                        text-wrap: balance;
                    }
                    
                    /* Inherit fonts for inputs and buttons */
                    input, button,
                    textarea, select {
                        font: inherit;
                    }
                    
                    /* Make sure textareas without a rows attribute are not tiny */
                    textarea:not([rows]) {
                        min-height: 10em;
                    }
                    
                    /* Anything that has been anchored to should have extra scroll margin */
                    :target {
                        scroll-margin-block: 5ex;
                    }

/* --- 1. GLOBAL STYLES --- */
body {
  background-image: url("pics/tile.jpg");
  background-color: #333333;
  margin: 0;
  font-family: sans-serif;
}

p { text-align: center; color: black; }
h1, h2 {text-align: center; }

h1 {
 background-color:#f896c8;
 color:white;
 border-radius: 5px;
 margin: 1;
}

/* --- 2. LAYOUT & CENTERING --- */
.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas:
    "banner banner banner"
    "left-side middle-col right-side";
  gap: 20px; 
  max-width: 100%;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
}

.middle-column {
  grid-area: middle-col;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* Generic All Boxes Template */
.the-big-box {
  max-width: 60%;
  margin: 10px auto 800px auto;
  border-radius: 50px;
}

.the-big-box,
.basicbox {
  border-style: ridge;
  border-color: violet;
  background-color: white;
}

/* --- 3. THE BOX CONTAINERS --- */
.main-box, 
.keypad-main-container { 
  border-radius: 15px; 
  box-shadow: 0px 5px 15px rgba(0,0,0,0.5); 
  width: 100%;       /* Fills the middle-column */
  box-sizing: border-box;
  overflow: hidden;  /* Clips the banner header */
  padding: 10px;        /* 0 padding allows the banner to touch the edges */
}

.main-box {
  margin-bottom:25px;
}

/* Specific centering for keypad content */
.keypad-main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 25px;
}

#header {
  grid-area: banner;
  
  height: 200px;
  background-color: white;
  background-size: cover;
  background-position: center;
  border-radius:45px 45px 0 0;
  margin-bottom:25px;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Images and Stickers */

.sticker1 {
float:right;
margin: 10px;
border-radius:10px;
}

.banner-sticker {
  
}

/* The actual pink content boxes */
section.box {
  border: 2px dotted #FF69B4;
  background-color: #f9dee1;
  border-radius: 25px;
  padding: 20px;
  margin: 20px; /* Gives space inside the white box */
  width: calc(100% - 40px); /* Adjusts for the margin */
  box-sizing: border-box;
}

/* --- 4. PRESERVED ART STYLES (Kept for later) --- */
.sidepixelart { max-width: 300px; height: auto; }
#SideImgL, #SideImgR { width: 18%; text-align: center; }

/* --- 5. KEYPAD STYLES --- */
.keypad-container {
  background: #222;
  padding: 20px;
  border-radius: 10px;
  width: 240px;
  border: 4px solid #444;
}

#keypad-display {
  width: 90%;
  height: 40px;
  background: #000;
  color: #0f0; 
  text-align: center;
  margin-bottom: 15px;
  border-radius: 25px;
}

.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad-grid button { padding: 15px; border-radius: 5px; cursor: pointer; }
.clear-btn { background: #ff4d4d !important; color: white; }
.enter-btn { background: #4dff88 !important; color: black; }

/* --- 6. FOOTER --- */
footer { text-align: center; padding: 20px; border-top: 2pt solid white; }