body {
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* always white */
}

div {
    height: 300px;
}

#container {
    background: linear-gradient(135deg, #000000, #555555); /* black to gray gradient */
    align-content: center;
    padding: 20px;
}

.data {
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
    height: 40px;
    font-size: 18px;
    color: #000000; /* black text */
    background: linear-gradient(180deg, #ffffff, #ffffff); /* white to light gray */
    border: none;
    outline: none; /* Remove blue outline on focus */
}

.data:focus {
    background: linear-gradient(180deg, #ffffff, #ffffff); /* Keep same background on focus */
}

textarea {
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
    height: 100px;
    font-size: 18px;
    color: #000000;
    background: linear-gradient(180deg, #ffffff, #ffffff);
    border: none;
    outline: none; /* Remove blue outline on focus */
}

textarea:focus {
    background: linear-gradient(180deg, #ffffff, #ffffff); /* Keep same background on focus */
}

#button {
    background: linear-gradient(135deg, #555555, #000000); /* gray to black */
    text-align: center;
    color: #ffffff; /* white text */
    width: 30%;
    min-width: 100px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

#button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: linear-gradient(135deg, #888888, #555555); /* lighter gray for disabled state */
}

/* If the screen size is 601px or more, set width to 600px. */
@media only screen and (min-width: 601px) {
  div {
    width: 600px;
  }
}

/* If the screen size is 601px or less, set width to full. */
@media only screen and (max-width: 600px) {
  div {
    width: 100vw;
  }
}