header {
  text-align: left;
  font-weight: 800;
  font-size: 28px;
  border-bottom: solid 3px #DEDEDE;
  display: flex;
  justify-content: space-between;
}

footer {
  display: flex;
  flex-flow: row-reverse;
  padding: 5px 20px;
}

.headers {
  margin-top: 20px;
  margin-bottom: -10px;
  font-size: 20px;
}

#list-head {
  margin-left: 2.5%;
  width: 30.5%;
  display: inline-block;
  text-align: center;
}

#note-head {
  width: 60%;
  margin-left: 5%;
  display: inline-block;
  text-align: center;
}

noteList {
  margin-top: 20px;
  display: inline-block;
  margin-left: 2.5%;
  width: 30.5%;
  height: 400px;
  overflow: scroll;
  border: solid 3px #929292;
  border-radius: 5px;
  background-color: #DEDEDE;
}

.within-list {
  cursor: pointer;
}

.list-title {
  font-weight: 600;
  font-size: 20px;
  padding: 5px 5px 0 5px;
}

.list-date {
  font-weight: 200;
  font-style: italic;
  font-size: 12px;
  padding: 0 5px 0 5px;
}

.list-text {
  padding: 0 5px 5px 5px;
  border-bottom: solid 1px black;
}

notePad {
  display: inline-block;
  border: solid 3px black;
  border-radius: 10px;
  height: 400px;
  overflow: scroll;
  width: 60%;
  margin-left: 5%;
  margin-top: 0;
}

#note-title {
  font-size: 24px;
  padding: 0 0 5px 5px;
  border-bottom: solid 2px #DEDEDE;
}

#note-body {
  padding: 5px;
}

#body-field, #title-field {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
}

#title-field {
  font-size: 18px;
  font-weight: 600;
}

#body-field {
  font-size: 14px;
  font-weight: 500;
  height: 400px;
}

#color-select {
  display: flex;
  flex-flow: row-reverse nowrap;
  padding: 5px 10px 0 0;
}

.color-box {
  border: solid 2px #929292;
  height: 10px;
  width: 10px;
  margin-left: 5px;
}

.display {
  display: visible;
}

.no-display {
  display: none;
}

button {
  margin: 5px;
  border: solid 3px grey;
  border-radius: 10%;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: #DEDEDE;
}

button:hover, .color-box:hover {
  cursor: pointer;
}

#listed:nth-child(odd):hover {
  cursor: pointer;
}

#btn-save {
  background-color: #2F5032;
}

#btn-delete {
  background-color: #E41A36;
}

.white {
  background-color: white;
}

.orange {
  background-color: #FFD37F;
}

.banana {
  background-color: #FFFA81;
}

.honeydew {
  background-color: #D5FA80;
}

.flora {
  background-color: #78F87F;
}

.aqua {
  background-color: #79FBD6;
}

.ice {
  background-color: #79FDFE;
}

.sky {
  background-color: #7AD6FD;
}

.orchid {
  background-color: #7B84FC;
}

.lavendar {
  background-color: #D687FC;
}

.pink {
  background-color: #FF89FD;
}