@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
body {
    font-family: "IBM Plex Mono", monospace;
    margin: 20px;
    background-color: #292929;
    color: white;
}

.container {
    background-color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #444;
    width: 80%; /* Or a max-width like 960px */
    max-width: 960px; /* Set a max-width for larger screens */
    margin-left: auto;
    margin-right: auto;
}

/* Remove generic block display for more specific control within form-group */
/*
label,
input,
textarea,
select {
    display: block;
    margin-bottom: 10px;
}
*/

textarea,
input[type="text"],
input[type="password"],
select {
    background-color: #444;
    color: white;
    border: 1px solid #555;
    padding: 8px; /* Added padding for better appearance */
    border-radius: 4px; /* Added border-radius */
    box-sizing: border-box; /* Ensures padding doesn't expand element size */
}

textarea {
    width: 100%; /* Default to full width within its container */
    min-height: 150px;
    margin-bottom: 10px; /* Retain some bottom margin */
}

input[type="text"], /* Specific input types */
input[type="password"],
select {
    width: 100%; /* Default to full width */
    margin-bottom: 10px; /* Retain some bottom margin */
}


input[type="submit"] {
    background-color: #e6e77d;
    color: #292929;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px; /* Submit Button Spacing */
}

input[type="submit"]:hover {
    background-color: #d4d56f;
}

a {
    color: #e6e77d;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block; /* Default for mobile */
    margin-bottom: 5px; /* Space between label and input on mobile */
}

.form-group input[type="checkbox"] {
    /* Basic styling for checkbox, can be enhanced */
    display: inline-block; /* Align with label text if possible */
    width: auto;
    margin-right: 5px;
    vertical-align: middle;
}


@media (min-width: 768px) {
    .form-group label {
        display: inline-block;
        width: 180px;
        vertical-align: top;
        margin-right: 10px;
        margin-bottom: 0; /* Remove bottom margin for desktop */
    }

    .form-group textarea,
    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group select {
        display: inline-block;
        width: calc(100% - 200px); /* (180px label + 10px margin + 10px buffer) */
        vertical-align: top;
        margin-bottom: 0; /* Remove bottom margin for desktop */
    }

    .form-group input[type="checkbox"] {
        /* Already inline-block, ensure proper alignment */
        margin-top: 5px; /* Adjust if needed for vertical alignment with label */
        vertical-align: middle; /* Re-affirm */
    }

    /* Adjust textarea width specifically if calc is problematic, or for preference */
    /* .form-group textarea {
        width: calc(100% - 200px);
    } */
}

.main-title {
  font-size: 1.5em; /* Smaller than default h1, adjust as needed */
  text-transform: uppercase;
  text-align: center; /* Added for centering as per later plan step */
}

.create-paste-title {
  color: #e6e77d;
  text-align: center; /* Added for centering as per later plan step */
}

footer img {
  margin-top: 20px; /* Add space above the image */
}

footer {
  text-align: center;
  margin-top: 30px; /* Add some space above the footer block */
}

pre.paste-content-wrapper {
  background-color: #444; /* Light grey, similar to inputs */
  color: white;
  padding: 15px;
  border-radius: 4px;
  white-space: pre-wrap; /* Ensures long lines wrap */
  word-wrap: break-word; /* Breaks long words if necessary */
  border: 1px solid #555; /* Optional: similar to inputs */
  text-align: left; /* Ensure paste content is left-aligned */
}

.container h2 {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 15px;
  font-weight: normal; /* Less emphasis than h1 */
}

.create-new-link-p {
  text-align: center;
  margin-top: 20px; /* Space after hr */
  margin-bottom: 20px; /* Space before footer or bottom of container */
}

.site-footer {
  text-align: center;
  margin-top: 30px;
  padding: 15px;
  font-size: 0.85em; /* Smaller font size */
  color: #aaa; /* Lighter color for less emphasis */
}

.site-footer p {
  margin: 5px 0; /* Adjust spacing between paragraphs in footer */
}

.site-footer a {
  color: #ccc; /* Slightly brighter link color for readability */
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer div {
  margin-top: 10px; /* Add some space above the div containing the image */
}