:root {  
  --mobile-hero-app-row: 9fr;  
 }  
 html {  
  box-sizing: border-box;  
 }  
 *, *:before, *:after {  
  -webkit-box-sizing: border-box;  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
 }  
 body {  
  font-family: 'Roboto', sans-serif;  
 }  
 .hero {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 1fr 550px 1fr;  
  grid-template-columns: 1fr 550px 1fr;  
  -ms-grid-rows: 110px 9fr 1fr;  
  grid-template-rows: 110px 9fr 1fr;  
  background: palevioletred;  
  height: 100vh;  
  width: 100vw;  
 }  
 .title {  
  -ms-grid-column: 2;  
  grid-column: 2;  
  -ms-flex-item-align: center;  
  -ms-grid-row-align: center;  
  align-self: center;  
  -ms-grid-column-align: center;  
  justify-self: center;  
  color: black;  
  font-size: 50px;  
 }  
 .todo-app {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-rows: 60px 1fr 45px;  
  grid-template-rows: 60px 1fr 45px;  
  -ms-grid-column: 2;  
  grid-column: 2;  
  -ms-grid-row: 2;  
  grid-row: 2;  
  background: white;  
  overflow: auto;  
  border-radius: 7px;  
  -webkit-box-shadow:   
   0 10px 20px rgba(0, 0, 0, 0.19),  
   0 6px 6px rgba(0, 0, 0, 0.23);  
  box-shadow:   
   0 10px 20px rgba(0, 0, 0, 0.19),  
   0 6px 6px rgba(0, 0, 0, 0.23);  
  /* Because scrollbar is usually between 14-18px. */  
  margin-right: -18px;  
  margin-left: -18px;  
 }  
 .todo-menu-1 {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 50px 1fr;  
  grid-template-columns: 50px 1fr;  
  -ms-grid-rows: 60px;  
  grid-template-rows: 60px;  
  -webkit-box-align: stretch;  
  -ms-flex-align: stretch;  
  align-items: stretch;  
  -webkit-box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.19);  
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.19);  
  border-bottom: 1px solid #e6e6e6;  
 }  
 .add-todo-text-input {  
  outline: none;  
  border: none;  
  border-bottom: 1px solid #e6e6e6;  
 }  
 ::-webkit-input-placeholder {  
  color: slategray;  
  font-style: italic;  
 }  
 :-ms-input-placeholder {  
  color: slategray;  
  font-style: italic;  
 }  
 ::-ms-input-placeholder {  
  color: slategray;  
  font-style: italic;  
 }  
 ::placeholder {  
  color: slategray;  
  font-style: italic;  
 }  
 :-moz-placeholder, ::-moz-placeholder {  
  opacity: 1;  
 }  
 .toggle-all, .delete-button, .delete-completed-button, .menu-2-button {  
  background: none;  
  border: none;  
  outline: none;  
 }  
 .toggle-all {  
  color: #e6e6e6;  
  -ms-grid-column-align: stretch;  
  justify-self: stretch;  
  text-align: center;  
 }  
 .toggle-all-checked {  
  color: #4d4d4d;  
 }  
 .rotate {  
  display: inline-block;  
  font-size: 20px;  
  -webkit-transform: rotate(90deg);  
  -ms-transform: rotate(90deg);  
  transform: rotate(90deg);  
  /* Prevent rotate class from being clicked so that toggle-all button can be clicked instead. */  
  pointer-events: none;  
 }  
 .todo-menu-2 {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 2fr 3fr 2fr;  
  grid-template-columns: 2fr 3fr 2fr;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  color: black;  
  background: #f4f5f6;  
  font-size: 14px;  
  font-weight: 300;  
 }  
 .todo-menu-2 .todos-left {  
  -ms-grid-column-align: start;  
  justify-self: start;  
  padding-left: 20px;  
 }  
 .todo-menu-2 .todo-menu-2-buttons {  
  -ms-grid-column-align: center;  
  justify-self: center;  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: auto auto auto;  
  grid-template-columns: auto auto auto;  
  grid-gap: 3px;  
 }  
 .todo-menu-2 .delete-completed-button, .todo-menu-2 .menu-2-button, .todo-menu-2 .todos-left {  
  font-family: inherit;  
  color: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
 }  
 .todo-menu-2 .menu-2-button {  
  padding: 2px 8px;  
  border: 1px solid rgba(137, 103, 208, 0);  
  border-radius: 3px;  
 }  
 .todo-menu-2 .menu-2-button:hover {  
  border: 1px solid rgba(137, 103, 208, 0.5);  
 }  
 .active {  
  border: 1px solid rgba(137, 103, 208, 1) !important;  
 }  
 .todo-menu-2 .delete-completed-button {  
  -ms-grid-column-align: end;  
  justify-self: end;  
  padding-right: 20px;  
 }  
 .todo-menu-2 .delete-completed-button:hover {  
  text-decoration: underline;  
 }  
 .todos {  
  display: -ms-grid;  
  display: grid;  
  grid-auto-columns: 1fr;  
  grid-auto-rows: -webkit-max-content;  
  grid-auto-rows: max-content;  
  list-style-type: none;  
  overflow: auto;  
 }  
 .todos .todo {  
  display: -ms-grid;  
  display: grid;  
  -ms-grid-columns: 50px 450px 50px;  
  grid-template-columns: 50px 450px 50px;  
  border-bottom: 1px solid #ededed;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  overflow-wrap: break-word;  
  /* word-wrap is renamed to overflow-wrap but Edge still uses word-wrap */  
  word-wrap: break-word;  
 }  
 /* checkbox centering */  
 .todos .todo .pretty {  
  -ms-grid-column-align: center;  
  justify-self: center;  
  -webkit-transform: scale(1.4);  
  -ms-transform: scale(1.4);  
  transform: scale(1.4);  
  margin: 0;  
 }  
 .pretty .state label {  
  text-indent: 0;  
 }  
 .pretty .state i {  
  -webkit-transform: rotate(-5deg);  
  -ms-transform: rotate(-5deg);  
  transform: rotate(-5deg);  
  color: #5dc2af;  
 }  
 .add-todo-text-input, .todo-text {  
  font-size: 24px;  
  color: #4d4d4d;  
 }  
 .todo-text {  
  padding-top: 13px;  
  padding-bottom: 13px;  
 }  
 .todo-text:focus {  
  outline: none;  
 }  
 .todo-checked-text {  
  color: #d9d9dd;  
  text-decoration: line-through;  
 }  
 .todo-checked-text:focus {  
  color: #4d4d4d;  
  text-decoration: none;  
 }  
 .delete-button {  
  font-size: 28px;  
  color: #df8383;  
  -ms-grid-column-align: end;  
  justify-self: end;  
  visibility: hidden;  
 }  
 .todos .todo:hover .delete-button {  
  visibility: visible;  
 }  
 .delete-button:hover {  
  color: #f14a5d;  
  cursor: pointer;  
 }  
 @media (max-width: 1024px) {  
  .hero {  
   height: var(--mobile-hero-height);  
  }  
  .delete-button {  
   color: #f14a5d;  
   -ms-grid-column-align: center;  
   justify-self: center;  
   visibility: visible;  
  }  
 }  
 @media (max-width: 680px) {  
  .hero {  
   -ms-grid-columns: 1fr 8fr 1fr;  
   grid-template-columns: 1fr 8fr 1fr;  
   -ms-grid-rows: 73px 9fr 1fr;  
   grid-template-rows: 73px 9fr 1fr;  
  }  
  .title {  
   font-size: 33px;  
  }  
  .todo-app {  
   -ms-grid-rows: 40px 1fr auto;  
   grid-template-rows: 40px 1fr auto;  
  }  
  .todo-menu-1 {  
   -ms-grid-rows: 40px;  
   grid-template-rows: 40px;  
  }  
  .add-todo-text-input, .todo-text {  
  font-size: 16px;  
  }  
  .todo-menu-2 {  
   -ms-grid-columns: 1fr 1fr;  
   grid-template-columns: 1fr 1fr;  
   grid-row-gap: 8px;  
   font-size: 12px;  
   padding: 8px 0px;  
  }  
  .todo-menu-2 .todos-left {  
   -ms-grid-column-align: center;  
   justify-self: center;  
  }  
  .todo-menu-2 .todo-menu-2-buttons {  
   grid-column: 1 / -1;  
   -ms-grid-row: 1;  
   grid-row: 1;  
  }  
  .todo-menu-2 .delete-completed-button {  
   -ms-grid-column-align: center;  
   justify-self: center;  
  }  
  .todo-menu-2 .delete-completed-button:hover {  
   text-decoration: none;  
  }  
  .todos {  
  }  
  .todos .todo {  
   -ms-grid-columns: 50px var(--mobile-todo-text-width) 50px;  
   grid-template-columns: 50px var(--mobile-todo-text-width) 50px;  
  }  
  ::-webkit-input-placeholder {  
   font-size: 16px;  
  }  
  :-ms-input-placeholder {  
   font-size: 16px;  
  }  
  ::-ms-input-placeholder {  
   font-size: 16px;  
  }  
  ::placeholder {  
   font-size: 16px;  
  }  
  .rotate {  
   font-size: 14px;  
  }  
 }