.custom-control { margin: .1em 0; } #generate { width: 100%; margin-top: 0.5em; padding: 0.3em; color: currentColor; font-size: 25px; font-weight: 300; background: #24933f; } main { display: grid; justify-content: center; grid-template-columns: 1fr 1.5fr; grid-column-gap: 2rem; margin: auto 10vw; } .options { font-size: 1.4em; line-height: 1.6; max-width: max-content; } .options input[type=checkbox] { height: 1.5em; aspect-ratio: 1; } .options > div { display: grid; grid-template-columns: 1.5em auto; justify-content: left; align-items: center; } #length { font-size: 90%; width: 58px; border: 0; text-align: center; } #password { border-radius: 0; padding: .5em .375em; line-height: 1.5; font-size: 1em; border: 1px solid #dfe1e5; } #passwordDisplay { opacity: 0; transition: visibility 0s, opacity 0.5s; } #passwordContainer { display: grid; grid-template-columns: auto 36px; justify-content: start; } label[for=password] { font-size: 1.3rem; font-weight: 300; margin-bottom: .5rem; } #copy { height: 100%; aspect-ratio: 1; background: #24933f; border: none; } #copy > svg { height: 1.2em; fill: #fff; } button { border-color: transparent; } button:active { opacity: .8; } #title { margin-top: 3vh; margin-left: 5vh; font-weight: 100; font-size: 3.5em; } footer { position: absolute; bottom: 20px; right: 0; left: 0; text-align: center; z-index: -1; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* Dark theme */ @media (prefers-color-scheme: dark) { body { background: #222; color: #E6E6E6; } #length, #password { background-color: unset; color: unset; } #password { border: 0 !important; background-color: #444; } #password:hover { background-color: #494949; } } /* Remove glow */ *:focus, *:before { outline: none !important; box-shadow: none !important; } a { text-decoration: none; color: #0d6efd; } @media only screen and (max-device-width: 800px) { main { grid-template-columns: 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 0; margin: auto 1rem; grid-row-gap: 2rem; } .options { max-width: unset; } #generate { margin: 2rem auto 0; display: block; padding: 0.5em 5rem; width: 50%; min-width: max-content; text-align: center; } } @media only screen and (max-device-width: 700px) { #title { font-size: 9vw; font-weight: 300; margin: auto; line-height: 2; text-align: center; } footer { display: none; } }