@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

html {
  /* This is a more intuitive way to deal with the box model. It can be quite confusing when this is not set. */
  box-sizing: border-box;
  /* The default line-height is way too short for comfortable reading and many people forget to rest it. */
  line-height: 1.4;
  /* This is a new feature of CSS (baseline 2024) that reduces widows and orphans in text wrapping. There's not much of a downside so just enable it at least by default. */
  text-wrap: pretty;
  /* This let's you transition 1height: auto` which has been a dream for web developers for the past two decades. It's currently (2025) only working in Chromium-based browsers */
  interpolate-size: allow-keywords;
}

/* This is maybe opinionated but generally horizontal scrolling is accidental and a very bad UX. */
html, body {
  overflow-x: clip;
}

/* This tones down the line-height rule we made above when applied to headings where it's not necessary. */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}

/* Have all elements inherit the above box-sizing. Setting the property like this means that you can have a change cascade to its children. */
*, *::after, *::before {
  box-sizing: inherit;
}

/* Hot Page will add width and height attributes to any <img> tag for images you upload to the service. This really helps the page load because it reserves space for the image and prevents the page jumping around as images load. However, this can make it difficult to size the images. If you add a width without a height, it will use the height from the attribute and your image will probably be squished in a very unattractive way. Setting "height: auto" will fix that problem. */
img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Other css from hotpage - research page */

.banner {
  background-color: #ff0000;
  overflow: hidden;
  position: relative;
  height: 40px;
}

.ticker-container {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
}

