body{
	font-family:Arial;
	background-color:#000000;
	color:white;
	font-family: "Roboto", sans-serif;
  	font-weight: 700;
  	font-style: normal;
}

.form{
	transition:0.4s;
	padding:100px; 
	border:1px solid #1b2933;
	height:100px;
	border-radius:10px;
}
.title{
	text-align:center;
	font-size:70px;
	margin-top:100px;
}
.content{
	display:flex;
	justify-content: center; 
	margin-top:100px; 
}
#message{
	font-size:15px;
	padding:10px;
	border:0px;
	background-color:#000000;
	color:white;
	border:3px solid #000000;
}
#message:hover{
	outline:none;
	transition:0.4s;
	border:3px solid white;
}
#message:focus{
	outline:none;
	transition:0.4s;
	border:3px solid white;
}
.grid{
	display:inline-grid;
	gap:30px;
	padding:50px;
	grid-template-columns: 2fr 1fr;
}
#send{
	transition:0.4s;
	background-color:#001F3F;
	border:none;
	color:white;
	padding:10px;
	font-size:15px;
}
#send:hover{
	transition:0.4s;
	background-color:white;
	color:black;
}
#create{
	font-size:15px;
	padding:10px;
	border:0px;
	background-color:#000000;
	color:white;
	border:3px solid #000000;
}
#submit{
	transition:0.4s;
	background-color:#001F3F;
	border:none;
	color:white;
	padding:10px;
	font-size:15px;
}
#submit:hover{
	transition:0.4s;
	background-color:white;
	color:black;
}
#create:hover{
	outline:none;
	transition:0.4s;
	border:3px solid white;
}
#create:focus{
	outline:none;
	transition:0.4s;
	border:3px solid white;
}
table{
	overflow:scroll; 
	height:100px;
}
th{
	border-bottom:3px solid #1b2933;
	font-size:30px;
}
td{
	font-weight:bold;
	text-align:center;
	padding:10px;
}

@media only screen and (max-width: 600px) {
  .grid{
  	display:block;
  	padding:10px;
  }
  .content{
  	display:block;
  }
  .form{
  	display:block;
  }
  .grid-item{
  	display:block;
  }
  .no{
  	overflow:scroll; 
  	height:300px;
  }
}