html,
body {
height: 100%;
}
html {
color-scheme: light dark;
}
body {
display: grid;
grid-template: 50% 50% / 100%;
margin: 0;
}
button {
cursor: pointer;
}
iframe {
border: 0;
order: 1;
width: 100%;
height: 100%;
}
nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
position: absolute;
inset-block-end: 1rem;
inset-inline-end: 1rem;
}
nav > * {
background: ButtonFace;
border: 1px solid ButtonBorder;
border-radius: 50%;
color: ButtonText;
padding: 0.5rem;
display: grid;
place-items: center;
}
nav > :hover,
nav > :focus {
background: Canvas;
}
@media (min-width: 720px) {
body {
grid-template: 100% / 50% 50%;
}
}