.ticker {
  font-family: 'VT323', monospace;
  color: white;
  font-size: 16px;
  line-height: 40px;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.banner-image {
  height: 30px;
  width: 30px;
  z-index: 2;
  position: absolute;
}

.left-image {
  left: 5px;
  top: 5px;
}

.right-image {
  right: 5px;
  top: 5px;
}

:root {
  --terminal-red: #ff0000;
  --terminal-black: #000000;
  --terminal-font: 'Courier New', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
  color: var(--terminal-black);
  font-family: var(--terminal-font);
  line-height: 1.6;
  padding: 10px;
  margin: 0;
  width: 100%;
}

header {
  border-bottom: 1px solid var(--terminal-red);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

h1 {
  font-size: 24px;
  color: var(--terminal-red);
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
}

li {
  margin-bottom: 12px;
}

li::before {
  content: "> ";
  color: var(--terminal-red);
}

a {
  color: var(--terminal-black);
  text-decoration: none;
  border-bottom: 1px dotted var(--terminal-red);
  padding-bottom: 2px;
  transition: color 0.2s;
  font-family: var(--terminal-font);
  font-weight: bold;
}

a:hover {
  color: var(--terminal-red);
}

footer {
  margin-top: 30px;
  border-top: 1px solid var(--terminal-red);
  padding-top: 10px;
  font-size: 14px;
  color: var(--terminal-red);
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/*  more styling from hotpage - homepage */
.console-button-container {
  height: 40px;
  margin: 30px 0;
}

.console-button {
  background-color: black;
  color: white;
  font-family: monospace;
  padding: 10px 20px;
  border: none;
  box-shadow: 4px 4px 0px #333;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  top: 0;
  left: 0;
  transition: all 0.1s;
  text-decoration: none;
  display: inline-block;
}

.console-button:hover {
  background-color: #1a1a1a;
}

.console-button:active {
  box-shadow: 0px 0px 0px #333;
  top: 4px;
  left: 4px;
}

.banner {
  background-color: #ff0000;
  overflow: hidden;
  position: relative;
}

.ticker-container {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
}

.ticker {
  font-family: 'Press+Start+2P', monospace;
  color: white;
  font-size: 16px;
  line-height: 40px;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.banner-image {
  height: 30px;
  width: 30px;
  z-index: 2;
  position: absolute;
}

.left-image {
  left: 5px;
  top: 5px;
}

.right-image {
  right: 5px;
  top: 5px;
}

.container {
  display: flex;
  justify-content: flex-start;
}

.offset-left-flex {
  margin-left: 2%;
}

@media screen and (min-width: 768px) {
  .centered-image {
    max-width: 30%;
  }
}

.centered-image {
  display: block;
  margin: 30px auto 10px;
  width: 50%;
  height: auto;
  justify-self: center;
}

.retro-panel {
  background-color: #f5f5f5;
  border: 2px solid #ED1F24;
  box-shadow: 0 0 10px rgba(204, 0, 0, 0.3);
  margin: 20px 20px 20px 20px;
  box-sizing: border-box;
  max-width: 80%;
}

.panel-header {
  background-color: #ED1F24;
  color: #ffffff;
  padding: 10px 15px;
  font-family: 'Press+Start+2P', monospace;
  font-size: 18px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #ED1F24;
  box-sizing: border-box;
}

.panel-body {
  padding: 10px 20px 20px;
  display: flex;
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
  font-family: 'Press+Start+2P', monospace;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.panel-content {
  flex: 1;
}

.panel-text {
  color: #333333;
  line-height: 1.6;
  font-size: 16px;
}

.panel-text p {
  margin-top: 0;
}

.panel-status {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px dotted #ED1F24;
  color: #ED1F24;
  font-size: 14px;
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .panel-body {
    padding: 10px;
  }

  .panel-image {
    margin: 5px 5px 1px;
    align-self: center;
  }

  .ticker {
    font-size: 10px;
  }

  .banner {
    height: 40px;
  }
}

@media (max-width: 768px) {
  .retro-panel {
    width: 80%;
    margin: 10px;
    min-width: 100%;
  }

  .retro-panel-g {
    min-width: 100%;
    margin: 10px;
  }

  .panel-header {
    font-size: 20px;
    padding: 8px 12px;
  }

  .panel-body {
    padding: 15px;
  }

  .panel-image {
  }

  .panel-title {
    font-size: 20px;
  }

  .panel-text {
    font-size: 14px;
  }
}

.prompt {
  color: #f2ff00;
  margin-right: 8px;
  font-size: 18;
  font-weight: bold;
}

.panel-header {
  background-color: #ED1F24;
  color: #ffffff;
  padding: 10px 15px;
  font-family: 'Press+Start+2P', monospace;
  font-size: 18px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #ED1F24;
  box-sizing: border-box;
}

.list-item {
  margin: 5px 0;
  font-size: 16px;
  font-family: 'Press+Start+2P', monospace;
  text-transform: none;
}

.list-item::before {
  content: "► ";
  color: #000;
}

.footer {
  text-align: right;
  margin-top: 15px;
  font-size: 14px;
}

.panel-title {
  color: #ED1F24;
  font-family: 'Press+Start+2P', monospace;
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 15px;
  text-shadow: 0 0 1px rgba(204, 0, 0, 0.3);
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wrapper {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  padding: 20px;
}

.p-font-2 {
  font-size: 20px;
  font-family: 'Press+Start+2P', monospace;
  text-transform: none;
  font-weight: bolder;
}

.illegal {
  font-family: Impact, sans-serif;
  color: #ED1F24;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.tpteam-container {
  --tpteam-red: #ff0000;
  --tpteam-black: #000000;
  --tpteam-font: 'VT323', monospace;
  background-color: white;
  color: var(--tpteam-black);
  font-family: var(--tpteam-font);
  line-height: 1.8;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 14px;
}

.tpteam-list {
  list-style-type: none;
}

.tpteam-list-item {
  margin-bottom: 20px;
}

.tpteam-list-item::before {
  content: "> ";
  color: var(--tpteam-red);
}

/* Arcade Components - Homepage */
.components-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.connector {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e53935;
  font-size: 24px;
  font-weight: bold;
  margin: 0 10px;
}

.arcade-console {
  width: 500px;
  background-color: white;
  border: 1px solid #e53935;
  padding: 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.title {
  text-align: left;
  color: white;
  font-size: 18px;
  margin: 0;
  padding: 10px;
  background-color: #ED1F24;
  font-weight: bold;
  border-bottom: 2px solid #000;
  font-family: 'Press+Start+2P', monospace;
  font-size: 22px;
  text-shadow: 0 0 1px rgba(204, 0, 0, 0.3);
}

.title::before {
  content: "> ";
}

.game-window {
  background-color: #ffeeee;
  height: 90px;
  position: relative;
  border-bottom: 1px solid #e53935;
  overflow: hidden;
  margin: 10px;
}

.depth-bar {
  position: absolute;
  bottom: 0;
  background-color: #ffeeee;
  border: 1px solid #e53935;
  width: 25px;
  transition: height 0.5s;
}

.ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url('assets/250.webp');
  border-radius: 50%;
  animation: fall linear forwards;
  background-size: cover;
  object-fit: cover;
}

@keyframes fall {
  to {
    transform: translateY(90px);
  }
}

.sankey-window {
  background-color: #ffeeee;
  height: 90px;
  position: relative;
  border-bottom: 1px solid #e53935;
  overflow: hidden;
  margin: 10px;
}

.sankey-start {
  position: absolute;
  left: 10px;
  top: 30px;
  height: 30px;
  width: 30px;
  background-color: #ffeeee;
  border: 1px solid #e53935;
}

.sankey-end {
  position: absolute;
  right: 10px;
  width: 30px;
  background-color: #ffeeee;
  border: 1px solid #e53935;
}

.sankey-path {
  position: absolute;
  height: 1px;
  background-color: transparent;
  border-top: 1px solid #e53935;
  transform-origin: left center;
}

.sankey-ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url('assets/250.webp');
  border-radius: 50%;
  top: 37px;
  left: 40px;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background-size: cover;
  object-fit: cover;
}

.info-section {
  padding: 0px;
  margin: 0;
}

.info-section p {
  color: #333;
  font-size: 12px;
  line-height: 1.4;
  margin: 10px 0;
  font-family: 'Press+Start+2P', monospace;
}

.btn-learn-more {
  background-color: #e53935;
  color: white;
  border: none;
  border-bottom: 1px solid #000;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
  display: block;
  margin: 10px auto;
  text-transform: uppercase;
}

.btn-learn-more:hover {
  background-color: #c62828;
}

.console-footer {
  text-align: left;
  margin: 0;
  font-size: 12px;
  color: #e53935;
  border-top: 1px dotted #e53935;
  padding: 8px 10px;
}

.console-program {
  display: inline-block;
  color: #e53935;
  font-family: monospace;
}

.console-program::after {
  content: "_";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1200px) {
  .components-container {
    flex-direction: column;
  }

  .connector {
    transform: rotate(90deg);
    margin: 10px 0;
  }

  .arcade-console {
    width: 95%;
    max-width: 400px;
  }
}

/*  more styling from hotpage - get involved */

.banner {
  background-color: #ff0000;
  height: 40px;
  display: flex;
  align-items: center;
}

.scroll-container {
  flex: 1;
  overflow: hidden;
  margin: 0 40px;
  position: relative;
}

.ticker-container {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
  position: absolute;
}

.ticker {
  font-family: 'VT323', monospace;
  color: white;
  font-size: 16px;
  line-height: 40px;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

.banner-image {
  height: 30px;
  width: 30px;
  z-index: 2;
  position: absolute;
}

.left-image {
  left: 12px;
  top: 12px;
}

.right-image {
  right: 12px;
  top: 12px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/*  more styling from hotpage - wtf */
.centered-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .centered-image {
    max-width: 80%;
  }
}

@media  screen and (min-width:768px) {
  .centered-image2  {
    max-width: 80%;
  }
}

.half-line {
  width: 66%;
}

.terminal-wrapper {
  position: relative;
  margin: 30px;
}

.terminal-callout {
  font-family: "Franklin", Franklin, monospace;
  background-color: #000000;
  border: 2px solid #888888;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.terminal-inner {
  border: 1px solid #888888;
  background-color: #000000;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.terminal-title {
  text-align: center;
  border-bottom: 1px solid #888888;
  background-color: rgb(255, 254, 254);
  padding: 8px;
}

/* Content area */
.terminal-content {
  color: #f4f0f0;
  line-height: 1.5;
  padding: 15px;
}

/* Header variants */
.terminal-header {
  background-color: #f5f056;
  text-align: center;
  color: rgb(0, 0, 0);
  padding: 8px 16px;
  margin: 10px;
  line-height: 1.4;
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.banner {
  background-color: #ff0000;
  height: 40px;
  display: flex;
  align-items: center;
}

.scroll-container {
  flex: 1;
  overflow: hidden;
  margin: 0 40px;
  position: relative;
}

.ticker-container {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
  position: absolute;
}

.ticker {
  font-family: 'VT323', monospace;
  color: white;
  font-size: 16px;
  line-height: 40px;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

.banner-image {
  height: 30px;
  width: 30px;
  z-index: 2;
  position: absolute;
}

.left-image {
  left: 12px;
  top: 12px;
}

.right-image {
  right: 12px;
  top: 12px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.illegal {
  font-family: Impact, sans-serif;
  color: #ED1F24;
}

.p-font-2 {
  font-size: 20px;
  font-family: 'Press+Start+2P', monospace;
  text-transform: none;
  font-weight: bolder;
}

.tpteam-container {
  --tpteam-red: #ff0000;
  --tpteam-black: #000000;
  --tpteam-font: 'VT323', monospace;
  background-color: white;
  color: var(--tpteam-black);
  font-family: var(--tpteam-font);
  line-height: 1.8;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 14px;
}

.tpteam-list {
  list-style-type: none;
}

.tpteam-list-item {
  margin-bottom: 20px;
}

.tpteam-list-item::before {
  content: "> ";
  color: var(--tpteam-red);
}

/* Arcade Components - Homepage */
.components-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.connector {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e53935;
  font-size: 24px;
  font-weight: bold;
  margin: 0 10px;
}

.arcade-console {
  width: 500px;
  background-color: white;
  border: 1px solid #e53935;
  padding: 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.title {
  text-align: left;
  color: white;
  font-size: 18px;
  margin: 0;
  padding: 10px;
  background-color: #ED1F24;
  font-weight: bold;
  border-bottom: 2px solid #000;
  font-family: 'Press+Start+2P', monospace;
  font-size: 22px;
  text-shadow: 0 0 1px rgba(204, 0, 0, 0.3);
}

.title::before {
  content: "> ";
}

.game-window {
  background-color: #ffeeee;
  height: 90px;
  position: relative;
  border-bottom: 1px solid #e53935;
  overflow: hidden;
  margin: 10px;
}

.depth-bar {
  position: absolute;
  bottom: 0;
  background-color: #ffeeee;
  border: 1px solid #e53935;
  width: 25px;
  transition: height 0.5s;
}

.ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url('assets/250.webp');
  border-radius: 50%;
  animation: fall linear forwards;
  background-size: cover;
  object-fit: cover;
}

@keyframes fall {
  to {
    transform: translateY(90px);
  }
}

.sankey-window {
  background-color: #ffeeee;
  height: 90px;
  position: relative;
  border-bottom: 1px solid #e53935;
  overflow: hidden;
  margin: 10px;
}

.sankey-start {
  position: absolute;
  left: 10px;
  top: 30px;
  height: 30px;
  width: 30px;
  background-color: #ffeeee;
  border: 1px solid #e53935;
}

.sankey-end {
  position: absolute;
  right: 10px;
  width: 30px;
  background-color: #ffeeee;
  border: 1px solid #e53935;
}

.sankey-path {
  position: absolute;
  height: 1px;
  background-color: transparent;
  border-top: 1px solid #e53935;
  transform-origin: left center;
}

.sankey-ball {
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url('assets/250.webp');
  border-radius: 50%;
  top: 37px;
  left: 40px;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background-size: cover;
  object-fit: cover;
}

.info-section {
  padding: 0px;
  margin: 0;
}

.info-section p {
  color: #333;
  font-size: 12px;
  line-height: 1.4;
  margin: 10px 0;
  font-family: 'Press+Start+2P', monospace;
}

.btn-learn-more {
  background-color: #e53935;
  color: white;
  border: none;
  border-bottom: 1px solid #000;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
  display: block;
  margin: 10px auto;
  text-transform: uppercase;
}

.btn-learn-more:hover {
  background-color: #c62828;
}

.console-footer {
  text-align: left;
  margin: 0;
  font-size: 12px;
  color: #e53935;
  border-top: 1px dotted #e53935;
  padding: 8px 10px;
}

.console-program {
  display: inline-block;
  color: #e53935;
  font-family: monospace;
}

.console-program::after {
  content: "_";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1200px) {
  .components-container {
    flex-direction: column;
  }

  .connector {
    transform: rotate(90deg);
    margin: 10px 0;
  }

  .arcade-console {
    width: 95%;
    max-width: 400px;
  }
}

/* Terminal Overlay Styles */
#tplus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  font-family: monospace;
  display: flex;
  justify-content: center;
  padding-top: 10vh;
  color: #ff0000;
  overflow: auto;
}

#tplus-terminal {
  width: 100%;
  max-width: 800px;
  font-size: 16px;
}

#tplus-password {
  padding: 20px;
}

#tplus-prompt {
  color: #ffff00;
  margin: 15px 0;
}

#tplus-input-line {
  display: flex;
  align-items: flex-end;
  margin-top: 15px;
}

#tplus-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ff0000;
  font-family: monospace;
  font-size: 20px;
  width: 80%;
  margin-left: 5px;
}

#tplus-cursor {
  width: 10px;
  height: 2px;
  background: #ff0000;
  display: inline-block;
  animation: blink 1s step-end infinite;
}

#tplus-surprise {
  display: none;
  padding: 20px;
}

#tplus-ascii {
  color: #ffff00;
  font-size: 6px;
  line-height: 1;
  white-space: pre;
  text-align: center;
  margin: 20px 0;
}

