Error page

by Andrey Izman

HTML

<link rel="stylesheet" href="https://marella.me/material-symbols/material-symbols/index.css?v=72c999d18377a0fb28bab564aadcc2d5e4b05dc1">
<div class="v-info danger center">
  <div class="icon"><span class="v-icon large"><i data-icon="error">error</i></span></div>
  <h2 class="title type-title">Unexpected Error</h2>
  <p class="content">An unexpected error has occurred. Please try again later. </p>
  <div class="v-error selectable">
    <output>[UNKNOWN] Request failed with status code 500</output>
    <span class="v-icon small has-click copy-error" role="button" tabindex="0"><i data-icon="content_copy">content_copy</i></span>
  </div>
</div>

CSS

:root {
  --foreground-normal: #c9d1d9;
  --foreground-normal-alt: #f0f6fc;
  --foreground-subdued: #666672;
  --background-page: #0d1117;
  --danger: #e35169;
  --red-10: #2b1b22;
  --danger-alt: var(--red-10);
  --border-radius-outline: 6px;
  --border-radius: 4px;
  
  --family-monospace: "Fira Mono", monospace, sans-serif;
  --family-serif: "Merriweather", serif;
  --family-sans-serif: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  color: var(--foreground-normal);
  font-weight: 500;
  font-size: 14px;
  font-family: var(--family-sans-serif);
  font-style: normal;
  line-height: 22px;
  background-color: var(--background-page);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.v-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.danger .icon {
  color: var(--danger);
  background-color: var(--danger-alt);
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
  border-radius: 50%;
}
.v-icon.large {
  --v-icon-size: 36px;
}
.v-icon  {
  position: relative;
  display: inline-block;
  width: var(--v-icon-size);
  min-width: var(--v-icon-size);
  height: var(--v-icon-size);
  color: var(--v-icon-color);
  font-size: 0;
  vertical-align: middle;
}
.v-icon i {
  display: block;
  font-family: "Material Symbols";
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-size: var(--v-icon-size);
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz"...