* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'fire sans', sans-serif;
}
body {
  background-color: #a39bd2;
  min-height: 70vh;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #494a4b;
  font-family: "Gochi Hand", cursive;
  text-align: center;
  font-size: 130%;
}

.container {
  width: 100%;
  height: auto;
  min-height: 500px;
  max-width: 500px;
  min-width: 250px;
  background: #f1f5f8;
  background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);
  background-size: 25px 25px;
  border-radius: 20px;
  box-shadow: 4px 3px 7px 2px #00000040;
  padding: 1rem;
  box-sizing: border-box;
}

.heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.heading__title {
  transform: rotate(2deg);
  padding: 0.2rem 1.2rem;
  border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
  background-color: rgba(0, 255, 196, 0.7);
  font-size: 1.5rem;
}


header {
  padding: 2rem 1rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

header h1{
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(32, 15, 96, 0.936);
  margin-bottom: 1rem;
}

#new-task-form {
 display: flex;
}

input, button{
  appearance: none;
  border: none;
  outline: none;
  background: none;
}

#new-task-input {
  flex: 1 1 0%;
  background-color: aliceblue;
  padding: 1rem;
  border-radius: 1rem;
  margin-right: 1rem;
  color: rgb(8, 8, 8);
  font-size: 1.25rem;
}

#new-task-submit {
	color: var(--pink);
	font-size: 1.25rem;
	font-weight: 700;
  color: black;
  background-color: whitesmoke;
	cursor: pointer;
	transition: 0.4s;
}

#new-task-submit:hover {
	opacity: 0.8;
}

#new-task-submit:active {
	opacity: 0.6;
}

main {
	flex: 1 1 0%;
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

.task-list {
	padding: 1rem;
}

.task-list h2 {
	font-size: 1.5rem;
	font-weight: 300;
  color: rgba(32, 15, 96, 0.936);
	margin-bottom: 1rem;
}

#tasks .task {
	display: flex;
	justify-content: space-between;
	background-color: rgb(72, 67, 67);
	padding: 1rem;
	border-radius: 1rem;
	margin-bottom: 1rem;
}

.task .content {
	flex: 1 1 0%;
}

.task .content .text {
	color: white;
	font-size: 1.125rem;
	width: 100%;
	display: block;
	transition: 0.4s;
}

.heading__img {
  width: 24%;
  height: 20%;
}

.task .content .text:not(:read-only) {
	color: rgb(208, 204, 204);
}

.task .actions {
	display: flex;
	margin: 0 -0.5rem;
}

.task .actions button {
	cursor: pointer;
	margin: 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	transition: 0.4s;
}

.task .actions button:hover {
	opacity: 0.8;
}

.task .actions button:active {
	opacity: 0.6;
}

.task .actions .edit {
	color: white;
}

.task .actions .delete {
	color: white;
}