/* ================================
   🌟 Retro Terminal Theme CSS 🌟
   ================================ */

/* 🔹 Apply styles to the whole page */
body {
    background-color: black; /* Black background */
    color: #00FF00; /* Bright green font */
    font-family: "Courier New", Courier, monospace; /* Monospace font */
    text-align: center;
    padding: 20px;
    font-size: 24px;
}

/* Adjust container width */
.container {
    width: 90%; /* Make the container take up 90% of the screen */
    max-width: 1200px; /* Set a max width for very large screens */
    margin: auto;
    padding: 20px;
    border: 2px solid #00FF00;
    border-radius: 10px;
    box-shadow: 0 0 10px #00FF00;
    overflow-x: auto; /* Enables horizontal scrolling if needed */
}

/* Ensure tables fit inside the container */
table {
    width: 100%; /* Table takes full width of the container */
    border-collapse: collapse; /* Removes spacing between table borders */
    color: #00FF00; /* Green text */
}

/* Table Borders */
th, td {
    border: 1px solid #00FF00;
    padding: 10px;
    text-align: left;
}

/* Ensure horizontal scrolling for extra wide tables */
.table-wrapper {
    overflow-x: auto; /* Enables horizontal scrolling */
    width: 100%;
}

/* 🔹 Headings & Text */
h1 {
    text-shadow: 0 0 10px #00FF00; /* Glow effect */
}

p {
    font-size: 1.2em;
}

/* 🔹 Input Fields (Text, Password, Textarea) */
input[type="text"], input[type="password"], textarea {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    background-color: black;
    color: #00FF00;
    border: 2px solid #00FF00;
    font-family: "Courier New", Courier, monospace;
    font-size: 24px;
    text-align: center;
    outline: none;
    box-shadow: 0 0 8px #00FF00;
}

/* 🔹 Textarea Specific Styling */
textarea {
    resize: vertical; /* Allow resizing */
    min-height: 100px;
    color: #00FF00 !important; /* Force bright green text */
    background-color: black !important; /* Force black background */
}

/* 🔹 Input Focus Effect */
input:focus, textarea:focus {
    border-color: #00FF7F;
    box-shadow: 0 0 15px #00FF7F;
}

/* 🔹 Buttons & Submit */
button, input[type="submit"] {
    background-color: black;
    color: #00FF00;
    border: 2px solid #00FF00;
    padding: 10px 20px;
    font-size: 18px;
    font-family: "Courier New", Courier, monospace;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 8px #00FF00;
    transition: 0.3s;
}

/* 🔹 Button Hover Effect */
button:hover, input[type="submit"]:hover {
    background-color: #00FF00;
    color: black;
    border: 2px solid black;
    box-shadow: 0 0 15px #00FF7F;
}

/* 🔹 Button Focus Effect */
button:focus, input[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 20px #00FF7F;
}

/* 🔹 Form Alignment */
form {
    margin-top: 20px;
}