/*
                                @@    @@  @@@@@@@@  @@   @@   @@@@@   @@@   @@      @@    @@  @@@@@@@@  @@@@@@@   @@@@@@@@  @@@   @@  @@@@@@@@                                
                                @@@  @@@  @@    @@  @@   @@  @@   @@  @@@@  @@      @@@  @@@  @@    @@  @@    @@  @@        @@@@  @@  @@    @@                                
                                @@ @@ @@  @@    @@  @@@@@@@  @@@@@@@  @@ @@ @@      @@ @@ @@  @@    @@  @@@@@@@   @@@@@@@@  @@ @@ @@  @@    @@                                
                                @@    @@  @@    @@  @@   @@  @@   @@  @@  @@@@      @@    @@  @@    @@  @@   @@   @@        @@  @@@@  @@    @@                                
                                @@    @@  @@@@@@@@  @@   @@  @@   @@  @@   @@@      @@    @@  @@@@@@@@  @@    @@  @@@@@@@@  @@   @@@  @@@@@@@@                                
www.mohanmoreno.ch
*/
@font-face {
  font-family: 'Monosansre';
	src: url("../font/mono3.woff2") format("woff2");
}
body {
  
  margin: 1rem;
  
  max-width: 100vw;
  color: #b1ebeb;
  background: #020534;
  font-family: monospace;
  /*font-family: 'Monosansre';*/
  font-size: clamp(0.12rem, 1.5vw, 3rem);
  letter-spacing:-0.3em;
  overflow-x: hidden;
  cursor:text;
  /*
  cursor:none;
  */
}
::selection {
  color: #020534;
  background-color: #ff7700;
}

textarea {
  left: -1000px;
  position: absolute;
}
b {
  font-weight: bold;
  text-decoration: underline;
}


#command {
  cursor: text;
  color: #b1ebeb;
}
#liner {
  line-height: 1.3em;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;

padding: 0;
display: flex;
flex-direction: row;
padding-top: -0.2em;

}
.prompt {
  line-height: 1.3em;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;

    line-height: 1.3em;

  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;

display: flex;
flex-direction: row;
color: #ff7700;
  letter-spacing: 0.05em;
margin-top: -0.01em;


}

#liner::selection{
  background-color:#020534;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
  
p {
  display: block;
  line-height: 1.3em;
  
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;

  margin-top: -0.01em;
}
.no-animation {
  animation: typing 0 steps(100, end);
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.index {
  color: #ff7700;
  font-weight:900;

}
.color2 {
  color: #b1ebeb;
  font-size: clamp(0.12rem, 1.5vw, 3rem);

    margin-top: -0.01em;
}
.command {
  color: #b1ebeb;
  color: #ff7700;
  text-shadow: 0 0 5px #ff7700; 
}
.long{
  display: block;
  line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;
    color: #b1ebeb;
    font-size: clamp(0.12rem, 1.5vw, 3rem);
    white-space: pre-wrap;

      margin-top: -0.01em;

}
.hist {
      color: #ff7700;
}
.error {
  color: #b1ebeb;
}
.white {
  color: #ff7700;
}
.inherit,
a {
  color: #b1ebeb;
}
a {
  text-decoration: underline;
}
a:hover {
  background: #b1ebeb;
  color: #020534;
}
a:focus {
  outline: 0;
}
#typer{
  letter-spacing: 0.05em;
  font-size: clamp(0.12rem, 1.5vw, 3rem);
  background-color:#020534;
  margin-left: 0.65em;
  margin-right: 0;
  padding-right: 0;
  margin-top: -0.01em; 

}
*::selection{
  color: #020534;
  background-color: #ff7700;
}
#typer::selection{
  color: #020534;
  background-color: #ff7700;
}
#command::selection{
    color: #020534;
  background-color: #ff7700;
}
textarea::selection{  background-color: #ff7700;
}
.pixel{
  display: block;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.05em;
  animation: typing 20ms steps(50, end);
  overflow-x: hidden;
  max-width: 100vw;
  font-weight:900;
  color: b1ebeb;
  margin-top:0;
  font-size: clamp(0.12rem, 1.5vw, 3rem);
}
#cursor{
  position: relative;
  opacity: 1;
  overflow: hidden;
  display: inline-block;
  text-decoration: blink;
  animation: blink 1s linear infinite;
  margin: 0;
  padding: 0;
  width: 0.65em;
  margin-top: -0.02em;

  border-bottom: 0.1em #ff7700 solid;
  color: none;
  background-color: none;
  letter-spacing: 0.05em;
  font-size:1em;
}
@keyframes blink{
	0%{opacity: 1.0;}
  1%{opacity: 0.0;}
  50%{opacity: 0.0;}
  51%{opacity: 1.0;}
}