* { margin: 0; padding: 0; box-sizing: border-box; transition: all 0.6s; } body { background-color: #121212; color: #eee; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } [class~="navbar"] { position: fixed; top: 0; left: 0; width: 100%; background: rgba(18, 18, 18, 0.75); backdrop-filter: blur(0.5rem); display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 2rem; z-index: 1000; border-bottom: 0.0625rem solid #333; transition: background-color 0.3s ease; color: #fff; } [class~="navbar"] [class~="logo"] { font-weight: 700; font-size: 1.5rem; user-select: none; } [class~="navbar"] ul { list-style: none; display: flex; gap: 1.8rem; } [class~="navbar"] ul li a { text-decoration: none; color: #ddd; font-weight: 600; transition: color 0.3s ease; user-select: none; } #active { text-decoration: none; color: #43a4ff; font-weight: 600; transition: color 0.3s ease; user-select: none; } [class~="navbar"] ul li a:hover, [class~="navbar"] ul li a:focus { color: #4f94d4; outline: none; } [class~="footer"] { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(18, 18, 18, 0.75); text-align: center; padding: 1rem 2rem; color: #bbb; font-size: 0.9rem; user-select: none; transition: background-color 0.3s ease; } main { flex-grow: 1; max-width: 56.25rem; margin: 5rem auto 4rem auto; padding: 2rem 3rem; color: #eee; user-select: text; } [class~="hero"] { text-align: center; margin-bottom: 3rem; } [class~="hero"] h1 { font-size: 2.8rem; margin-bottom: 0.6rem; user-select: none; } [class~="hero"] p { font-size: 1.25rem; color: #bbb; } [class~="tool"] { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 3rem; } [class~="tool"] input[type="password"] { padding: 0.8rem 1.2rem; font-size: 1.1rem; border-radius: 0.5rem; border: none; width: 100%; max-width: 25rem; background-color: #222; color: #eee; transition: background-color 0.3s ease, border-color 0.3s ease; user-select: text; } [class~="tool"] input[type="password"]:focus { outline: none; background-color: #2a2a2a; border: 0.125rem solid #4f94d4; } [class~="tool"] button { background-color: #4f94d4; color: white; border: none; padding: 0.85rem 2.2rem; font-size: 1.1rem; font-weight: 700; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.3s ease; user-select: none; } [class~="tool"] button:hover, [class~="tool"] button:focus { background-color: #3a78c2; outline: none; } #resultTime, #resultPwned { max-width: 25rem; width: 100%; font-size: 1.1rem; min-height: 1.3rem; text-align: center; user-select: text; } #resultPwned { margin-top: 0.4rem; font-weight: 600; } [class~="about"] { position:inherit; background-color: #222; color: #ccc; padding: 2rem 3rem; margin-top: 3rem; border-radius: 0.5rem; user-select: text; text-align: left; width: 100%; } [class~="about"] h2 { color: #4f94d4; margin-bottom: 1rem; user-select: none; } [class~="about"] p { line-height: 1.6; margin-bottom: 1rem; } [class~="about"] strong { color: #eee; } [class~="about"] a { color: #6ba9e6; text-decoration: none; transition: color 0.3s ease; } [class~="about"] a:hover, [class~="about"] a:focus { text-decoration: underline; color: #8ac1ff; outline: none; } @media (max-width: 37.5rem) { main { margin: 6rem 1.5rem 5rem 1.5rem; padding: 1.5rem; } [class~="navbar"] ul { gap: 1rem; } [class~="hero"] h1 { font-size: 1.8rem; max-width: 100%; margin: 0; width: 100%; } [class~="hero"] p { font-size: 0.9rem; max-width: 100%; } [class~="tool"] input[type="password"] { max-width: 100%; } #resultTime, #resultPwned { max-width: 100%; } }