styles.css

body, html {
   margin: 0;
   padding: 0;
   height: 100%;
}
header {
   background-color: rgb(65, 158, 158);
   height: 105px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}
h2 {
   font-family: 'Roboto';
   color: rgb(65, 158, 158);
   margin: 5px 10px 20px;
   padding-bottom: 3px;
   border-bottom: 2px solid rgb(65, 158, 158);
}
#main-section {
   margin: 0;
   padding: 0;
   height: 100%;
}
#app-title {
   color: #fff;
   margin: 50px 75px 0 0;
   font-family: 'Roboto';
   font-weight: 700;
   font-size: 4.2em;
   font-style: italic;
}
#app-title-dashboard {
   color: #fff;
   margin: 72px 75px 0 0;
   font-family: 'Roboto';
   font-weight: 700;
   font-size: 2.3em;
   font-style: italic;
 }
#tagline-description {
   color:rgb(65, 158, 158);
   margin: -20px 175px 0 0;
   font-family: 'Roboto';
   font-weight: 100;
   font-size: 1.4em;
   font-style: italic;
}
.btn-intro-div {
   margin-top: 90px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.btn-lg {
   margin: 3px;
   width: 160px;
   height: 65px;
   cursor: pointer;
}
.btn-md {
   width: 80px;
   height: 55px;
   cursor: pointer;
 }
.btn-sm {
   width: 50px;
   height: 30px;
   cursor: pointer;
 }
.btn-teal {
   background-color: rgb(65, 158, 158);
   color: #fff;
   border-style: none;
}
.btn-teal:hover {
   background-color: rgb(62, 151, 151);
}
.btn-teal:focus {
   outline-width: 0;
   outline-color: #fff;
}
.btn-white {
   background-color: #fff;
   color: rgb(65, 158, 158);
   border: 2px solid rgb(65, 158, 158);
}
.btn-white:hover {
   background-color: rgb(235, 235, 235);
   border-color: rgb(62, 151, 151);
   color: rgb(62, 151, 151);
}
.btn-remove {
   background-color: rgb(255, 155, 155);
   color: #fff;
   font-weight: bold;
   border-style: none;
   border-radius: 5px;
   cursor: pointer;
   height: 20px;
   width: 20px;
 }
 .btn-remove:hover {
   background-color: rgb(255, 130, 130);
 }
.form-div {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 25px;
   font-family: "Roboto";
   font-weight: 100;
}
.app-form {
   display: flex;
   flex-direction: column;
   width: 30%;
}
.terms-div {
   display: flex;
   align-items: center;
   margin-top: 2px;
}
.form-input {
   margin: 3px 0;
   height: 35px;
   border: 1px solid rgb(118, 118, 118);
   border-radius: 3px;
}
.form-input:focus{
   outline-color: rgb(62, 151, 151);
}
.form-checkbox {
   margin: 0 7px 0 0;
}
#signup-form-submit, #login-form-submit {
   margin: 15px auto;
   background-color: rgb(65, 158, 158);
   border: none;
   color: #fff;
}
#signup-form-submit:hover, #login-form-submit:hover {
   background-color: rgb(62, 151, 151);
}
.error-div {
   display: flex;
   flex-direction: row;
   justify-content: center;
   color: hsl(0, 90%, 65%);
   font-weight: bold;
   font-family: 'Roboto';
   font-size: 1.3em;
}
.error-div ul {
   list-style-type: none;
   padding: 0;
}
.confirmation-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px 0;
    font-family: "Roboto";
    font-weight: 100;
}
.conf-table-div {
    display: flex;
    margin-bottom: 20px;
}
.conf-label-div {
    text-align: right;
    width: 300px;
    padding-right: 10px;
    border-right: 1px solid rgb(118, 118, 118);
}
.conf-info-div {
    text-align: left;
    width: 300px;
    padding-left: 10px;
}
.dashboard-list-div {
   margin: 40px;
 }
 .add-list-form {
   display: flex;
   justify-content: center;
 }
 .add-list-btn {
   padding: 0px;
   margin-right: 2px;
   font-size: 4em;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .add-list-input {
   height: 49px;
   width: 550px;
   margin-left: 2px;
   border: 2px solid rgb(65, 158, 158);
   border-radius: 0px;
 }
 .add-list-input::placeholder {
   color: rgb(160, 160, 160);
 }
 .no-list-msg {
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Roboto";
   font-size: 2em;
   color: rgb(200, 200, 200);
 }
 .material-icons.md-18 { font-size: 18px; }
 .material-icons.md-24 { font-size: 24px; }
 .material-icons.md-36 { font-size: 36px; }
 .material-icons.md-48 { font-size: 48px; }
 .material-icons.md-72 { font-size: 72px; }

 .list-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
 }
 .list-ul {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
   width: 45%;
   padding: 0;
 }
 .list-item {
   list-style-type: none;
   display: flex;
   justify-content: space-between;
   background-color: rgb(65, 158, 158);
   margin-bottom: 8px;
 }
 .list-item-btn {
    background-color: rgb(65, 158, 158);
    color: #fff;
    border-style: none;
    padding-right: 1.5em;
    cursor: pointer;
 }

 .item-text, .remove-item {
   font-family: 'Roboto';
 }
 .item-text {
   position: relative;
   font-weight: bold;
   font-style: italic;
   font-size: 1.8em;
   top: 8px;
   left: 12px;
 }
 .list-item a:link {
   text-decoration: none;
 }
 .list-management {
   display: flex;
   align-items: center;
 }
 .list-edit-btn {
   display: flex;
   align-items: center;
   color: #fff;
   background-color: rgb(65, 158, 158);
   border-style: none;
   cursor: pointer;
 }
 .list-edit-btn:hover {
   color:rgb(235, 235, 235);
 }
 .remove-item {
   background-color: rgb(65, 158, 158);
   color: #fff;
   border-style: none;
   font-size: 1.5em;
   cursor: pointer;
 }
 .remove-item:hover {
    color:rgb(235, 235, 235);
 }
 .list-item-edit-view {
   list-style-type: none;
   display: flex;
   justify-content: space-between;
   margin-bottom: 8px;
   border-bottom: 2px solid rgb(65, 158, 158);
 }
 .list-management-edit-view {
   display: flex;
   align-items: center;
 }
 .list-edit-link-edit-view {
   display: flex;
   align-items: center;
   color: rgb(65, 158, 158);
   text-decoration: none;
 }
 .list-edit-link-edit-view:hover {
    color: rgb(62, 151, 151);
 }
 .remove-item-edit-view {
   background-color: #fff;
   color: rgb(65, 158, 158);
   border-style: none;
   font-size: 1.5em;
   cursor: pointer;
 }
 .edit-list-form {
    width: 100%;
 }
 .list-edit-input {
    border: none;
    height: 24px;
    width: 98%;
    font-size: 1.7em;
    color: rgb(65, 158, 158);
    background-color: rgb(249, 249, 249);
 }
 .list-edit-input:focus {
    outline-style: none;
 }
 .remove-item-edit-view:hover {
    color: rgb(62, 151, 151);
 }
 .todo-list-div {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 33%;
   margin: 20px auto;
 }
 .todo-header-div, .account-settings-header-div {
   border-bottom: 4px solid rgb(65, 158, 158);
   color: rgb(65, 158, 158);
   font-family: 'roboto';
   width: 100%;
   margin-bottom: 35px;
 }
 .todo-header-div h3, .account-settings-header {
   font-size: 2.2em;
   font-style: italic;
   margin-bottom: -10px;
 }
 .todo-header-div {
    width: 40%;
    margin: 2.5em auto;
 }
 .add-todo-form {
   display: flex;
   justify-content: center;;
 }
 .add-todo-form button {
   margin-right: 2px;
 }
 .add-todo-input {
   height: 24px;
   width: 371px;
   margin-left: 2px;
 }
 .todo-list {
   display: flex;
   flex-direction: column;
   margin: 2em auto; 
   padding: 0;
   width: 435px;
 }
 .todo-item, .todo-item-edit-view {
   list-style-type: none;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   font-family: 'roboto';
   font-size: 1.3em;
   font-weight: 300;
   border-bottom: 1px solid rgb(65, 158, 158);
   margin-bottom: 5px;
   padding: 3px;
 }
 .todo-edit-form {
    width: 100%;
 }
 .todo-edit-input {
    width: 98%;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: .9em;
    color: rgb(65, 158, 158);
    background-color: rgb(249, 249, 249);
    border: none;
 }
 .todo-edit-input:focus {
    outline-style: none;
 }
 .checkbox-item {
   margin-bottom: -3px;
 }
 .checkbox:checked {
   background-color: red;
 }
 .todo-management {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 }
 .todo-edit-link {
   display: flex;
   align-items: center;
   color:rgb(65, 158, 158);
   cursor: pointer;
   text-decoration: none;
 }
 .todo-edit-link:hover {
   color: rgb(62, 151, 151);
 }
.primary-nav {
   display: flex;
   justify-content: flex-end;
}
.secondary-nav {
   display: flex;
   justify-content: flex-end;
}
.secondary-back-btn {
   margin: 20px auto 0 20px;
   padding: 3px;
   cursor: pointer;
}
.account-settings-btn {
   margin: 20px 5px 0 0;
   cursor: pointer;
}
.signout-btn {
   margin: 20px 80px 0 5px;
   cursor: pointer;
}
.account-settings-div {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.account-settings-header-div {
   width: 45%;
   margin: 2em auto;
}
.user-info-form {
   display: flex;
   flex-direction: column;
   width: 36%;
   margin: 0 auto;
}
.user-info-form input {
   height: 40px;
   margin-bottom: 4px;
}
.account-settings-submit {
   display: flex;
   height: 40px;
   margin: 0 auto;
}
.user-info-form input:last-child {
   display: flex;
   flex-direction: row;
   justify-content: center;
   height: 60px;
}
.tertiary-nav {
   display: flex;
}