* {
  font-family: "Dancing Script", cursive;
  color: #292f33;
}

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

.container {
  /* sets width of container to 50% of viewport height */
  width: 50vh;
  /* sets height of container to 70% of viewport height */
  height: 70vh;
  /* sets background-image to the beige paper texture */
  background-image: url("https://projects.codecraftworks.com/web/OfT9PNYjMeSYFjfcwlbT/assets/beige_paper.png");
  /* automatically sets the margin of our container to be even on all sides*/
  margin: auto;
  /* sets top margin to 5% of the viewport height */
  margin-top: 5vh;
  /* creats a box shadow for the document elemnt that is 2px on the left and top 5px on the bottom and 10px on the right */
  box-shadow: 2px 5px 10px;
  /* creats a border-radius to give the document a rounded look */
  border-radius: 15px;
  /* sets the display to flexible */
  display: flex;
  /* sets the flexible direction to use columns */
  flex-direction: column;
  /* sets the space between the elements evenly */
  justify-content: space-between;
  /* sets the position of to relative of the normal flow of the document */
  position: relative;
}


/* sets the styles for the top and bottom boxes that we will be using for corner decorations, justifying them to space-between in order to create the space needed to put them in the corners */
.top,
.bottom {
  display: flex;
  justify-content: space-between;
}

/* sets the height and width of the corner boxes we will be using on top */
.top div {
  width: 50px;
  height: 50px;
}

/* sets the height and width of the corner boxes we will be using on bottom */
.bottom div {
  width: 50px;
  height: 50px;
}

/* the corner decoration works as follows, there will be a 50% transparency linear gradient using the hex color #1a1a1a, the gradient will go in relation to the corner that is being adjusted. The filter will create a drop shadow, direction relative to the corner being adjusted. */

/* sets the top-left corner decoration */
.top-left {
  background: linear-gradient(to bottom right, #1a1a1a 50%, transparent 50%);
  filter: drop-shadow(1px 1px 2px);
}

/* sets the top-right corner decoration */
.top-right {
  background: linear-gradient(to bottom left, #1a1a1a 50%, transparent 50%);
  filter: drop-shadow(-1px 1px 2px);
}

/* sets the bottom right corner decoration */
.bottom-right {
  background: linear-gradient(to top left, #1a1a1a 50%, transparent 50%);
  filter: drop-shadow(1px -1px 2px);
}

/* sets the bottom left corner decoration */
.bottom-left {
  background: linear-gradient(to top right, #1a1a1a 50%, transparent 50%);
  filter: drop-shadow(-1px -1px 2px);
}

/* sets the overlay so the elements don't interact with the our triangles that we are using for decorative purposes */
.overlay {
  background-color: transparent;
  position: absolute;
  height: 100%;
  width: 100%;
}

/* sets the position of the content and its alignment */
.content {
  height: 100%;
  text-align: center;
}

/* sets the heading font size */
h1 {
  font-size: 2em;
}
/* remove the default styling from the add-item element */
#add-item {
  /* changes teh background color to transparent to have the box blend in */
  background-color: transparent;
  /* Sets the border to 0px to have the box completely dissappear as a way to reset our style */
  border: 0px;
  /* Adds in a bottom border to act as a line seperating the heading from the items */
  border-bottom: 2px solid;
  /* sets font size */
  font-size: 1.3em;
  /* sets width of the border to make the line go wider across the document */
  width: 60%;
}

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

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

/* sets the style for the list, ensuring that styling is correctly handled */
#list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

/* sets the style of the labels that will be dyamically added */
label {
  font-size: 1.2em;
  margin-left: 10px;
}

/* sets the style of the span elements that will be dynamically added */
span {
  width: 60%;
  margin: auto;
  text-align: left;
}

/* sets the style of the label div boxes */
label div {
  display: inline-flex;
  float: right;
  color: gray;
}

/* sets the style of the label div box when you hover to change the color and cursor type */
label div:hover {
  color: #292f33;
  cursor: pointer;
}