body {
    background-color: #333333; /* Gruvbox dark background */
    color: #ebdbb2; /* Gruvbox dark foreground */
    font-family: sans-serif;
    display: flex; /* Enable flexbox for centering */
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    min-height: 100vh; /* Ensure full viewport height */
    margin: 0; /* Remove default margins */
}

#code-form {
    display: flex; /* Enable flexbox for form elements */
    flex-direction: column; /* Arrange form elements vertically */
    align-items: center; /* Center form elements horizontally */
    width: 60%; /* Adjust the width as needed */
    margin-bottom: 20px; /* Space between form and link */
}

#code-editor-container {
    width: 100%; /* Take full width of the form */
    height: 400px; /* Fixed height - adjust as needed */
    border: 1px solid #665044; /* Gruvbox border color */
    overflow-y: auto; /* Make content scrollable */
    margin-bottom: 10px; /* Space below the code editor */
    background-color: #282828; /* Gruvbox dark background */
}

#code-editor-container .CodeMirror { /* Target CodeMirror inside the container */
    pointer-events: auto; /* Re-enable pointer events for CodeMirror itself */
}

.CodeMirror {
    height: auto; /* Let CodeMirror control its height within the container */
}

#link {
    text-align: center; /* Center the link text */
    width: 50%; /* Take full width minus padding and border */
}

h1 {
    color: #fabd2f; /* Gruvbox yellow for headings */
    margin-bottom: 20px; /* Space below the heading */
}

button {
    background-color: #689d6a; /* Gruvbox green */
    color: #282828;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

button:hover {
    background-color: #427b3f; /* Darker green on hover */
}

select {
    background-color: #3c3836; /* Gruvbox darker gray for select */
    color: #ebdbb2; /* Gruvbox light foreground */
    border: 1px solid #665044; /* Gruvbox border color */
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
    font-size: 16px; /* Adjust font size as needed */
    appearance: none; /* Remove default select arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ebdbb2' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24h-24z' fill='none'/></svg>"); /* Add custom arrow */
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px; /* Adjust padding to make space for the arrow */
    transition: border-color 0.3s ease; /* Smooth border transition */

}

select:hover {
    border-color: #928374; /* Lighter border on hover */
}

input[type="text"] {
    background-color: #3c3836; /* Gruvbox darker gray for input */
    color: #ebdbb2; /* Gruvbox light foreground */
    border: 1px solid #665044; /* Gruvbox border color */
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
    font-size: 16px; /* Adjust font size as needed */
    width: calc(100% - 18px); /* Take full width minus padding and border */
    box-sizing: border-box; /* Include padding and border in width calculation */
    transition: border-color 0.3s ease; /* Smooth border transition */
}

input[type="text"]:hover {
    border-color: #928374; /* Lighter border on hover */
}