/* vim: set ts=2 sw=2 tw=80 et: */ input, textarea { border: 1px solid #ccc; } input::placeholder, textarea::placeholder { color: #ccc; } .fieldset { display: grid; grid-template-columns: 7rem 1fr; grid-gap: 1rem; border: none; margin: .5rem auto; padding: .5rem; background: #eee; border-radius: .5rem; max-width: 600px; } form { text-align: center; } form .fieldset { text-align: left; } @media screen and (max-width: 768px) { .fieldset { grid-template-columns: 1fr; grid-gap: .5rem; } } .fieldset h3 { grid-column: 1 / 3; } .fieldset label { font-weight: bold; font-size: .9rem; } .fieldset label::after { content: ":"; } .fieldset input, .fieldset textarea { padding: .5rem; font-family: 'Fira Sans', sans-serif; font-size: .85rem; border-radius: .5rem; background: white; } .fieldset textarea[name="address"] { height: 4em; } .fieldset input[type="checkbox"] { margin-left: 0; padding-left: 0; max-width: 1em; } form button { color: #333; background: #ccc; font-size: 1em; padding: .5rem 1rem; border-radius: .5rem; outline: none; border: 0 none; } .range-10 { display: grid; justify-items: center; grid-template-columns: repeat(20, 1fr); } .range-10 div { grid-column: span 2; font-size: .9rem; } .range-10 input[type="range"] { grid-column: 2 / 20; justify-self: stretch; margin: 0 -10px; }