My apologies, I included the wrong text above.
html {
// iPad defaults; get updated by setInsets()
--top-inset: 74px;
--bottom-inset: 100px;
--io-header: 24px;
}
div {
overflow-wrap: break-word;
}
body {
text-align: center;
font-size: 1em;
-webkit-transform: translate3d(0, 0, 0);
-webkit-font-smoothing: antialiased;
font: -apple-system-body;
margin: 15px;
/* Needs to be large enough that content doesn't underflow the bottom buttons when
scrolling to the answer. */
margin-bottom: 100px;
margin-left: max(15px, env(safe-area-inset-left));
margin-right: max(15px, env(safe-area-inset-right));
}
img {
max-width: 95%;
}
.drawing {
zoom: 50%;
}
.nightMode img.drawing {
filter: #{"invert()"} hue-rotate(180deg);
}
.nightMode .latex {
filter: #{"invert()"};
}
#typeans {
width: 95%;
margin-top: 5px;
}
.invis {
visibility: hidden;
}
.playImage {
-webkit-user-drag: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.soundLink {
-webkit-user-drag: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
a.soundLink:active {
-webkit-tap-highlight-color: #00000000;
}
.soundLink {
text-decoration: none;
}
.replay-button {
display: inline-flex;
vertical-align: middle;
}
.replay-button svg {
width: 64px;
height: 64px;
}
.replay-button svg circle {
fill: #fff;
stroke: #414141;
}
.replay-button svg path {
fill: #414141;
}
.typeGood {
background: #afa;
color: black;
}
.typeBad {
color: black;
background: #faa;
}
.typeMissed {
color: black;
background: #ccc;
}
body.nightMode {
background-color: black;
color: white;
}
.nightMode a {
color: #77ccff;
}
#image-occlusion-container {
max-height: calc(100vh - var(--top-inset) - var(--bottom-inset) - var(--io-header));
}
button.toggle {
font-size: 14px;
}
<body class="card">
<div id="qa"></div>
<div class="missing-media">
<div></div>
<div>
<a href="https://docs.ankimobile.net/syncing.html#missing-images"
>More Info</a
>
</div>
</div>
</body>