:root, ::before, ::after, ::selection {
--primary: #164194;
--secondary: #E40137;
--danger: #CC0000;
--unit: 7;
}
::selection {
color: var(--secondary);
background: var(--primary);
}
* {
box-sizing: border-box;
}
html {
font-size: 16px;
font-size: clamp(12px, 100vw / 6 / var(--unit), 24px);
}
html, body {
margin: 0;
padding: 0;
}
form {
text-align: center;
}
#logo {
max-width: calc(var(--unit) * 2rem);
margin: 0 auto;
}
#logo img {
width: 100%;
}
input {
font-size: inherit;
line-height: 1.5rem;
}
.form {
width: 100%;
min-width: calc(var(--unit) * 2rem);
max-width: calc(var(--unit) * 6rem);
margin: auto;
border-collapse: collapse;
border: none;
}
.form thead, .error {
color: var(--danger);
}
.form tbody {
text-align: left;
}
.form td {
box-sizing: content-box;
padding: 0.5rem clamp(0px, (100vw - var(--unit) * 2rem) / 8 / var(--unit), 0.5rem);
}
.form tbody td:first-child:not([colspan]) {
width: calc(var(--unit) * 1rem);
}
.form label {
display: inline-block;
box-sizing: content-box;
margin: -0.5rem clamp(1px - 0.5rem, (var(--unit) * 2rem - 100vw) / 8 / var(--unit), 0px);
padding: 0;
width: 100%;
line-height: 1.5rem;
cursor: pointer;
}
.form tbody input {
width: clamp(100% - 0.5rem, 100% - (100vw - var(--unit) * 2rem) / 8 / var(--unit), 100% - 1px);
}
.form tbody input[placeholder="######"] {
width: calc(8px + 9.5ch);
padding-left: calc(2px + 0.5ch);
text-align: center;
font-family: monospace;
font-size: 2em;
letter-spacing: 0.5ch;
}