/*https://www.color-hex.com/color-palette/2609*/
body,
html,
dialog {
  background-color: #171917;
  color: #ffffff;
}

@media only screen and (min-width: 800px) {
  body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

body,
html,
p,
small,
input,
label,
span {
  font-family: "Inconsolata", monospace;
}

input {
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: groove;
}

input:focus {
  outline: none;
}

input,
button {
  background-color: #171917;
  color: white;
}
.help-link {
  float: right;
  font-size: small;
}
.task-container {
  margin: 2%;
  width: 100%;
  /* max-width: 600px; */
}
.task-container-new-task {
  width: 100%;
  font-size: 160%;
}

.tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tasks-list-item {
  padding-top: 1%;
  border-bottom: 1px solid #555;
}
.tasks-list-item,
.tasks-list-item-edit {
  font-size: 130%;
}
.tasks-list-item-focus {
  border-left: 1px solid #6a6767;
}
.tasks-list-item-edit {
  width: 96%;
}

.timer {
  font-size: 200%;
  font-weight: bold;
  margin-top: 20px;
}

.timer-button {
  cursor: pointer;
  border: none;
  margin: 20px 0px 0px;
  padding: 0px 12px;
  border-radius: 4px;
  box-shadow: #6a6767 0px 6px 0px;
  font-size: 120%;
  height: 55px;
  color: whitesmoke;
  font-weight: bold;
  width: 200px;
  background-color: #555;
  transition: color 0.5s ease-in-out 0s;
}
.time-selector {
  font-size: 200%;
  margin-left: 1%;
}
.notes {
  background-color: #202020; 
  color: white;
  max-width: 800px;
  width: 100%;
  min-height: 600px;

}