body {
    font-family: serif;
    color: #000;
    background: #fff;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark {
    background: #000;
    color: #fff;
}

main { max-width: 40vw; position: relative; }

a.invisible {
    color: #000;
    text-decoration: none;
}
a.invisible:hover {
    text-decoration: underline;
    cursor: pointer;
}

.mask-overlay { position: absolute; inset: 0; pointer-events: none; }

.mask-dot {
    position: absolute;
    font: inherit;
    line-height: inherit;
    color: #fff;
    display: flex;
    align-items: flex-end;
}

main.masked { color: transparent; }
main.masked a:not(.invisible) { color: #fff !important; }

.sep { margin-right: 1rem; }
.light { color: #444; }
.tall { line-height: 1.5; }

@media (max-width: 1200px) { main { max-width: 60vw; } }
@media (max-width: 768px)  { main { max-width: 90vw; } }