body {
 font-family: 'yahei', sans-serif;
 background-color: #f0f8ff;
 color: #333;
 margin:0;
 padding:10px;
}

h1 {
 text-align: center;
 color: #007BFF;
 margin-bottom:30px;
}

form {
 background: #fff;
 padding:30px;
 border-radius:8px;
 box-shadow:01px 10px rgba(0,0,0,0.1);
 max-width:600px;
 margin:0 auto;
}

label {
 display: block;
 margin-bottom:8px;
 font-weight: bold;
}

input[type="text"],
input[type="number"],
textarea,
input[type="datetime-local"] {
 width:89%;
 padding:15px;
 margin-bottom:20px;
 border:1px solid #ccc;
 border-radius:4px;
 transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
input[type="datetime-local"]:focus {
 border-color: #007BFF;
 outline: none;
}

textarea {
 resize: vertical;
}

input[type="submit"] {
 background-color: #007BFF;
 color: white;
 border: none;
 padding:12px 45%;
 border-radius:4px;
 cursor: pointer;
 transition: background-color 0.3s;
 font-size:16px;
 margin-top:10px;
}

input[type="submit"]:hover {
 background-color: #0056b3;
}

pre {
 background: #fff;
 padding:15px;
 border-radius:8px;
 border:1px solid #ccc;
 overflow: auto;
 max-width:600px;
 margin:20px auto;
}
a{
color:#006bff;
}