:root {
    --heading-color: #4b0082;
    --text-color-green: #008000;
    --font-family-fantasy: 'MedievalSharp', cursive;
    --background-color-watermelon: #fc6c85; /* Watermelon-like color */
    --text-color-dark: #ffffff;  /* White text for contrast in dark mode */
    --border-radius-sharp: 0; /* Sharp edges */
    --font-family: var(--font-family-fantasy);
    --background-color: var(--background-color-watermelon);
    --text-color: var(--text-color-dark);
    --border-radius: var(--border-radius-sharp);
}
body {
    background-color: var(--background-color);
    color: var(--text-color-green);
    font-family: var(--font-family-fantasy);
    margin: 0;
    padding: 20px;
}

h1, h2 {
    font-family: var(--font-family);
    color: var(--heading-color);
}
ul, p, a, input, button {
    color: var(--text-color-green); /* Green for other text */
}
button, input {
    background-color: var(--background-color-watermelon);
    border-radius: var(--border-radius);
    border: 1px solid var(--text-color-green);
    font-family: var(--font-family-fantasy);
}
img {
    width: 10%;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sharp);
    border: 4px solid var(--text-color-green);
    border-color: #008000;
}
button {
    background-color: var(--text-color); /* Button inverts colors */
    color: var(--background-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
input {
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--text-color);
    padding: 5px;
}


a {
    color: var(--text);
}


input {
    display: block;
    margin: 20px 0 0;
    width: 160px;
    box-sizing: border-box;
    padding: 4px 8px;
    border-width: 1px; 
    border-style: solid;
    border-color:  var(--text);
    color: var(--text);
    background: none;
    border-radius: var(--image);
    font-family: var(--font);
}

::placeholder {
    color: var(--text);
}

button {
    border-radius: var(--image);
    padding: 5px 10px;
    border: none;
    background: var(--text);
    color: var(--background);
    font-weight: bold;
    box-sizing: border-box;
    display: block;
    margin: 8px 0;
    cursor: pointer;
    font-family: var(--font);
    width: 160px;
}

button {
    background-color: purple; /* Purple background for the button */
    color: #008000; /* Green text to match the input field */
    border: 1px solid purple; /* Match border with background */
    border-radius: var(--border-radius); /* Keep edges consistent */
    padding: 10px 20px; /* Adjust padding for a good button size */
    font-family: var(--font-family-fantasy); /* Use the existing font */
    font-weight: bold; /* Make the text bold */
    cursor: pointer; /* Pointer cursor on hover */
    width: auto; /* Adjust button size */
}

button:hover {
    background-color: #6a0dad; /* Darker purple on hover */
    color: #008000; /* Maintain green text on hover */
}