body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  zoom: 2.2;
}
.heading,
.add {
  display: inline-flex;
}
h2 {
  font-weight: 400;
  font-size: 10px;
  /* text-align: center; */
  /* margin-right: 2.5px; */
}
.heading {
  font-size: 20px;
  margin-left: 18%;
  margin-top: 5%;
}
.add {
  /* font-size: 12.5px; */
  padding-left: 36.5%;
}

.card-container {
  width: 85%;
  height: 100%;
  margin-left: 10%;
  display: flex;
  font-size: xx-small;
  text-align: left;
  justify-content: space-evenly;
}
.todo-card {
  height: 125px;
  width: 20%;
  border: 1px solid rgb(233, 95, 53);
  border-radius: 5%;
  text-indent: 15px;
  font-size: 90%;
  margin-right: 10px;
  box-shadow: 3px 3px 6px gray;
}
.on-line {
  text-decoration: line-through red;
  /* text-align: center; */
  /* margin: 5px; */
}
hr {
  margin-left: 15px;
}
.sqr {
  text-indent: 6px;
}
/* b {
    font-size: 10px;

} */
.plus {
  color: #fff;
  display: flex;
  height: 18.5px;
  width: 18.5px;
  background-color: rgb(233, 95, 53);
  border-radius: 50%;
  justify-content: center;
  cursor: pointer;
  /* padding: 3%; */
}
h2,
.on-line {
  color: rgb(233, 95, 53);
}
.al {
  padding-top: 17px;
  padding-left: 8px;
}
input {
  
  height: 6px;
  width: 6px;
}
label {
  padding-left: 3px;
}
.pg {
  text-align: center;
  margin-left: 5%;
  margin-top: 2%;
}
.np {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  font-size: xx-small;
  padding: 5px 5px 5px 5px;
  background-color: rgb(233, 95, 53);
  color: #fff;
  box-shadow: 1px 1px 6px gray;
}
.np:hover {
  background-color: #fff;
  color: rgb(233, 95, 53);
}
.fa {
  color:  rgb(233, 95, 53);
  display: inline;
  font-size: 10px;
}

@media only screen and (max-width: 600px){
  .heading,
  .add,
  .card-container {
    position: relative;
    /* margin: 10px 20px; */
  }
  .heading {
    font-weight: 100;
    margin-top: -7%;
    margin-left: 0%;
  }
  .todo-card {
    height: 22%;
    width: 108%;
    border: 0.1px solid rgb(233, 95, 53);
    margin-bottom: 10px;
    box-shadow: 2.5px 2.5px 3px lightgray;
    border-radius: 4px;
  }
  .on-line {
    /* font-size: 25px; */
    height: 10px;
    cursor: pointer;
    justify-content: flex-start;
  }
  .card-container {
    display: list-item;
    /* align-content: flex-start; */
    left: -15px;
    /* margin-bottom: 10px; */
  }
  .card-container::marker {
    color: #fff;
  }
  .al,
  .on-line,
  .pt,
  hr {
    display: none;
  }
  .add {
    display: flex;
    padding: 0% 0% 0% 0%;
    margin: -40% 0% 0% 85%;
    /* padding-left: 85%; */
    /* padding-top: 10%; */
  }
  h2 {
    color: #000;
    font-size: 9px;
    font-weight: 100;
    text-align: left;
    margin-left: -7px;
    margin-top: 8px;
  }
  .pg {
    margin-left: 0%;
  }
}