#desktop-viewport[data-wallpaper],
#wallpaper-preview {
  background-color: #316e70;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#desktop-viewport[data-wallpaper="avery"],
#wallpaper-preview[data-wallpaper="avery"] {
  background-image: url("assets/wallpapers/avery.png");
}

#desktop-viewport[data-wallpaper="avery"] header h1,
#desktop-viewport[data-wallpaper="avery"] footer {
  background: #316e70;
  padding: 12px;
}

#desktop-viewport[data-wallpaper="avery"] header h1 {
  width: fit-content;
  max-width: 100%;
}

#desktop-viewport[data-wallpaper="avery"] footer a:focus-visible {
  outline-color: #fff;
}

#display-properties {
  width: min(440px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 3px;
  color: #172e2d;
  background: silver;
}

#display-properties .window-body {
  padding: 10px;
}
#display-properties fieldset {
  margin: 0;
  padding: 16px;
}
#display-properties legend,
#display-properties label,
#display-properties select,
#display-properties button {
  font: inherit;
}
#display-properties label {
  display: block;
  margin: 14px 0 6px;
}
#wallpaper-choice {
  width: 100%;
  min-height: 84px;
}
#wallpaper-choice option {
  padding: 5px 8px;
}
.monitor-preview {
  width: min(260px, 100%);
  margin: 0 auto;
  padding: 12px 12px 0;
  background: #dfdfdf;
  box-shadow:
    inset -2px -2px #808080,
    inset 2px 2px #fff,
    2px 2px #0a0a0a;
}
#wallpaper-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 3px solid #404040;
}
.preview-taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: silver;
  border-top: 1px solid white;
}
.monitor-chin {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.monitor-chin span {
  width: 5px;
  height: 5px;
  background: #008000;
  border: 1px solid #404040;
}
.wallpaper-note {
  font-size: var(--text-small);
  margin-top: 12px;
}
#wallpaper-status {
  min-height: 24px;
  font-size: var(--text-small);
  margin: 8px 0;
}
.wallpaper-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.wallpaper-actions button {
  min-height: 36px;
}

#wallpaper-choice,
#wallpaper-choice:focus {
  background: #fff;
  color: #000;
}

#wallpaper-choice option:checked {
  background: #000080;
  color: #fff;
}