<h1 class="main-h1">The server got tired of waiting<br>for an answer 💔</h1>
<div class="container">
  <h2><mark>Now it's handshaking
    <br> with another browser!</mark></h2>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 623 220">
  <title>408 Error</title>
  <desc>Server tired of waiting</desc>
    <defs>
      <g id="heart-shape" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M38 11.3L44.2 5.1 44.2 5.1C51.6-1.8 63.2-1.7 70.5 5.5 77.7 12.8 77.8 24.4 70.9 31.8L70.9 31.8 38 64.7 38 64.7 38 64.7 5.1 31.8 5.1 31.8C-1.8 24.4-1.7 12.8 5.5 5.5 12.8-1.7 24.4-1.8 31.8 5.1L31.8 5.1 38 11.3Z" fill="#D0021B"/></g>
</defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group-9">
      <g id="Group-7">
        <g id="Group-6">
          <g id="Group-3" transform="translate(282.000000, 90.000000)" fill="#747D86" fill-rule="nonzero">
            <path id="Line" d="M0 60.1L37.99 61.36 23.8 30.46 0 60.1ZM129.56-2.73L26.7 44.54 23.97 45.79 26.47 51.24 29.2 49.99 132.07 2.73 134.79 1.47 132.29-3.98 129.56-2.73Z"/>
          </g>
          <path id="Line" d="M315.5 148.5L289.52 120.75 277.71 152.63 315.5 148.5ZM179.46 101.31L285.62 140.63 288.43 141.67 290.51 136.05 287.7 135 181.54 95.69 178.73 94.64 176.64 100.27 179.46 101.31Z" fill="#14202C" fill-rule="nonzero"/>
          <g id="Group-5">
            <rect id="Rectangle-3" fill="#14202C" x="5" y="50" width="196" height="137"/>
            <rect id="Rectangle" fill="#36465A" x="0" y="0" width="208" height="50" rx="4"/>
            <rect id="Rectangle" fill="#36465A" x="0" y="60" width="208" height="50" rx="4"/>
            <rect id="Rectangle" fill="#36465A" x="0" y="120" width="208" height="50" rx="4"/>
            <g id="Group-2" transform="translate(16.000000, 133.000000)" fill="#FFFFFF" fill-opacity="0.27">
              <rect id="Rectangle-2" x="0" y="0" width="23" height="8"/>
              <rect id="Rectangle-2" x="0" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="30" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="61" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="30" y="0" width="23" height="8"/>
              <rect id="Rectangle-2" x="61" y="0" width="23" height="8"/>
            </g>
            <path d="M137 120L204 120C206.21 120 208 121.79 208 124L208 166C208 168.21 206.21 170 204 170L137 170 137 120Z" id="Rectangle" fill="#1F2F3F"/>
            <g id="Group-Copy" transform="translate(150.000000, 134.000000)">
              <circle id="Oval" fill="#F5A623" cx="4" cy="4" r="4"/>
              <circle id="Oval" fill="#50E3C2" cx="19" cy="4" r="4"/>
              <circle id="Oval" fill="#4A90E2" cx="34" cy="4" r="4"/>
              <circle id="Oval" fill="#4A90E2" cx="34" cy="19" r="4"/>
              <circle id="Oval" fill="#EBEBEB" cx="19" cy="19" r="4"/>
              <circle id="Oval" fill="#D0021B" cx="4" cy="19" r="4"/>
            </g>
            <path d="M137 60L204 60C206.21 60 208 61.79 208 64L208 106C208 108.21 206.21 110 204 110L137 110 137 60Z" id="Rectangle" fill="#1F2F3F"/>
            <g id="Group-2" transform="translate(16.000000, 73.000000)" fill="#FFFFFF" fill-opacity="0.27">
              <rect id="Rectangle-2" x="0" y="0" width="23" height="8"/>
              <rect id="Rectangle-2" x="0" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="30" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="61" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="30" y="0" width="23" height="8"/>
              <rect id="Rectangle-2" x="61" y="0" width="23" height="8"/>
            </g>
            <g id="Group-Copy" transform="translate(150.000000, 74.000000)">
              <circle id="Oval" fill="#D0021B" cx="4" cy="4" r="4"/>
              <circle id="Oval" fill="#4A90E2" cx="19" cy="4" r="4"/>
              <circle id="Oval" fill="#F5A623" cx="34" cy="4" r="4"/>
              <circle id="Oval" fill="#50E3C2" cx="34" cy="19" r="4"/>
              <circle id="Oval" fill="#EBEBEB" cx="19" cy="19" r="4"/>
              <circle id="Oval" fill="#50E3C2" cx="4" cy="19" r="4"/>
            </g>
            <path d="M137 0L204 0C206.21 0 208 1.79 208 4L208 46C208 48.21 206.21 50 204 50L137 50 137 0Z" id="Rectangle" fill="#1F2F3F"/>
            <g id="Group-2" transform="translate(16.000000, 13.000000)" fill="#FFFFFF" fill-opacity="0.27">
              <rect id="Rectangle-2" x="0" y="0" width="23" height="8"/>
              <rect id="Rectangle-2" x="0" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="30" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="61" y="16" width="23" height="8"/>
              <rect id="Rectangle-2" x="30" y="0" width="23" height="8"/>
              <rect id="Rectangle-2" x="61" y="0" width="23" height="8"/>
            </g>
            <g id="Group" transform="translate(150.000000, 14.000000)">
              <circle id="Oval" fill="#D0021B" cx="4" cy="4" r="4"/>
              <circle id="Oval" fill="#4A90E2" cx="19" cy="4" r="4"/>
              <circle id="Oval" fill="#50E3C2" cx="34" cy="4" r="4"/>
              <circle id="Oval" fill="#50E3C2" cx="34" cy="19" r="4"/>
              <circle id="Oval" fill="#EBEBEB" cx="19" cy="19" r="4"/>
              <circle id="Oval" fill="#D0021B" cx="4" cy="19" r="4"/>
            </g>
          </g>
          <g id="Group-4" transform="translate(380.000000, 7.000000)">
            <rect id="Rectangle-5" fill="#4E5666" x="97" y="147" width="50" height="24.69"/>
            <rect id="Rectangle-6" fill="#101333" x="66" y="171" width="110.55" height="7.2" rx="2"/>
            <path d="M5.5 5.5L5.5 136.44C123.55 136.44 123.84 136.44 199.55 136.44 214.54 136.44 214.84 136.44 237.5 136.44L237.5 5.5 5.5 5.5Z" id="Rectangle-4" stroke="#101333" stroke-width="11" fill="#394E64"/>
            <path d="M0 137L243 137 243 145.23C243 147.5 241.16 149.34 238.88 149.34L4.12 149.34C1.84 149.34 0 147.5 0 145.23L0 137Z" id="Rectangle-4" fill="#101333"/>
            <circle id="Oval-2" fill="#9FACB0" cx="223.5" cy="139.5" r="2.5"/>
          </g>
        </g>
        <path d="M450.46 55.4L452.83 52.97 452.83 52.97C455.65 50.28 460.07 50.34 462.82 53.16 465.56 55.97 465.62 60.49 462.99 63.37L463 63.38 450.47 76.2 450.46 76.19 450.45 76.21 437.92 63.38 437.93 63.38C435.3 60.49 435.36 55.97 438.11 53.16 440.85 50.35 445.27 50.29 448.09 52.98L448.09 52.97 450.46 55.4Z" id="Combined-Shape" fill="#69FF74"/>
        <path d="M552.54 55.4L554.91 52.97 554.91 52.97C557.73 50.28 562.15 50.34 564.89 53.16 567.64 55.97 567.7 60.49 565.07 63.37L565.08 63.38 552.55 76.2 552.54 76.19 552.53 76.21 540 63.38 540.01 63.38C537.38 60.49 537.44 55.97 540.18 53.16 542.93 50.35 547.35 50.29 550.17 52.98L550.17 52.97 552.54 55.4Z" id="Combined-Shape" fill="#69FF74"/>
      </g>
      <g id="Group-8" transform="translate(585.532238, 189.522995) scale(-1, 1) rotate(19.000000) translate(-585.532238, -189.522995) translate(561.032238, 172.022995)" stroke="#4E5666" stroke-linecap="round" stroke-width="2">
        <path d="M0 0C5.71 23.65 29.38 27.22 48.33 29.72" id="Path-2"/>
        <path d="M44.56 24.12C45.9 26.08 47.24 28.04 48.59 30.01" id="Path-3" transform="translate(46.572511, 27.062809) rotate(-5.000000) translate(-46.572511, -27.062809) "/>
        <path d="M48.79 29.95C46.7 31.36 44.68 33.15 42.59 34.55L48.79 29.95Z" id="Path-4" stroke-linejoin="round"/>
      </g>
      <rect id="Rectangle-8" fill="#353B55" x="395" y="145" width="25" height="3"/>
      <text class="note" fill="black" x="500" y="212">not you</text>
    </g>
  </g>
  <use class="heart" xlink:href="#heart-shape" x="260" y="80"></use>
  <use class="heart2" xlink:href="#heart-shape" x="260" y="80"></use>
  </svg>
  <p>Error 408</p>
  <button class="retry-btn" onclick="refreshPage()">Retry? </button>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:700');
