:root {
  --anca: "Anka/Coder Condensed Regular";
}

body {
    background-color:rgb(0, 0, 0);
    margin: 0;

}




#screen {
    background: #000000;
    height: 350px;
    width: 1000px;
}

.n-input {
    padding-bottom: 100px;
    padding: 10px;
    display: flex;
    justify-content: space-between;

}

.canvasDiv {
    height: 350px;
    width: 900px;
    overflow-x: auto;
    overflow-y: hidden;
}


#collisions {
    font-family: anca, monospace;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* typewriter animation */
#typewriter {
  font-family: anca, monospace;
  font-size: 20px;
  margin-bottom: 50px;
  white-space: pre-line;
 display: inline-block;
    transition:
        transform 0.8s ease,
        opacity 0.8s ease;
}

.cursor {
  display: inline-block;
  width: 7px;
  height: 20px;
  background: white;
  margin-left: 6px;
  transform: translateY(3px);
  animation: blink 0.7s steps(1) infinite;
}

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



/* fades non-bold intro text */
.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fade-in {
  opacity: 1;
 
}

/* default: screens wider than 1332px */
.move-to-top {
  position: absolute;
  transform: translateY(-22rem);
}

/* 992px - 1332px */
@media (min-width: 992px) and (max-width: 1332px) {
  .move-to-top {
    transform: translateY(-23rem);
  }
}

/* 768px -992px */
@media (min-width: 768px) and (max-width: 992px) {
  .move-to-top {
    transform: translateY(-24rem);
  }
}



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



/* the old tv animation css code */
.crt {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

.crt-content {
  width: 95%;
  height: 95%;
  border-radius: 30px;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: left;     
  margin-left: 7.5%;   
  margin-right: 3.5%;   
  color: white;
  gap: 55px;
  transform: perspective(600px) scale(1.03) rotateX(3deg); 
  image-rendering: pixelated;
  position: relative;

  overflow: hidden;
}

/* the lines */
.crt-content::before {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* vignette */
.crt-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: radial-gradient(
    circle at center,
    transparent 50%,
    rgba(0,0,0,0.5) 95%
  );
}

/* flicker */
@keyframes flicker {
  0%, 100% { opacity: 0.98; }
  50% { opacity: 1; }
}
.crt-content {
  animation: flicker 0.12s infinite;
}

@import url('fonts.googleapis.com');

#pi-output {
  font-family: "Computer Modern Serif", serif;;
  font-size: 22px;
  white-space: pre;
  color: white;
  margin-top: -50px;
  margin-bottom: -50px;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#pi-output .highlight {
  text-decoration: underline;
  font-weight: bolder;
  font-size: 22px;
  opacity: 1;
}

@import url(https://db.onlinewebfonts.com/c/e35a02b1a50c9385c63b9ef30afb6b06?family=Architype+Fodor+W00);

#pi-warning {
  border: 1px solid white;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-family: "Architype Fodor", monospace;
  font-size: 15px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
  margin-top: -50px;
  width: 255px;
  padding: 5px;
}

#pi-warning img.warn-icon {
  width: 18px;
  image-rendering: pixelated;
}

#pi-warning.show {
  opacity: 1;
  transform: translateY(0);
}

.shake {
  animation: warning-shake 0.25s linear;
}

@keyframes warning-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.hidden {
  opacity: 0;
  display: none;
}

#mobile-block {
  display: none;
}

@media only screen and (max-width: 768px) {
  #mobile-block {
    margin: 10%;
    display: flex !important;
    color: white !important;
    text-align: center;
    font-family: monospace;
    font-size: 18px;

    position: fixed;
    inset: 0;

    justify-content: center;
    align-items: center;

    background: black;
    z-index: 9999;
  }

  body > *:not(#mobile-block) {
    display: none !important;
  }
}