@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

html {
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
    font-family: 'Orbitron', sans-serif; /* Updated font-family */
    background: linear-gradient(to bottom, #111, #000);
    color: #fff; /* Changed default text color to white for better contrast on dark background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-panel {
    background-color: rgba(20, 20, 20, 0.7); /* Semi-transparent dark background */
    padding: 2em; /* Using em for scalable padding */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4); /* Futuristic blue glow */
    width: 400px; /* Or max-width as preferred */
    max-width: 90%; /* Ensure responsiveness on smaller screens */
    text-align: center; /* Center text inside the panel */
    animation: pulseGlow 3s infinite ease-in-out;
}

h1 {
    color: #00BFFF; /* Deep Sky Blue color */
    text-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF; /* Enhanced glow */
    text-align: center; /* Center the main title */
    font-weight: 700; /* Make title bolder if Orbitron supports it */
}

form {
    background-color: rgba(10, 10, 10, 0.5); /* Very dark, semi-transparent form background */
    padding: 20px;
    border-radius: 8px;
    /* Removed box-shadow from form to let panel shadow dominate */
    margin-top: 20px; /* Add some space above the form */
}

label {
    display: block;
    margin-bottom: 10px; /* Increased margin */
    color: #ccc; /* Lighter label color */
    text-align: left; /* Align labels to the left */
    font-weight: 400; /* Regular weight for labels */
}

input[type="number"] {
    padding: 12px; /* Increased padding */
    border-radius: 4px;
    border: 1px solid #555; /* Darker border */
    background-color: #444; /* Darker input background */
    color: #fff; /* White text in input */
    width: calc(100% - 24px); /* Adjust width considering padding and border */
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif; /* Ensure input also uses Orbitron */
}

textarea {
    background-color: #222;
    border: none;
    border-bottom: 1px solid #555; /* Default state */
    color: #eee;
    padding: 10px;
    width: calc(100% - 20px); /* Considering padding */
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 20px; /* Added margin for spacing */
    resize: vertical; /* Allow vertical resize, disable horizontal */
    min-height: 100px; /* Minimum height for textarea */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Added transition */
}

textarea:focus {
    outline: none;
    border-bottom: 1px solid #00BFFF; /* Highlight color on focus */
    border-color: #00BFFF; /* Ensure border-color is part of transition */
    box-shadow: 0 0 5px rgba(0, 191, 255, 0.5); /* Subtle glow on bottom border */
}

button {
    background-color: transparent;
    border: 1px solid #00BFFF;
    color: #00BFFF;
    padding: 10px 20px;
    border-radius: 4px; /* Keep consistent border-radius */
    cursor: pointer;
    font-size: 16px; /* Slightly larger font */
    width: 100%; /* Make button full width */
    font-family: 'Orbitron', sans-serif;
    font-weight: 700; /* Bolder button text */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Added box-shadow to transition */
}

button:hover {
    background-color: #00BFFF;
    color: #000; /* Black text on hover */
    box-shadow: 0 0 10px #00BFFF; /* Enhanced glow on hover */
}

h2 {
    margin-top: 20px;
    color: #fff; /* Ensure result/error heading is white */
    font-weight: 400; /* Regular weight for result headings */
}

.error {
    color: #ff4c4c; /* Brighter red for errors for better visibility */
    text-shadow: 0 0 5px #ff4c4c; /* Add a glow to errors */
}

footer { /* Added footer styling */
    margin-top: 30px;
    color: #aaa;
    font-size: 0.9em;
    font-weight: 400;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.7), 0 0 10px rgba(0, 191, 255, 0.5) inset;
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
  }
}

.result-container {
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: rgba(10, 10, 10, 0.5);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}