body {
    font-family: 'Courier New', Courier, monospace;
    color: white;
    margin: 0;
}
#app {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    background-color: #1E1E1E;
}

.projects-sidebar {
    flex: 0 1 auto;
    display: block;
    width: 200px;
    color: white;
    background-color: #252526;
    padding: 0px 5px 100% 5px;
    position: sticky;
    top: 0px;
    left: 0px;
}

h1 {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 2px;
}

#create-new-project {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

#create-new-project p {
    padding: 16px 2px;
    margin: 0 0 0 0;
}

#create-new-project p:hover {
    background-color: #535355;
    cursor: pointer;
}

#create-new-project input {
    width: 192px;
    border: 0 solid white;
    margin-top: 7px;
    margin-left: 2px;
}

#create-new-project button {
    margin-bottom: 7px;
    margin-top: 1px;
}

.one-project-listing {
    display: flex;
    align-items: center;
    justify-content: end;
    background-color: #252526;
    margin: 0;
}

/* .one-project-listing:hover {
    background-color: #535355;
} */

.no-project-selected {
    display: inline;
    margin-left: 2px;
}

.project-name {
    width: 156px;
    padding: 10px 2px;
    margin:0;
}

.project-name:hover {
    background-color: #535355;
    cursor: pointer;
}

.emoji {
    margin: 0;
    padding: 10px 2px;
}

.emoji:hover {
    background-color: #535355;
    cursor: pointer;
}

.one-project-listing input {
    width: 150px;
    border: 0 solid black;
}

.one-project-display {
    flex: 1 1 0;
    display: block;
    color: white;
}

#project-name {
    flex: 1 1 0;
    color: white;
    background-color: #2D2D2D;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 20px 0px;
    text-align: center;
}

#filter {
    flex: 1 1 0;
    color: white;
    background-color: #2D2D2D;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: auto;
    
    /* width: 80vw; */
    padding: 20px 0px;
    text-align: center;
}

button {
    background-color: white;
    color: black;
    border: 0px solid white;
    border-radius: 5px;
    margin: 2px;
}

button:hover {
    cursor: pointer;
}

#create-new-todo {
    margin-left: 20px;
    margin-top: 20px;
}

.one-todo-display {
    margin-left: 20px;
    margin-top: 20px;
    height: 200px;
}

.todo-title.complete {
    color: #73C991
}

.todo-title.incomplete.overdue {
    color: #E3782D;
}

.todo-title.incomplete.underdue {
    color: #CBCB40;
}

.todo-title {
    margin-top: 0px;
}

.edit-and-delete span:hover {
    cursor: pointer;
}

.editing-todo {
    display: flex;
    flex-direction: column;
}

.editing-todo input {
    max-width: fit-content;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
}

.save-and-cancel span:hover {
    cursor: pointer;
}

.loading-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    background: rgba(0, 0, 0, 0.834);
    z-index: 1;
    margin: 0px 20px 20px 0px;
    color: white;
  }
  
  .spinner {
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: white transparent white transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
  }
  
  @keyframes spin-anim {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }