#back {
    display: inline-block;
    color: black;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
    box-shadow: 0 4px 6px #8888;
  }
  @keyframes shift {
    to {
      transform: translateX(45rem);
    }
  }
  footer div {
    animation: shift 10s infinite ease-in-out alternate;
  }
  #mid {
    display: flex;
    height: 70vh;
  }
  #all {
    max-width: 50rem;
    margin: auto;
  }
  footer div {
    text-align: center;
    width: fit-content;
  }
  footer {
    background-color: var(--background-color);
    padding: 1rem;
  }
  main {
    flex: 5;
    padding: 1rem;
    overflow: auto;
  }
  nav a {
    display: block;
    text-decoration: none;
    padding-left: 1em;
  }
  nav {
    background-color: var(--accent-background-color);
    padding: 1rem;
    flex: 1;
    overflow: auto;
  }
  #dl {
    cursor: pointer;
  }
  header div {
    flex: 1 1 0%;
  }
  button {
    background-color: var(--accent-background-color);
    accent-color: var(--accent-color);
    color: var(--color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin: 1em;
    padding: 0.5em 1em;
    box-shadow: 0 4px 6px #8888;
  }
  header {
    background-color: var(--background-color);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
  }
  :root.dark {
    --background-color: #222;
    --accent-background-color: #333;
    --color: #ddd;
    --accent-color: #dfd;
  }
  :root {
    font-family: sans-serif;
    --background-color: #e0e0e0;
    --accent-background-color: #e0f0e0;
    --color: #444;
    --accent-color: #070;
    color: var(--color);
    background-color: var(--background-color);
    accent-color: var(--accent-color);
  }
  @supports (view-transition-class: test) {
    #limited {
      display: none;
    }
  }
  @keyframes reveal {
    from {
      opacity: 0;
    }
    14.99% {
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
  }
  @keyframes hide {
    14.99% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
  ::view-transition-old(video),
  ::view-transition-old(svg) {
    animation: 500ms both hide;
  }
  ::view-transition-new(video),
  ::view-transition-new(svg) {
    animation: 500ms both reveal;
  }
  svg {
    view-transition-name: svg;
  }
  video {
    view-transition-name: video;
  }
  ::view-transition-new(root) {
    animation: none;
  }
  ::view-transition-group(root) {
    animation: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }
  #limited {
    background-color: var(--accent-background);
    color: darkred;
  }
  #limited {
    background-color: var(--accent-background);
    color: darkred;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }
  ::view-transition-group(root) {
    animation: none;
  }
  ::view-transition-new(root) {
    animation: none;
  }
  video {
    view-transition-name: video;
  }
  svg {
    view-transition-name: svg;
  }
  ::view-transition-new(video),
  ::view-transition-new(svg) {
    animation: 500ms both reveal;
  }
  ::view-transition-old(video),
  ::view-transition-old(svg) {
    animation: 500ms both hide;
  }
  @keyframes hide {
    14.99% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes reveal {
    from {
      opacity: 0;
    }
    14.99% {
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
  }
  @supports (view-transition-class: test) {
    #limited {
      display: none;
    }
  }
  :root {
    font-family: sans-serif;
    --background-color: #e0e0e0;
    --accent-background-color: #e0f0e0;
    --color: #444;
    --accent-color: #070;
    color: var(--color);
    background-color: var(--background-color);
    accent-color: var(--accent-color);
  }
  :root.dark {
    --background-color: #222;
    --accent-background-color: #333;
    --color: #ddd;
    --accent-color: #dfd;
  }
  header {
    background-color: var(--background-color);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
  }
  button {
    background-color: var(--accent-background-color);
    accent-color: var(--accent-color);
    color: var(--color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin: 1em;
    padding: 0.5em 1em;
    box-shadow: 0 4px 6px #8888;
  }
  header div {
    flex: 1 1 0%;
  }
  #dl {
    cursor: pointer;
  }
  nav {
    background-color: var(--accent-background-color);
    padding: 1rem;
    flex: 1;
    overflow: auto;
  }
  nav a {
    display: block;
    text-decoration: none;
    padding-left: 1em;
  }
  main {
    flex: 5;
    padding: 1rem;
    overflow: auto;
  }
  footer {
    background-color: var(--background-color);
    padding: 1rem;
  }
  footer div {
    text-align: center;
    width: fit-content;
  }
  #all {
    max-width: 50rem;
    margin: auto;
  }
  #mid {
    display: flex;
    height: 70vh;
  }
  footer div {
    animation: shift 10s infinite ease-in-out alternate;
  }
  @keyframes shift {
    to {
      transform: translateX(45rem);
    }
  }
  #back {
    display: inline-block;
    color: black;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
    box-shadow: 0 4px 6px #8888;
  }
  #back {
    display: inline-block;
    color: black;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
    box-shadow: 0 4px 6px #8888;
  }
  @keyframes shift {
    to {
      transform: translateX(45rem);
    }
  }
  footer div {
    animation: shift 10s infinite ease-in-out alternate;
  }
  #mid {
    display: flex;
    height: 70vh;
  }
  #all {
    max-width: 50rem;
    margin: auto;
  }
  footer div {
    text-align: center;
    width: fit-content;
  }
  footer {
    background-color: var(--background-color);
    padding: 1rem;
  }
  main {
    flex: 5;
    padding: 1rem;
    overflow: auto;
  }
  nav a {
    display: block;
    text-decoration: none;
    padding-left: 1em;
  }
  nav {
    background-color: var(--accent-background-color);
    padding: 1rem;
    flex: 1;
    overflow: auto;
  }
  #dl {
    cursor: pointer;
  }
  header div {
    flex: 1 1 0%;
  }
  button {
    background-color: var(--accent-background-color);
    accent-color: var(--accent-color);
    color: var(--color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin: 1em;
    padding: 0.5em 1em;
    box-shadow: 0 4px 6px #8888;
  }
  header {
    background-color: var(--background-color);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
  }
  :root.dark {
    --background-color: #222;
    --accent-background-color: #333;
    --color: #ddd;
    --accent-color: #dfd;
  }
  :root {
    font-family: sans-serif;
    --background-color: #e0e0e0;
    --accent-background-color: #e0f0e0;
    --color: #444;
    --accent-color: #070;
    color: var(--color);
    background-color: var(--background-color);
    accent-color: var(--accent-color);
  }
  @supports (view-transition-class: test) {
    #limited {
      display: none;
    }
  }
  @keyframes reveal {
    from {
      opacity: 0;
    }
    14.99% {
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
  }
  @keyframes hide {
    14.99% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
  ::view-transition-old(video),
  ::view-transition-old(svg) {
    animation: 500ms both hide;
  }
  ::view-transition-new(video),
  ::view-transition-new(svg) {
    animation: 500ms both reveal;
  }
  svg {
    view-transition-name: svg;
  }
  video {
    view-transition-name: video;
  }
  ::view-transition-new(root) {
    animation: none;
  }
  ::view-transition-group(root) {
    animation: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }
  #limited {
    background-color: var(--accent-background);
    color: darkred;
  }
  #limited {
    background-color: var(--accent-background);
    color: darkred;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }
  ::view-transition-group(root) {
    animation: none;
  }
  ::view-transition-new(root) {
    animation: none;
  }

  video {
    view-transition-name: video;
  }
  svg {
    view-transition-name: svg;
  }

  ::view-transition-new(video),
  ::view-transition-new(svg) {
    animation: 500ms both reveal;
  }
  ::view-transition-old(video),
  ::view-transition-old(svg) {
    animation: 500ms both hide;
  }
  @keyframes hide {
    14.99% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes reveal {
    from {
      opacity: 0;
    }
    14.99% {
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
  }
  @supports (view-transition-class: test) {
    #limited {
      display: none;
    }
  }

  :root {
    font-family: sans-serif;
    --background-color: #e0e0e0;
    --accent-background-color: #e0f0e0;
    --color: #444;
    --accent-color: #070;
    color: var(--color);
    background-color: var(--background-color);
    accent-color: var(--accent-color);
  }
  :root.dark {
    --background-color: #222;
    --accent-background-color: #333;
    --color: #ddd;
    --accent-color: #dfd;
  }
  header {
    background-color: var(--background-color);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
  }
  button {
    background-color: var(--accent-background-color);
    accent-color: var(--accent-color);
    color: var(--color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin: 1em;
    padding: 0.5em 1em;
    box-shadow: 0 4px 6px #8888;
  }
  header div {
    flex: 1 1 0%;
  }
  #dl {
    cursor: pointer;
  }
  nav {
    background-color: var(--accent-background-color);
    padding: 1rem;
    flex: 1;
    overflow: auto;
  }
  nav a {
    display: block;
    text-decoration: none;
    padding-left: 1em;
  }
  main {
    flex: 5;
    padding: 1rem;
    overflow: auto;
  }
  footer {
    background-color: var(--background-color);
    padding: 1rem;
  }
  footer div {
    text-align: center;
    width: fit-content;
  }
  #all {
    max-width: 50rem;
    margin: auto;
  }
  #mid {
    display: flex;
    height: 70vh;
  }
  footer div {
    animation: shift 10s infinite ease-in-out alternate;
  }
  @keyframes shift {
    to {
      transform: translateX(45rem);
    }
  }
  #back {
    display: inline-block;
    color: black;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
    box-shadow: 0 4px 6px #8888;
  }select {
    appearance: none;
  }

  textarea {
    height: 100px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    margin-right: 0.5rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #8888;
    border-radius: 4px;
    box-sizing: border-box;
  }

  label {
    display: inline;
    margin-right: 2.5rem;
    font-weight: bold;
  }

  .form-group {
    margin-bottom: 1rem;
    display: flex;
  }

  form {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--accent-background-color);
    border: 1px solid #8888;
    border-radius: 8px;
  }

  :root.dark #dark,
  :root:not(.dark) #light {
    display: inline;
  }

  #dark,
  #light {
    display: none;
  }

  .animations > * {
    border: inset 10px #8888;
  }

  .animations {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .animations {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .animations > * {
    border: inset 10px #8888;
  }

  #dark,
  #light {
    display: none;
  }

  :root.dark #dark,
  :root:not(.dark) #light {
    display: inline;
  }

  form {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--accent-background-color);
    border: 1px solid #8888;
    border-radius: 8px;
  }

  .form-group {
    margin-bottom: 1rem;
    display: flex;
  }

  label {
    display: inline;
    margin-right: 2.5rem;
    font-weight: bold;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #8888;
    border-radius: 4px;
    box-sizing: border-box;
  }

  input[type="checkbox"],
  input[type="radio"] {
    margin-right: 0.5rem;
  }

  textarea {
    height: 100px;
  }

  select {
    appearance: none;
  }

  select {
    appearance: none;
  }

  textarea {
    height: 100px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    margin-right: 0.5rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #8888;
    border-radius: 4px;
    box-sizing: border-box;
  }

  label {
    display: inline;
    margin-right: 2.5rem;
    font-weight: bold;
  }

  .form-group {
    margin-bottom: 1rem;
    display: flex;
  }

  form {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--accent-background-color);
    border: 1px solid #8888;
    border-radius: 8px;
  }

  :root.dark #dark,
  :root:not(.dark) #light {
    display: inline;
  }

  #dark,
  #light {
    display: none;
  }

  .animations > * {
    border: inset 10px #8888;
  }

  .animations {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .animations {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .animations > * {
    border: inset 10px #8888;
  }

  #dark,
  #light {
    display: none;
  }
  :root.dark #dark,
  :root:not(.dark) #light {
    display: inline;
  }
  form {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--accent-background-color);
    border: 1px solid #8888;
    border-radius: 8px;
  }

  .form-group {
    margin-bottom: 1rem;
    display: flex;
  }

  label {
    display: inline;
    margin-right: 2.5rem;
    font-weight: bold;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #8888;
    border-radius: 4px;
    box-sizing: border-box;
  }

  input[type="checkbox"],
  input[type="radio"] {
    margin-right: 0.5rem;
  }

  textarea {
    height: 100px;
  }

  select {
    appearance: none;
  }