* {
  box-sizing: border-box;
}

body {
  background-image: url("bk.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  height: 519px;
 }

h1, p {
  text-align: center;
}

h1 {
  font-size: 5rem;
  font-family: 'Dancing Script', cursive;
  margin-top: 50px;;
  margin-bottom: -20px;
}

p {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.5rem;
}

button, input {
  margin-left: 39rem;
  margin-right: -39rem;
  align-items: center;
  justify-content: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.5rem;
}

li {
  margin-left: 40.5rem;
  font-family: 'Poiret One', cursive;
  font-size: 1.8rem;
}





/* <h1>To Do List</h1>
<p>Things Left to Do: <span>0</span></p>
<section class="container">
  <input id="inputField" type="text" name="" value="">
  <button id="addToDo" type="button" name="button">Add to List</button>
  <ul id="toDoContainer" class="to-dos"></ul>
</section>
<button id="clearList" type="button" name="button">Clear List</button>
<button id="clearCompleted" type="button" name="button">Clear Completed</button> */