@import url("https://fonts.googleapis.com/css?family=Cedarville+Cursive&text=notyou");

body {
  box-sizing: border-box;
  background-color: #50e3c2;
  color: #333;
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  text-align: center;
}
body:before {
  content: "";
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  animation: off 1s 6s forwards;
}
body:after {
  content: ".";
  color: white;
  font-size: 5rem;
  position: absolute;
  margin-left: -2.5rem;
  top: 30%;
  text-align: center;
  z-index: 1;
  animation: dots 2s 4, off 1s 6s forwards;
}
.container {
  background-image: radial-gradient(
    720px at center,
    rgba(255, 255, 255, 0.7) 50%,
    #50e3c2 0
  );
  background-repeat: no-repeat;
  min-height: 720px;
  opacity: 0;
  position: relative;
  animation: on 1s 6s forwards;
}
svg {
  margin: 2em 0 0;
  max-width: 623px;
}
.main-h1 {
  color: white;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  animation: on 2s 3s forwards, off 1s 6s forwards;
}
h2 {
  font-size: 2rem;
  padding-top: 8%;
}
.retry-btn {
  background-color: #0072e7;
  border: 0;
  border-radius: 0.25em;
  color: white;
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 1.5rem;
  margin: 1em auto;
  padding: 1em 1.5em;
  transition: background-color 0.5s ease;
}
.retry-btn:after {
  content: "💔";
}
.retry-btn:hover {
  background-color: #6400e7;
  cursor: pointer;
}
.retry-btn:hover:after {
  content: "❤️";
}
.note {
  font-family: "Cedarville Cursive", cursive;
}
.heart,
.heart2 {
  animation: moveUp 2s infinite;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 290px 120px;
}
.heart2 {
  animation-delay: 0.8s;
}
@keyframes dots {
  30% {
    text-shadow: 0.25em 0 0 white;
  }
  60%,
  90% {
    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
  }
}
@keyframes off {
  to {
    opacity: 0;
  }
}
@keyframes on {
  to {
    opacity: 1;
  }
}
@keyframes moveUp {
  from {
    opacity: 1;
  }
  to {
    transform: translateY(-80px);
    opacity: 0;
  }
}

function refreshPage() {
  window.location.href = window.location.href;
}