@media (prefers-color-scheme: dark) {
  :root {
  --background-color: #1e1e1e;
  --foreground-color: #252526;
  --non-focus-text-color: #8f8f90;
  --focus-text-color: #c7c4c2;
  --hover: #404042;
  }
  button, input {
    background-color: var(--non-focus-text-color);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #c4c4c4;
    --foreground-color: #989899;
    --non-focus-text-color: #3e3e3e;
    --focus-text-color: #000;
  }
}

body {
  margin: 0;
}

* {
    letter-spacing: 3px;
    font-family: 'Alegreya Sans SC', sans-serif;
  }
body {
  color: var(--focus-text-color);
  background-color: var(--background-color);
}

h1 {
  font-size: 0.68rem;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

table {
  border-collapse: collapse;
  border: 1px solid;
  border-color: var(--non-focus-text-color);
}

table tr, td, th {
  border: 1px solid;
  border-color: var(--non-focus-text-color);
  text-align: center;
}


div {text-align: center;}
.main {
  width: 100%;
}
.main .page {
  height: 100%;
} 
.grid-container {
  display: grid;
  grid-template-areas:
    "header"
    "user-input"
    "events-data"
    "footer";
    grid-template-columns: auto;
    grid-template-rows: 3rem 8rem 50rem 5rem;
}

#sunrisesAndSunsets {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  flex-direction: row;
  justify-content: center;
}

.master-user-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
}