body{
     background-image: linear-gradient(to right top, #d10bae, #ff0b71, #ff6334, #efa100, #b9d30c);
}

#container{
     display: grid;
     place-items: center;
     height: 100vh;
}

#wrap{
     max-width: 360px;
     margin: 0px auto;
     position: absolute;
     top: 200px;
     padding: 20px;
     border: 6px solid #DDD;
     overflow: hidden;
     background-color: rgb(219, 203, 203);
}

h1{
     margin: 0 0 20px 0;
     padding: 0 0 5px 0;
     font-size: 18px;
     border-bottom: 1px solid black;
}

h1 span{
     float: right;
     display: block;
     background: rgb(0, 128, 255);
     font-size: 12px;
     padding: 2px 6px;
     color: #fff;
}

ul{
     list-style: none;
     margin: 0;
     padding: 0;
}

ul li{
     overflow: hidden;
     padding: 4px 0;
}

li input, li span{
     float: left;
     margin-right: 6px;
}

li a {
     float: right;
     text-decoration: none;
     font-weight: bold;
     color: #900;
     padding: 0 8px;
     display: none;
}

li:hover a {
     display: inline;
}

#new-task {
     margin-top: 20px;
     padding-top: 10px;
     border-top: 1px solid #000000;
     overflow: hidden;
}

#new-task input{
     border-top: 1px solid #DDD;
     border-right: 0 none;
     padding: 2px;
     width: 240px;
     height: 20px;
     float: left;
}

#new-task button{
     margin-left: 10px;
     width: 30px;
     border: 1px solid #DDD;
     background: #eee;
     font-weight: bold;
     color: black;
     padding: 2px 2px 3px 2px;
     float: left;
}

#done{
     line-height: 18px;
     margin-bottom: 10px;
}

#done span{
     text-decoration: line-through;
     font-size: 12px;
     color: #999;
}


#resource{
     position: absolute;
     top: 650px;
     right: 40px;
}
#resource a{
     text-decoration: none;
     color: rgb(4, 0, 255);
}

a:hover{
     border-bottom: 1px solid green;
}