.heading{
	width: 500px;
	margin: 30px auto;
	text-align: center;
	color: #0000ff;
	background: #FCB063;
	border: 1px solid #0000ff;
	border-radius: 10px;
	font-family: cursive;
	font-size:18px;
}

.input{
	width: 300px;
	padding:5px;
	font-size:18px;
	border: 2px solid #0000ff;
  	border-radius: 3px;
  	font-family: cursive;
}

textarea {
	width: 90%;
  	resize: none;
  	outline: none;
  	border: 1px solid #0000ff;
  	border-radius: 3px;
}

form{
	width: 500px;
	height: 280px;
	margin: 10px auto;
	border-radius: 10px;
	padding: 10px;
	background: #FCB063;
	border: 1px solid #0000ff;
}

.task_input {
	width:73%;
	height: 15px;
	padding: 10px;
	border: 9px solid #0000ff;
}

.add_btn{
	height: 49px;
	background: #0000ff;
	color: white;
	border: 1px solid #0000ff;
	border-radius: 5px;
	padding: 5px 20px;
	font-size:18px;
	font-family: cursive;
}

table{
	width: 100%; 
	margin: 30px left;
	border-collapse: separate;
	border-spacing: 5px;
}

tr{
	border-bottom: 1px solid #cbcbcb;
	margin: 30px left;
}

th{
	font-size: 19px;
	color: #0000ff;
}
.th, tr{
	border: none;
	height: 30px;
	padding: 2px;
}

tr:hover{
	background: none;
}

.task{
	text-align: center;
}	

.select{
	font-family: cursive;
	font-size: 25px;
}
.text{
	font-family: cursive;
	border-radius: 5px;
	background: blue;
}
.form-control{
	font-family: cursive;
}
.col{
	font-family: cursive;
}




/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .heading, .text, .col, .form-control, .select, .task {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}