:root { --display-width: 600px }
.tap-msg { display:none }
.click-msg { display: inline-block }

@media (max-device-width: 600px) {
    :root { --display-width: 99vw }
    .click-msg { display:none }
    .tap-msg { display: inline-block }
}

body {
    font-family: Helvetica, Arial, Sans-Serif;
}

table {
    margin: auto;
}

#appearanceOptions {
    margin-top: 10vh;
}

#modal {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

button, #walk-button, #banner-text {
    font-size: calc(var(--display-width) * 0.05);
}

.copy {
    font-size: calc(var(--display-width) * 0.03);
}

td {
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: calc(var(--display-width) * 0.09)
}

#appearanceOptions td {
    font-size: 7vh
}

#genderNeutralReversed, #genderNeutralStandard {
    position: absolute;
    visibility: hidden;
    width: auto;
    white-space: nowrap;
}