@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

:root {
  font-family: 'Fira Code', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --color-background: black;
}

* {
  touch-action: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
}

body {
  overflow: hidden;
  margin: 0;
  position: relative;
}

body::before {
  z-index: 1000;
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-image: linear-gradient(
    45deg,
    #ff0000,
    #ff8000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8000ff,
    #ff0080
  ) 1;
  filter: blur(3px);
  animation: borderRotate 4s linear infinite, borderPulse 6s ease-in-out infinite;
}

@keyframes borderPulse {
  0% { transform: scale(1) }
  20% { transform: scale(1.003) }
  35% { transform: scale(1) }
  50% { transform: scale(1.006) }
  65% { transform: scale(1.002) }
  85% { transform: scale(1.004) }
  100% { transform: scale(1) }
}

@keyframes borderRotate {
  from { border-image-source: linear-gradient(
    45deg,
    #ff0000,
    #ff8000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8000ff,
    #ff0080
  ) }
  to { border-image-source: linear-gradient(
    405deg,
    #ff0000,
    #ff8000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8000ff,
    #ff0080
  ) }
}

#terminal {
  width: 100%;
  height: 95%; /* leave room for the window dock */
  overflow: hidden;
  padding-inline: 5px;
}

.xterm-viewport {
  overflow-y: auto !important;
}

.xterm-viewport::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: transparent;
}

.xterm-viewport::-webkit-scrollbar
{
  width: 12px;
  background-color: transparent;
}

.xterm-viewport::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(14, 105, 14);
}

.xterm-viewport::-webkit-scrollbar-thumb:hover {
  background-color: rgb(14, 105, 14);
}
