:root {
background: #dec;
color: #000;
text-align: center;
font: 20px sans-serif;
}
button {
--color: #c33;
display: flex;
margin: 0 auto;
border-radius: 9999px;
min-width: 10rem;
width: fit-content;
height: 10rem;
padding: 0 1rem;
font: inherit;
font-size: 2rem;
justify-content: center;
align-items: center;
background-color: var(--color);
color: #fff;
box-shadow:
    0 -.5rem .5rem rgba(0, 0, 0, .3) inset,
    0 .5rem .5rem rgba(255, 255, 255, .3) inset,
    0 0 1rem var(--color);
border: 2px solid var(--color);
transition: transform .1s ease-in-out;
}
button:active {
transform: scale(0.9);
}
button:hover {
background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
}
form {
font-size: 2rem;
}
form button {
height: 5rem;
padding: 0 2.5rem;
}
input {
border-radius: 9999px;
height: 5rem;
padding: 0 2.5rem;
border: none;
font: inherit;
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3) inset;
background: #fff;
color: #000;
}
section {
margin: 4rem 0;
}
ul {
text-align: left;
max-width: 20rem;
margin: 0 auto;
}
p {
margin: 2rem 0;
}
li {
margin: 1rem 0;
}
h2 {
font-size: 2rem;
font-weight: normal;
margin: 0 0 2rem;
}
h2::before {
content: "— ";
}
h2::after {
content: " —";
}
table {
border-collapse: collapse;
margin: 0 auto;
font-variant-numeric: tabular-nums;
}
th, td {
border: 0 solid #000;
border-width: 2px 0;
padding: .5rem 1rem;
max-width: 20rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
th:first-child, td:first-child {
text-align: left;
padding-left: 0;
}
th:last-child, td:last-child {
text-align: right;
padding-right: 0;
}