html {
    margin: 0;
    padding: 0;
    /* This ensures the background color is always visible */
    background-color: #CFFFE5; 
}

body {
    margin: 0;
    padding: 0;
    /* 100vh = 100% of the viewport height */
    min-height: 100vh; 
    
    /* FLEXBOX MAGIC */
    display: flex;
    flex-direction: column;

    /* THE BORDER */
    border: 6px solid #08f26e;
    box-sizing: border-box; /* Keeps the border inside the 100vh */
    
    font-family: "Courier New", Courier, monospace;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    
    /* This tells the wrapper to expand to fill all available space in the body */
    flex-grow: 1; 
}

h1 {
    font-size: 3.5rem;
    color: #2A52BE;
    text-align: center;
    margin: 0;
}

.nav-row {
    margin: 30px 0 50px 0;
    display: flex;
    gap: 15px;
    justify-content: center;
}

button {
    background-color: #ACE7FF;
    border: 4px solid #2A52BE;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 15px;
    transition: transform 0.1s ease-in-out;
}

/* This is the magic part that was missing */
button:hover {
    transform: scale(1.08);    /* The 1.03x pop you wanted */
}

/* Common box style */
.content-box {
    background-color: #ACE7FF;
    border: 10px solid #2A52BE;
    border-radius: 50px;
    width: 80%;
    max-width: 600px;
    margin-bottom: 40px;
    padding: 20px;
}


.writing-container {
    display: flex;
    width: 90%;
    max-width: 1000px;
    gap: 20px;
    align-items: flex-start; /* Keeps sidebar from stretching weirdly */
}

.sidebar {
    width: 30%;
    min-width: 200px;
    padding: 15px;
    border-radius: 25px; /* Slightly tighter circles for the sidebar */
    text-align: left;
}

.viewer {
    flex-grow: 1; /* Occupies the rest of the center */
    padding: 30px;
    min-height: 500px;
    text-align: left;
}

/* Folder List Styling */
.folder-name {
    cursor: pointer;
    font-weight: bold;
    color: #2A52BE;
    margin-top: 10px;
}

.file-link {
    display: block;
    margin-left: 20px;
    cursor: pointer;
    color: #555;
    text-decoration: underline;
    font-size: 0.9rem;
}

pre {
    white-space: pre-wrap; /* Keeps text formatting but wraps lines */
    font-family: inherit;
}