*{
    padding:0px;
    margin:0px;
  }
html, body{
  width:100%;
  user-select:none;
}

@media only screen and (min-width: 768px){ /*desktop */
  #list{
  position:relative;
  width:333px;
  top:150px;
  left:50%;
  padding-bottom:20%;
}

img{
  display:inline-block;
}
.checkmark{
  position:relative;
  height:30px;
}

#form{
  padding-top:1em;
  position:absolute;
  left:32px;
}
#form2{
  bottom:-300px;
  position:fixed;
  left:-200px;
}
.task{
  position:absolute;
  color:black;
  left:32px;
  padding-top:5px;
}
.task:hover{
  cursor: pointer;
}
.option{
  padding:5px;
  padding-right:40px;
}
.option:hover{
  background:#FFFF66;
  cursor: pointer;
}
#options{
  right:55%;
  top:150px;
  position:fixed;
  padding:5px;
  padding-left:30px;
  border: red dashed 2px;
  text-align:middle;
  color:red;
  display:none;
}
#close{
  position:fixed;
  display:none;
  width:100%;
  height:100%;
}
/* #close:hover{
  background:yellow;
  cursor: pointer;
} */
}

@media only screen and (max-width: 768px){
#list{
  position:relative;
  width:70%;
  margin:auto;
  margin-top:10%;
  margin-bottom:20%;
}

img{
  display:inline-block;
}
.checkmark{
  position:relative;
  height:30px;
}

#form{
  padding-top:2em;
  position:absolute;
  left:32px;
}
#form2{
  bottom:-300px;
  position:fixed;
  left:-200px;
}
.list_item{
  height:100%;
}
.task{
  position:absolute;
  color:black;
  left:32px;
  padding-top:5px;
}
.task:hover{
  cursor: pointer;
}
.option{
  padding:5px;
  padding-right:40px;
}
.option:hover{
  background:#FFFF66;
  cursor: pointer;
}
#options{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width:40%;
  position:fixed;
  padding:5px;
  text-align:middle;
  font-size:1.5em;
  background:white;
  border: red dashed 2px;
  color:red;
  display:none;
  z-index:999;
}
#close{
  position:fixed;
  display:none;
  width:100%;
  height:100%;
  z-index:998;
}
  
}