body {
    background: #fff;
    color: #333;
    font-family: Lato, sans-serif;
  }

  ul {
    margin: 0;
    padding: 0;
  }
  li * {
    float: left;
}
  li {
    overflow: hidden;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
/* Hidden removed the dots for me, I removed them somehow, but this is generally easier */
  }
  ul li.editMode label {
    display: none;
/* piece for js - if there is an edit mod class */
}
li > label {
    font-size: 18px;
    line-height: 40px;
    width: 237px;
    padding: 0 0 0 11px;
/* font width and left padding for labels */
}
ul li input[type=text] {
    display: none;
/* piece for js to not display the text in the input, because it will be in the label */
}

li > input[type="text"] {
    width: 226px;
}
#completed-tasks label {
    text-decoration: line-through;
    color: #888;
/* piece for js - if there is an id complete, it will cross out the label */
}
ul li.editMode input[type=text] {
    display: block;
/* piece for js = if I have edit mode for li, then I show the text that was previously in the label and now in the input */
}

ul li input[type=text] {
    display: none;
/* if I do not have edit mode, then the input itself disappears in its place there will be a label with the same text */
}
li > input[type="text"] {
    width: 226px;
}

li.priority {
    background-color: #faebd7;
}
input[type="text"] {
    margin: 0;
    font-size: 18px;
    line-height: 18px;
    height: 18px;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    font-family: Lato, sans-serif;
    color: #888;
/* piece for js here I set the inputs a distinct view, frames, radius font color */
}

li > input[type="checkbox"] {
    margin: 0 10px;
    position: relative;
    top: 15px;
/* a piece for js and it is important that the position is relative because the checkbox is needed on the left */
}
  button {
    background: none;
    border: 0px;
    color: #888;
    font-size: 15px;
    width: 60px;
    margin: 10px 0 0;
    font-family: Lato, sans-serif;
    cursor: pointer;
/* in fact - remove the back, borders and all that, in general, make the floor transparent like this */
  }
  .header {
    /* add */
}
.header_main {
    /* it is not yet clear what will happen here */
}
.header_text {
  display:flex;
  justify-content: space around;
      /* stupidly align everything to the center. repeated many times but quickly and easily */

}
.container {
    display: block;
    width: 400px;
    margin: 100px auto;
    /* pure base container convenient for me */
}
.main {
    display: flex;
    justify-content: space-around;
}
.main__form {
    position: relative;
}
.main__form-input-label {
    position: absolute;
    top: -10px;
    left: 10px;
    background: #fff;
    padding: 0 5px;
}
.main__form-input {
    background: #fff;
    padding: 10px;
    border-radius: 11px;
    width: 200px;
}
.main__form-button {
/* I haven't figured out how to place the button away from the checkbox so that it looks usable */
    margin-left: 90px;
}

.station {
    display: flex;
    justify-content: space-around;
    border-bottom: 2px solid #333;
    padding: 30px 0 10px;
/* the piece where the content will be located below, I need to separate the supposedly section but not give it something specific visual separation */
}
.chebox-input{
    display: flex;
    align-items: baseline;
}

label input:focus + .main__form-input-label,
label input:valid + .main__form-input-label {
    top: -1.5rem;
    left: 0.5rem;
    font-size: 0.9rem;
}
/* in order for this feature to work, the input must have a parameter, required - without it there will always be Valid!!*/
/* the only solution for animation with this block without JS that works perfectly and immediately put a transition and slow down then generally top */