body {
  margin: 0;
  padding: 1em;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 90vh;
  background: radial-gradient(#05316d, #333355, #284c7e);
}

body > nav {
  width: 33%;
  border-radius: 1em;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.05);
}

body.editing {
  background: radial-gradient(#383838, #454545, #545454);
}

body > main {
  width: 66%;
  height: 90vh;
  margin-left: 1em;
  border-radius: 1em;
  border: 1px solid #fff;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

body > main > nav {
  border-radius: 1em 1em 0 0;
  border-bottom: 1px solid black;
  min-height: 70px;
  max-height: 70px;
  background-color: #38DA00;
  display: flex;
  flex-direction: row;
}

body > main > nav > .icons {
  padding-top: 1.25em;
  width: 20%;
  text-align: right;
  padding-right: 1em;
}

body > main > nav > .icons > a:hover:before {
  -webkit-text-stroke: 1px #fff;
  -moz-text-stroke: 1px #fff;
  -ms-text-stroke: 1px #fff;
  -o-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
}

body > main > nav > .title {
  width: 80%;
  text-align: center;
}

body > main > nav > .icons > a {
  text-decoration: none;
}

body > main > nav > .icons > a:before {
  color: #000;
}

body > main > .view {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  clip: rect(auto auto auto auto);
}

body > main > .footer {
  min-height: 1em;
}

body > main > .view > form > .icons {
  text-align: right;
}

body > main > .view > form > .icons > a {
  text-decoration: none;
}

body > main > .view > form > .icons > a:before {
  color: #000;
}

body > main > .view > form > .icons > a:hover:before {
  -webkit-text-stroke: 1px #fff;
  -moz-text-stroke: 1px #fff;
  -ms-text-stroke: 1px #fff;
  -o-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
}

ul, ol, li {
  list-style-type: none;
  margin: 0;
  padding: 0;  
}

li[todo-list] {
  display: flex;
  border-bottom: 1px solid #000;
  cursor: pointer;
  background-color: rgba(225, 225, 255, 0.05);
  flex-direction: row;
}

li[todo-list]:first-child {
  border-radius: 1em 1em 0 0;
}

li[todo-list] > i {
  width: 50px;
  height: 50px;
  margin: 13px 0 0 1em;
}

li[todo-list] > .text {
  padding-top: 13px;
  padding-left: 0;
}

li[todo-list] > .text > p {
  color: #fff;
  margin: 0;
  padding: 0;
}

li[todo-list] > .text > p.name {
  font-weight: bold;
}

li[todo-list] > .text > p.tasks {
  font-weight: lighter;
  font-size: small;
}

li[todo-list]:hover {
  background-color: rgba(225, 255, 225, 0.15);
}

form {
  border-radius: 1em;
  border: 1px solid #fff;
  margin: 1em;
}

form > .field {
  padding-top: 1em;
}

form > .field:first-child {
  padding-top: 0;
}

form > .field > input {
  width: 100%;
  border: 1px solid #888;
  height: 2em;
  border-radius: .5em;
}

form input:focus, form textarea:focus {
  outline: none!important;
}

form > .field > textarea {
  width: 100%;
  height: 40vh;
  border: 1px solid #888;
  border-radius: .5em;
  resize: none;
}

li[todo-task] {
  display: flex;
  border-bottom: 1px solid #000;
  cursor: pointer;
  background-color: rgba(255, 200, 200, 0.5);
  flex-direction: row;
}

li[todo-task] > .text {
  width: 80%;
}

li[todo-task] > .icons {
  width: 20%;
  text-align: right;
  padding-top: .5em;
  padding-right: 1em;
}

li[todo-task] > .icons > a:before {
  color: #000;
}

li[todo-task] > .icons > a:hover:before {
  -webkit-text-stroke: 1px #fff;
  -moz-text-stroke: 1px #fff;
  -ms-text-stroke: 1px #fff;
  -o-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
}

li[todo-task] > .icons > a {
  text-decoration: none;
}

li[todo-task]:hover {
  background-color: rgba(255, 200, 200, 0.8);
}

li[todo-task].done {
  background-color: rgba(200, 255, 200, 0.5);
}

li[todo-task].done:hover {
  background-color: rgba(200, 255, 200, 0.8);
}