header{
    display:flex;
    justify-content: space-between;
}

nav{
    display:flex;
    justify-content: space-around;
}

button{
    background-color:#1b1b1b;
    border:none;
    font-family: "Roboto", sans-serif;
    color:white;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "width" 100;
      font-size: medium;
}

body{
    background-color: #1b1b1b;
}

.material-icons{
    font-size: 50px;
    color:rgb(112, 112, 226);
    width:30px;
    display:flex;
    justify-content: end;
    margin-top:22px;
    margin-left:20px;
}

h1 {
    font-family: "Roboto", sans-serif;
    color:white;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "width" 100;
  }

  h3 {
    font-family: "Roboto", sans-serif;
    color:white;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: large;
    font-variation-settings:
      "width" 100;
  }

  h4 {
    font-family: "Roboto", sans-serif;
    color:white;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: xx-large;
    font-variation-settings:
      "width" 100;
      text-align:center;
  }

  p {
    font-family: "Roboto", sans-serif;
    color:rgb(209, 158, 158);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "width" 100;
      width:200px;
      font-size: small;
  }

#favicon{
    color:blue;
}

#nullTasks{
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right:auto;
}

section{
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:5px;
    background-color: #181414;
    width:625px;
    height:225px;
    margin-left: auto;
    margin-right:auto;
    border-radius:18px;
}

section:hover {
    border:1px solid rgb(136, 94, 94);
}

h1:hover {
    font-weight:bold;
}

button:hover {
    font-weight:bold;
}

#head{
    font-size: 25px;
    color:rgb(255, 255, 255);
    width:30px;
    display:flex;
    justify-content: end;
    margin-top:22px;
    margin-right:20px;
}

#incompleteTasks{
    width:600px;
    display: flex;
    justify-content:flex-end;
}

#none{
    text-align:center;
    margin-left: auto;
    margin-right:auto;
}

#tasks {
    display:flex;
    justify-content:left;
    align-items:center;
    text-align:left;
}

div{
    font-family: "Roboto", sans-serif;
    color:rgb(209, 158, 158);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    display:flex;
    justify-content: space-between;
    font-variation-settings:
      "width" 100;
      width:200px;
      font-size: small;
}

#radio{
    color:white;
    height: 25px;
    display: flex;    
    flex-direction: row;
}

#taskItem{
    display: flex;
    flex-direction: row;
    margin-bottom: 50px;
}

.taskContainer {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.radio {
    font-size: 24px;
    color: white;
    margin-right: 10px;
    cursor: pointer;
}

.taskText {
    color: rgb(209, 158, 158);
    font-family: "Roboto", sans-serif;
    font-size: small;
    width: 100%;
    outline: none;
}