#tplus-welcome {
  margin: 20px 0;
}

#tplus-continue {
  color: #ffff00;
  margin-top: 20px;
  animation: blink 1s step-end infinite;
  cursor: pointer;
}

.fade-out {
  animation: fade 1s forwards;
}

@keyframes fade {
  to { opacity: 0; visibility: hidden; }
}

/* Index page scoped layout to mirror deployed site */
.index-page {
  width: 100%;
  margin: 0;
  padding: 10px;
}

.index-page .centered-image {
  display: block;
  margin: 30px auto 10px;
  width: 50%;
  max-width: 1000px;
  height: auto;
}

.index-page .retro-panel {
  margin: 20px auto;
  max-width: 1220px;
}

.index-page .panel-body {
  gap: 16px;
}

.index-page .components-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1220px;
  margin: 0 auto;
}

.index-page .arcade-console {
  width: 520px;
}

.index-page .connector {
  margin: 0 24px;
}

/* Center headline lines and rule like live site */
.index-page .wrapper {
  display: flex;
  justify-content: center;
  padding: 0;
}

.index-page .p-font-2 {
  text-align: center;
}

.index-page hr {
  max-width: 1220px;
  margin: 12px auto 24px;
  border: 0;
  border-top: 1px solid #cfcfcf;
}

.index-page .components-container { margin-top: 24px; }

@media (max-width: 1200px) {
  .index-page {
    width: 100%;
    padding: 10px;
  }
  .index-page .components-container {
    flex-direction: column;
    gap: 24px;
  }
  .index-page .arcade-console {
    width: 95%;
    max-width: 600px;
  }
  .index-page .connector {
    transform: rotate(90deg);
    margin: 10px 0;
  }
}