html { height: 100%; } body { height: 100%; margin: 0px; } .center .description .clock { color: #000000; font-size: 20px; padding-top: 5px; padding-bottom: 5px; } .center { font-family: 'Montserrat', sans-serif; text-align: center; margin: 0px; width: 100%; color: #222; z-index: 1; padding-top: 150px; } .center h1 { font-size: 4rem; } .center .description { font-family: monospace; line-height: 22px; font-size: 18px; width: 370px; margin: auto; margin-top: 10px; margin-bottom: 25px; } .center .description a { text-decoration: none; color: #111; text-style: bold; } .select { display: inline-block; margin-right: 10px; position: relative; } select { transition: background-color 200ms ease; font-size: 14px; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; border-radius: 3px; font-family: monospace; padding-right: 30px; position: relative; outline: 0px; background: #fff; cursor: pointer; } .select:after { content: "▼"; padding: 14px 8px; position: absolute; right: 13px; top: 0; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; font-size: 9px; } button { transition: background-color 200ms ease; font-size: 14px; padding: 10px 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; border-radius: 3px; border: 1px solid #aaa; background: #fff; font-family: monospace; cursor: pointer; outline: 0px; } button:hover, select:hover { background-color: #eee; } .center .links { padding-top: 10px; font-family: monospace; letter-spacing: 0.3px; font-size: 14px; } .center .links a { text-decoration: none; margin-left: 0px; margin-right: 100px; color: #111; } .center .links a:hover { text-decoration: underline; } .center .grid { display: grid; column-gap: 50px; } .center .grid hr { border-top: 1px dashed gray; } .center .grid-item { font-family: monospace; letter-spacing: 0.3px; font-size: 14px; padding-bottom: 20px; } .center .grid-item a { float: left; text-decoration: none; margin-left: 10px; margin-right: 10px; color: #111; } footer{ color: #000; text-align: center; padding-bottom: 10px; } iframe { margin-left: 14px; margin-bottom: -5px; } @media (max-width: 900px) { .center h1 { font-size: 50px; } .center .links a, .center .links iframe { display: block; margin: auto; margin-bottom: 12px; } .divider { display: none; } } @media (max-width: 400px) { .center h1 { font-size: 26px; } .center .description { font-size: 14px; width: 100%; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } } table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; } .user-chat:empty { background-color: transparent; pointer-events: none; } .chat-container { background-color: var(--primary); color: #000; padding: 10px; border-radius: 5px; height: 300px; overflow-y: scroll; } .user-chat { background-color: #dcf8c6; color: #000; padding: 5px; margin-bottom: 10px; border-radius: 5px; } .bot-chat { background-color: #ffffff; color: #000; padding: 5px; margin-bottom: 10px; border-radius: 5px; } .live-chat-input { display: flex; align-items: center; justify-content: space-between; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 20px; padding: 10px; } #inputText { flex: 1; border: none; outline: none; margin-right: 10px; font-size: 16px; } #submitBtn { background-color: #4CAF50; color: #fff; border: none; outline: none; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 16px; } #submitBtn:hover { background-color: #45a049; } }