*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: .5px;
  font-weight: 400;
  font-family: "Ubuntu", sans-serif
}

 :root{
  --lightbg: #4D5BFF;
  --darkbg: #444;
  --color: #F3F4FF;
  --brad: 1.25rem;
  --font-small: 1rem;
  --font-med: 1.25rem;
  --font-large: 1.5rem
}

/*media queries for theme*/
@media (prefers-color-scheme: dark) {
	html {
		background: var(--darkbg);
		color: #fff;
		font-size: var(--font-med);
		accent-color: var(--lightbg);
		scroll-behavior: smooth;
		user-select: none;
		font-family: "Ubuntu", sans-serif
	}
	
	#pop-up {
		background: var(--darkbg);
		padding: .5rem;
		margin: auto;
		border-radius: 1rem 1rem 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	form input{
		color: #fff;
	}
	
	::placeholder{
		color: #fff;
	}
	
	#tasklist li{
		color: #fff;
	}
}

/*media queries for theme*/
@media (prefers-color-scheme: light) {
	html {
		background: var(--color);
		font-size: var(--font-med);
		accent-color: var(--lightbg);
		scroll-behavior: smooth;
		user-select: none;
		font-family: "Ubuntu", sans-serif
	}
	
	#pop-up {
		background: #fff;
		padding: .5rem;
		margin: auto;
		border-radius: 1rem 1rem 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	#tasklist li{
		color: #333;
	}
}

header{
  background: var(--lightbg);
  color: var(--color);
  padding: .5rem .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header #info-wrap{
	width: 2rem;
	height: 2rem;
	border: 1.5px solid var(--color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#info-wrap button{
	color: var(--color);
	font-size: var(--font-small);
	width: 100%;
	height: 100%;
	border-radius: 50%;
}


#container{
  padding: 1rem;
}

*:focus{
  outline: none;
}

body{
	font-family: "Ubuntu", sans-serif;
	overscroll-behavior-y: none
}

button{
	border: 0;
	background: transparent;
	cursor: pointer;
}

#addbtn{
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .5rem;
	background: var(--lightbg);
	color: var(--color);
}

form .todo-input {
	display: flex;
	justify-content: space-between;
	align-content: center;
	margin: auto;
	padding: .125rem;
}

form .todo-input:last-child{
	justify-content: end;
}

form{
	width: 100%;
	margin: auto;
	padding: .25rem;
	position: relative;
}

#pop-up h3{
	text-align: center;
	text-transform: uppercase
}

form input{
	padding: .75rem .5rem;
	border: 0;
	font-size: 1rem;
	display: block;
	width: 100%;
	margin: auto;
	position: relative;
	background: #CCC7;
	border-radius: .25rem;
	transition: .5s
}

form input:focus{
	border-bottom: 2px solid var(--lightbg);
}

#tasklist{
  padding: .5rem;
  margin: auto;
  list-style: none;
  text-align: center;
}

#tasklist li input{
	display: inline-block;
	border-radius: 50%;
	margin: 0 .75rem 0 0;
	accent-color: #CCC7;
	cursor: pointer;
}

#tasklist li{
	margin: .5rem 0;
	padding: 1rem .5rem;
	display: flex;
	align-items: center;
	background: #CCC7;
	border-radius: .25rem;
	cursor: pointer;
}

#submit{
  text-transform: uppercase;
  background-color: var(--lightbg);
  border: none;
  display: block;
  padding: .5rem;
  width: 7.5rem;
  color: var(--color);
  font-size: var(--font-med);
  border-radius: var(--brad);
  transition: .5s
}

#submit:disabled{
	background: #CCC7;
	color: #333;
}

#pop-up-bg{
  background: #3339;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 10;
}

input:checked + p{
	text-decoration: line-through;
	text-decoration-color: #4447;
	color: #4447;
}

table{
	padding: .5rem;
	padding-bottom: 0;
}

th, td{
	width: 50%;
	padding: .25rem;
	text-align: center;
}

td button{
	display: block;
	width: 100%;
	font-size: 2rem;
	padding: .5rem;
	background-color: #d61c2c;
	color: var(--color);
	border-radius: 2rem;
}

#no-todo{
	text-align: center;
	font-weight: 300;
	line-height: 1.5rem;
	padding: .5rem;
	margin: auto;
}

#no-todo::first-letter{
	display: block;
	font-size: 4rem;
	color: var(--lightbg);
}

#pop-up ul{
	padding: 1rem;
	line-height:2rem
}