/* Base styling for body and html */
body, html {
    padding: 0;
    margin: 0;
    background: #000;
    font-family: 'Courier New', Courier, monospace;
    color: #00ff00;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Styling for labels */
label {
    display: block;
    margin: 5px 0; /* Adjusted margin for consistent alignment */
    color: #666;
}

/* General input, button, select, and textarea styling */
input, button, select, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: black;
    color: #0c0;
    border: 1px solid #151;
    box-shadow: 0 2px 3px #f0f0f0;
    appearance: none; /* Remove default style of select in WebKit browsers */
    font-family: 'Courier New', Courier, monospace;
}

/* Input focus styling */
input:focus, textarea:focus {
    outline: none;
    background-color: #121212;
    /* Terminal-like cursor effect */
    caret-color: #0f0;
}

/* Button styling */
button {
    background-color: #333; /* Darker button background */
    color: #0f0; /* Consistent text color */
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button:hover {
    background-color: #444; /* Slightly lighter on hover */
}

/* Styling for the controls container */
#controls {
    width: 25%;
    float: right;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    background-color: #000; /* Black background for control panel */
    margin-bottom: 20px; /* Space before the next section */
    overflow: hidden; /* Fixes any overflow issues */
}

/* Header within controls */
#controls h2 {
    color: #00cc00;
}

/* Dividers within controls */
#controls div {
    margin-bottom: 10px;
}

/* Specific styling for compact controls and center controls */
.input-group, #centerControl, .angle-group {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align items vertically for consistent height */
}

#centerControl {
    flex-wrap: nowrap;
}

#centerControl i {
    font-size: 1.2em; /* Slightly larger icon for visibility */
    margin-right: 5px; /* Closer to the label */
    color: #0c0; /* Ensures icon is visible and matches text color scheme */
}

#actionButtons, .angle-group {
    display: flex;
    justify-content: space-between;
}

.angle-group .flex-item {
    display: flex;
    flex-direction: column;
    width: 30%; /* Adjusted for three items on one line */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #controls, #glcanvas, .angle-group {
        width: 100%;
        float: none;
    }

    .angle-group .flex-item {
        width: 100%; /* Full width for mobile */
        margin-bottom: 10px; /* Space between inputs */
    }

    #centerControl, .input-group {
        flex-direction: column;
    }

    #centerControl input, .input-group input {
        width: 100%; /* Full width inputs on smaller screens */
    }
}

/* Styling for the mirror technique */
/* Deprecated for now */
.mirror {
  visibilty:hidden; display:none;
  position: absolute;
  top: 0;
  left: 0; /* Aligns the mirror to the top-left corner of the container */
  right: 0;
  bottom: 0;

  padding: 10px; /* Match the textarea padding */
  pointer-events: none; /* Prevents interaction with the mirror */
  z-index: 1; /* Ensures the mirror is behind the textarea */
  color: #00ff00; /* Ensures mirror text color matches the intended style */
  font-family: 'Courier New', Courier, monospace; /* Match the textarea font family */
  font-size: 16px; /* Match the textarea font size */
  line-height: normal; /* Adjust line height to match the textarea */
  white-space: pre-wrap; /* Mimics the wrapping of the textarea */
  overflow-y: auto; /* Allows scrolling to match the textarea */
  word-wrap: break-word; /* Ensures long words wrap as in the textarea */
}

.textarea-container {
  position: relative; /* Ensures the container is the reference point for positioning */
  width: 100%; /* Match the width of the container to its parent */
}

#rule {
    background-color: #262626; /* Or any preferred color */
    color: #00ff00; /* Text color */
    border: 1px solid #006400; /* Border color */
    padding: 5px;
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-family: 'Courier New', Courier, monospace; /* Font style */
}

#rule:focus {
    outline: none; /* Removes the outline to keep the focus style clean */
}

.highlight {
    background-color: #aa28aa; /* Highlight background */
    color: #0f0; /* Highlight color */
}

/* Additional styles for action buttons */
#actionButtons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#update, #tweet {
    flex: 1;
    margin: 0 5px; /* Ensure spacing between buttons */
    font-size: 14px; /* Adjust font size as needed */
}

/* Styles for the tweet button */
#tweet {
    background-color: #1DA1F2;
    color: white;
}

#made-by {
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  font-family: 'Courier New', Courier, monospace;
  color: #00ff00;
  background-color: #000000;
  border-top: 1px solid #003300; /* Optional: adds a top border for visual separation */
}

div#made-by {
    float: left;
    position: absolute;
    left: 10px;
    bottom: 11px;
    color: #00AA00;
}

#made-by a {
  text-decoration: none;
  color: #00AA00;
}

#made-by a:hover {
  text-decoration: underline;
}