body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f2f2f2; color: #333; padding: 20px; line-height: 1.6; } h1 { color: #2c3e50; font-size: 1.8em; margin-bottom: 0.7em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); text-align: center; } h2 { color: #34495e; font-size: 1.4em; padding: 0 8px; border-left: #4d7aa8 solid 4px; } p { color :#34495e; font-size: 0.9em; } input[type="text"], button { width: 75%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } input[type="text"] { box-sizing: border-box; } button { width: auto; background-color: #4caf50; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } .warning { color: red; margin-top: 5px; } .container { width: 70%; margin: auto; overflow:scroll } @media screen and (max-width: 700px) { h1 { font-size: 1.3em; } h2 { font-size: 1.1em;; } p { font-size: 0.7em; } .container { width: 95%; margin: 20px auto; } input[type="text"], button { width: 100%; } }