*{
 font-family: 'Shadows Into Light', cursive; 
}

body{
  background-image: url("https://projects.codecraftworks.com/web/1zlCibpq6buQLVzJiOz4/assets/bush.png");
}

.container {  width: 50vh;  height: 70vh;
background-image: url("https://projects.codecraftworks.com/web/1zlCibpq6buQLVzJiOz4/assets/more-leaves-on-green.png");
  margin: auto;
  margin-top: 5vh;
  box-shadow: 2px 5px 10px;
  border-radius: 15px;  
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
  position: relative;}
.top, 
  .bottom {
  display: flex;
  justify-content: space-between;
}

.top div {  
  width: 50px;  
  height: 50px;
}
.bottom div {  
  width: 50px;  
  height: 50px;
}

.top-left {  
  background: linear-gradient(to bottom right, #1a1a1a 50%, transparent 50%);  
  filter: drop-shadow(1px 1px 2px);
}
.top-right {  
  background:linear-gradient(to bottom left, #1a1a1a 50%, transparent 50%);  
  filter: drop-shadow(-1px 1px 2px);
}
.bottom-right { 
  background: linear-gradient(to top left, #1a1a1a 50%, transparent 50%);  
  filter: drop-shadow(1px -1px 2px);
}
.bottom-left {background: linear-gradient(to top right, #1a1a1a 50%, transparent 50%);  filter: drop-shadow(-1px -1px 2px);}
.overlay {  background-color: transparent;position: absolute;  height: 100%;  width: 100%;
}
.content {  height: 100%;  text-align: center;}
h1 {  font-size: 2em;}
#add-item {  background-color: transparent;  
  border: 0px;  
  border-bottom: 2px solid;  
  font-size: 1.3em;  
  width: 60%;}

textarea:focus,
input:focus {  
  outline: none;}

input[type="checkbox"] {  
  transform: scale(1.5);}

#list {  display: flex;  
  flex-direction: column;  
  flex-wrap: wrap;
}
label {  
  font-size: 1.2em;  
  margin-left: 10px;
}
span {  
  width: 60%;  
  margin: auto;  
  text-align: left;
}
label div {  
  display: inline-flex;  
  float: right;  
  color: gray;
}
label div:hover {  
  color: #292f33;  
  cursor: pointer;
}