/* --- GENERAL & HEADER STYLES --- */

#top-header-bar {
    position: fixed; /* Make the header stick to the top */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    /* FINAL HEIGHT: Set to 50px */
    height: 50px; 
    /* FINAL BACKGROUND */
    background-color: rgba(193, 198, 170, 0.8); 
    /* FINAL Z-INDEX: Higher than content and menu */
    z-index: 1002; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    display: flex;
    align-items: center; /* Vertically center content */
    padding: 0 10px; 
    border-bottom: 2px solid #333; 
}

body.noscroll {
    overflow: hidden;
}

/* New container for main content to prevent being hidden by fixed nav */
#main-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pushing content down to account for the fixed 50px header bar */
    padding-top: 60px; 
}


/* --- HAMBURGER MENU BUTTON STYLES (SHARED) --- */

/* Position the hamburger button fixed in the top-left */
.hamburger {
    /* Use position: relative inside fixed header bar */
    position: relative; 
    /* z-index: 1001; No longer needed as it's in header (z-index: 1002) */
    top: 0; 
    left: 0; 
    margin-right: auto; /* Push content right */
    
    /* Custom styling for the button (shared) */
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px; /* Size of the icon area */
    height: 30px;
}

/* Style for the three lines (bars) of the hamburger icon */
.bar {
    width: 100%;
    height: 3px;
    background-color: #333; /* Dark color for visibility */
    border-radius: 1px;
    transition: all 0.3s linear;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
}

/* --- BOTTOM-LEFT HAMBURGER BUTTON (NEW) --- */

.hamburger-bottom-left {
    z-index: 1001; /* Ensure it's above the main content */
    position: fixed;
    bottom: 10px; /* 10px from the bottom */
    left: 10px; /* 10px from the left */
    
    /* Inherit shared button styles */
    background-color: rgba(193, 198, 170, 0.8); /* Optional: give it a background */
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px; 
    height: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- NAVIGATION MENU STYLES --- */

.nav-menu {
    z-index: 1000; /* Lower than the header (1002) and buttons (1001) */
    position: fixed;
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: 250px; 
    background-color: rgba(245, 245, 220, 1.0); 
    box-shadow: 2px 0 5px rgba(0,0,0,0.5); 
    
    /* Menu is off-screen by default */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    
    display: flex;
    flex-direction: column;
    /* Space for the fixed 50px header bar */
    padding-top: 75px; 
    align-items: flex-start;
    gap: 15px; 
}

/* When the menu is open, slide it into view */
.nav-menu.open {
    transform: translateX(0);
}
/* ... (Existing nav-menu a, nav-menu button, etc. styles) ... */

/* ... (Remaining styles like body, h2, p, button, @media queries) ... */
body {
    font-family:'Times New Roman', Times, serif;
    font-size: 1.5rem;
    
    padding: 0;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    display:flex;
    flex-direction: column;
    align-items: center;
    
}

/* --- END HAMBURGER MENU STYLES --- */
    
/* General Styles */
#header, #footer {
    text-align: Bottom;
    font-size: 0.9rem;
    margin: .5rem 0 .5rem;
    padding: 1rem;
    background-color: rgba(193, 198, 170, 0.3);
    border-radius: 5px;
    width: 100%;
    
}



h2,  {
    text-align: center;                  
    margin-bottom: .5rem ;
    margin-top: 7rem;
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
}

h3 {
    text-align: center;                  
    margin-bottom: .5rem ;
    margin-top: 7rem;
    font-family: Arial, sans-serif;
    font-size: 1.0rem;
}


#dailyVerse {
    margin-bottom: .5rem;
    text-align: center;
    padding: .5rem;
    width: 100%;
}

#time {
    
    font-family: Arial, sans-serif;                
    display:flex;
    justify-content:center ;
    align-items: start;                  
    border-radius: 10px;
    width: 100%;
    padding: 3px;       
    

}
/* box css examples */
.box-style-one {
  background-color: lightblue;
  border: 2px solid blue;
  padding: 20px;
  margin-bottom: 2rem;
}

.box-style-two {
  background-color: lightcoral;
  border: 2px solid red;
  border-radius:15px;
  padding: 20px;
  margin-top: 10rem;
  font-size: 2.5rem;
  
}


.pic-verse {
  border-radius:15px;
  padding: 5px;
  font-size: 1.5rem;
  margin-bottom: 25rem;
  Margin-top: 1rem;
  
}





.container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 1rem;
}

img {
    width: 95%;
    max-height: 550px;
    max-width: 1000px;
    border: 2px solid rgb(119, 152, 128);
    border-radius: 8px; 
    margin-top: 1rem;
    margin-bottom: 1rem;
}



iframe {
    
    max-width: 100%;
    margin-top: 2rem;
    
    
}

/* Hamburger Button */
button {
    font-size: 1rem;
    padding: 0.5rem .5rem;
    margin: .5rem .5rem;      
    color:rgb(5, 6, 6);         
    background-color: rgba(224, 193, 109, 0.452);
    border-color:beige;
    cursor: pointer;
    max-width: auto;
    font-family: Arial, sans-serif;
}


.button-container {
    display:flex;
    flex-direction: column;
    align-content: center;
    justify-content: right;
    gap: 3px;
    margin: 2px auto;
    max-width:100%;
    padding: 3px;
}

/* Ensure the general button containers are hidden or removed from the main flow */
/* The buttons are now inside the .nav-menu */
.Bottom-button-container:not(.nav-menu .Bottom-button-container) {
    display: none; 
}

ul {
    display:flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    gap: .2rem;            
    border-radius: 8px;            
    padding: 2px;
    border-width:100%;
}

form {
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top:10px;
    width:100%;  
}


@media (max-width: 400px) {
    .menu button {
        font-size: 0.9rem;
    }
}

/* --- NOTEPAD STYLES --- */

/* 1. Default (Mobile First) Styles: Use 90% width for small screens */
#myScratchpad {
    /* Set height using rows */
    height: 15rem; /* ~15 lines high, based on your original rows="15" */
    
    /* Default to a large percentage of the screen width */
    width: 90%; 
    max-width: 90%; /* Prevent it from being wider than the percentage */
    
    /* General styling for the notepad */
    font-size: 1rem;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Ensures padding/border is inside the 90% width */
}

.notepad-container {
    /* Ensure the container doesn't force a minimum width */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the textarea and button */
    margin-bottom: 2rem;
}

/* 2. Desktop/Browser Styles: Use a fixed width for larger screens */
/* Target screens wider than 600px (e.g., your desktop browser) */
@media (min-width: 600px) {
    #myScratchpad {
        /* Set a fixed width similar to what cols="80" provided */
        width: 1200px; /* Adjust this value to your preferred desktop width */
        max-width: 1200px; /* Ensure it stays fixed */
        height: 15rem; /* Keep the height consistent */
    }
}