html{
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  height: 100%;
  background-color: #f5f5f7;
  font-family: "SF Pro SC","SF Pro Display","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
}

.hint{
  position: fixed;
  top: 10px;
  z-index:99999;
  height: 0;
  width: 70%;
  margin-left:15%;
  background-color: white;
  border-radius: 5px;
  text-align: center;
  line-height: 48px;
  color: white;
  font-weight: bold;
  visibility: hidden;
  opacity: 0;
  transition: height 0.3s ease-out, opacity 0.3s ease-in, visibility 0.3s ease-in;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
}

.header{
  height:48px;
}

.container{
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    letter-spacing: normal;
    background: #1d1d1f;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    overflow: hidden;
    position: fixed;
}

.list-item {
  color: white;
  display: inline;
  font-size: 24px;
  height: 48px;
  display: inline-block;
  line-height: 200%;
  text-align: center;
}

.left-item{
  left: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  width: 48px;
  border-bottom: none;
}

.left-item:hover{
  -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

.middle-item{
  position: absolute;
    width: 120px;
    top: 0;
    left: 50%;
    margin-left: -60px;
    text-align: center;
    z-index: 1;
    line-height: 48px;
    font-size: 24px;
    color: #f5f5f7;
    text-shadow: 0 -1px 3px #202020;
}

.right-item{
  width: 48px;
  top:0;
  float: right;
  overflow: hidden;
  
}

.content-container{
  position: fixed;
  width: 100%;
  z-index:9999;
  top:48px;
  background: rgba(0,0,0,0.92);
  color:rgba(255, 255, 255, 0.8);
  height: 500px;
  visibility: hidden;
  opacity: 0;
  transition: height 0.6s ease-out, opacity 0.5s ease-in, visibility 0.5s ease-in;
  box-shadow: 0 4px 8px 0 gray;
}

.content-ul{
  padding: 0;
}

.content-item{
  width: 70%;
  margin-left: 15%;
  height: 44px;
  list-style: none;
  line-height: 300%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.content-item:hover{
  color: white;
}

.input-div{
  background-color: white;
  text-align: center;
  padding: auto;
  position: fixed;
  z-index: 5;
  top:48px;
  width: 100%;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transition: height 0.5s ease-out, opacity 0.3s ease-in, visibility 0.3s ease-in;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  
}


h1{
  font-size: 20px;
  font-weight: bold;
}

select{
  width: 60%;
  height: 30px;
  margin-top: 15px;
  text-indent: 4px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  background-color: white;
}

.input-div input{
  width: 60%;
  height: 30px;
  margin-top: 15px;
  text-indent: 4px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  background-color: white;
}

.input-div button{
  display: block;
  width: 30%;
  margin: auto;
  height: 30px;
  margin-top: 20px;
  border-radius: 5px;
  background-color:rgba(116,181,102,1);
  color: white;
  border: none;
  font-size: 16px;
  font-weight: bold;
}

.submitBtn:hover{
  background-color:green;
}


.todoitem{
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
  background-color: white;
  width: 90%;
  margin-left: 5%;
  height: 130px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
  overflow: hidden;
}

.todotitle{
  float: left;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 24px;
  height: 40px;
  line-height: 140%;
}

.thetag{
  text-align: center;
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  height: 40px;
  width: 60px;
  border-radius: 5px;
  color: white;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
  line-height: 40px;
}

.tag0{
  display: none;
}

.tag1{
  background-color:seagreen;
}

.tag2{
  background-color: skyblue;
}

.tag3{
  background-color: rgb(235, 122, 17);
}

.tag4{
  background-color:plum;
}


.edit:hover{
  color:orange;
}

.check:hover{
  color: rgba(7, 230, 100, 1);
}

.close:hover{
  color: red;
}

.operate-button{
  text-align: center;
  float: right;
  margin-top: 5px;  
  background-color:white;
  height: 40px;
  width: 40px;
  border-radius: 5px;
  color:black;
  line-height: 40px;
  border: none;
  font-size: 16px;
}

.study{
  color:yellowgreen;
}

.work{
  color: skyblue;
}

.sport{
  color:rgb(235, 122, 17)
}

.life{
  color:plum;
}

.danger{
  color:rgb(250, 1, 1)
}

.finish{
  color:seagreen;
}

.outdate{
  color:grey
}

.first-button{
  text-align: center;
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
}

.btn1{
  margin-left: 4px;
  margin-right: 4px;
  background: white;
  height: 30px;
  width: 100px;
  border-radius: 5px;
}

.deleteall{
  color:red;
  border:2px solid red;
}

.finishall{
  color:seagreen;
  border:2px solid seagreen; 
}

.outdateall{
  color:orange;
  border:2px solid orange; 
}

.deleteall:hover{
  background-color: red;
  color:white;
}

.finishall:hover{
  background-color:seagreen;
  color:white;
}

.outdateall:hover{
  background-color: orange;
  color: white;
}

.footer{
  text-align: center;
  background-color: white;
  width: 100%;
}

.github{
  height: 37px;
  width: 37px;
  color: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  text-align: center;
  line-height: 37px;
  font-size: 20px;
}

.emptydiv{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
  justify-content:center;
  font-size: 16px;
  background-color: white;
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
  width: 90%;
  height: 100px;
  font-weight: bold;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
}

.refresh:hover{
  color:blue;
}

@media (prefers-color-scheme: light) {
}