html, body { min-height: 100%; } body, div, form, input, select, p { padding: 0; margin: 0; outline: none; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #666; line-height: 22px; } h1 { position: absolute; margin: 0; font-size: 28px; color: #fff; z-index: 2; } h2 { font-weight: 400; } .testbox { display: flex; justify-content: center; align-items: center; height: inherit; padding: 20px; } .testbox1 { display: flex; justify-content: center; align-items: center; height: inherit; padding: 5px; } form { width: 30%; padding: 20px; border-radius: 6px; background: #fff; box-shadow: 0 0 20px 0 #095484; } .banner { position: relative; height: 80px; background-size: cover; display: flex; justify-content: center; align-items: center; text-align: center; } .banner::after { content: ""; background-color: rgba(0, 0, 0, 0.4); position: absolute; width: 100%; height: 100%; } input, select { margin-bottom: 2px; border: 1px solid #ccc; border-radius: 3px; } input { width: calc(100% - 10px); padding: 5px; } select { width: 100%; padding: 7px 0; background: transparent; } .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder, a { color: #095484; } .item input:hover, .item select:hover { border: 1px solid transparent; box-shadow: 0 0 6px 0 #095484; color: #095484; } .item { position: relative; margin: 10px 0; } .btn-block { margin-top: 10px; text-align: center; } button { width: 150px; padding: 10px; border: none; border-radius: 5px; background: #095484; font-size: 16px; color: #fff; cursor: pointer; } button:hover { background: #0666a3; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }