:root {
  --bg-color-light: #f4f4f4;
  --text-color-light: #222;
  --bg-color-dark: #595959;
  --text-color-dark: #f4f4f4;

  --second-color: #1e2a38;
  --second-color-light: #004d5b;

  --second-color-dark: #1f2b38;
  --hover-color-light: #2e3b4e;
}

html[data-theme="light"] {
  --second-color: var(--second-color-light); /*the color of the header and footer*/
  background-color: var(--bg-color-light); /*background color*/
  color: var(--text-color-light); /*text color*/
}

html[data-theme="dark"] {
  --second-color: var(--second-color-dark); /*the color of the header and footer*/
  background-color: var(--bg-color-dark); /*background color*/
  color: var(--text-color-dark); /*text color*/
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: inherit;           /* uses the color of the text */
  text-decoration: none;    /* removes underline */
}

header {
  background-color: var(--second-color);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#theme-toggle {
  padding: 10px 15px;
  border: none;
  background-color: white;
  color: var(--second-color);
  cursor: pointer;
  border-radius: 5px;
}

#theme-toggle:hover {
  background-color: #ddd;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px; /* enough space for padding */
  
  display: flex;
  align-items: center;  /* vertical alignment */
  justify-content: center; /* horizontal alignment */
  
  background-color: var(--second-color);
  color: #fff;
}

.header-link {
  display: block;            /* makes the link a box */
  width: 100%;               /* fills entire header width */
  height: 100%;              /* fills entire header height */
  text-decoration: none;
  color: inherit;
  text-align: left;
  line-height: 30px;         /* centers text vertically (or use flex) */
}

.main-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*height: calc(100vh - 160px);*/
  text-align: center;
  padding: 20px;
}

#search-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#search-input {
  padding: 15px;
  width: 300px;
  max-width: 80%;
  font-size: 1.2rem;
  border: 2px solid var(--second-color);
  border-radius: 5px;
}

#search-form button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: var(--second-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#search-form button:hover {
  background-color: var(--hover-color-light);
}

.result-text {
  font-size: 2rem;
  margin-top: 20px;
  font-weight: bold;
}