:root {
  --dark: #374151;
	--darker: #1F2937;
	--darkest: #111827;
	--grey: #6B7280;
	--pink: #EC4899;
	--purple: #8B5CF6;
	--light: #EEE;
}

* {
	margin: 0;
	box-sizing: border-box;
	font-family: "Fira sans", sans-serif;
}

body {
  
  display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: #FFF;
	background-color: var(--dark);
  
}
.icon{
  margin-left: 1277px;
  margin-top: 230px;
}
.yellow-color {
  color:yellow;
  }


.btn-green {
  color: var(--pink);
	font-size: 1.25rem;
	font-weight: 700;
	background-image: linear-gradient(to right, var(--pink), var(--purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
	transition: 0.4s;
}
.btn-green:hover {
  opacity: 0.8;
}
.btn-green:active {
	opacity: 0.6;
}

.btn-green1 {
  color: var(--pink);
	font-size: 1.25rem;
	font-weight: 700;
	background-image: linear-gradient(to right, var(--pink), var(--purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	cursor: pointer;
	transition: 0.4s;
}
.btn-green1:hover {
    opacity: 0.8;
}

.btn-green1:active {
	opacity: 0.6;
}
.mb-4{
  position: initial;
  display: inline-block;
  margin-right: 520px;
  
  border-radius: 12px;
  
  font-size: 2.5rem;
	font-weight: 300;
	background-color: var(--purple);
	margin-bottom: 1rem;
  padding: 15px 20px;

  color: #FFF;
  

  text-shadow: 3px 4px rgba(50, 50, 70, 0.5);
  text-align: center;
  box-shadow: 3px 4px rgba(0, 0, 0, 0.2);
}

h2 {
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--grey);
	margin-bottom: 1rem;
  margin-right: 590px;
}
.form-control {
  flex: 1 1 0%;
	background-color: var(--darker);
	padding: 1rem;
	border-radius: 1rem;
	margin-right: 1rem;
	color: var(--light);
	font-size: 1.25rem;
  margin-top: -10px;

  box-shadow: 0px 5px rgba(0, 0, 0, 0.2);
  
  color: #154cc2;
  font-size: 20px;

  transition: 0.4s ease;
}
.form-control::placeholder {
	color: var(--grey);
}

.form-control:hover{
  background: var(--mainWhite);
  color: var(--mainBlack);
}

.feedback {
  display: none;
}
.item {
  display: flex;
  justify-content: space-between;
  box-sizing: content-box;
}
.item-icon {
  font-size: 1.2rem;
  cursor: pointer;
}
.complete-item {
  color: var(--mainBlack);
}
.complete-item:hover {
  color: var(--mainBlack);
}
.edit-item {
  color: var(--mainRed);
}
.edit-item:hover {
  color: var(--mainBlue);
}
.delete-item {
  color: var(--mainBlue);
}
.delete-item:hover {
  color: var(--mainBlue);
}
.completed {
  text-decoration: line-through;
  opacity: 0.7;
  background-color: rgba(29, 223, 116, 0.8);
  border-radius: 0px 0px 14px 14px;
}
.visibility {
  opacity: 0.6;

}
.showItem {
  display: block;
}