/*  
* Style by D3NN7
* and Patrick Hlauke (https://codepen.io/patrickhlauke/pen/YaoBop)
*/

@font-face {
    font-family: 'Noto Sans Display';
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/NotoSansDisplay-Regular.ttf);
  }
  html { background: #111;
         padding: 1em;
         font-family: Noto Sans Display;
         color: #eee;
         font-size: 2em;
         line-height: 1;
         text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
         letter-spacing: 0.125em;
         animation-duration: 0.01s;
         animation-name: textflicker;
         animation-iteration-count: infinite;
         animation-direction: alternate;
  }
  h1 { 
    font-size: 5em; 
    text-align: center;
  }

  a {
    color: white;
  }

  @media screen and (min-width: 1200px) {
    body {
        margin-left: 20rem;
        margin-right: 20rem;
    }
  }

  @media screen and (min-width: 600px) {
      body {
          margin-left: 5em;
          margin-right: 5em;
      }
  }
  
  @keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
    }
    to {
      text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
    }
  }

input[type=text] {
  background-color: #111;
  color: #eee;
  caret-color: #eee; 
  border-style: none;
  font-size: 1em;
  font-family: 'Courier New', monospace;
  text-shadow: 0.06rem 0 0.06rem #ea36af, -0.06rem 0 0.06rem #75fa69;
  &:focus {
    outline: none !important;
    border-width: 0px !important;
    border: none !important;
}
}

/*claude */
.bottom-fixed {
    position: fixed;
    bottom: 1em;
    left: 7.35em;   
    right: 5em;
    margin: 0;
}

/*claude */
#energy {
  position: relative;
  top: -30px; 
  width:200px;
  height:200px;
}

/* Scanlines
* https://blog.carbonfive.com/2015/01/07/vintage-terminal-effect-in-css3/
*/
.scanlines {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,.2) 70%,
        rgba(0,0,0,.6)
    );
    background-size: 100% .3rem;
    position: fixed;
    pointer-events: none;
}
.scanlines:before {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 5px;
  background: #fff;
  background: linear-gradient(to bottom,
      rgba(255,0,0,0) 0%,
      rgba(255,250,250,1) 50%,
      rgba(255,255,255,0.98) 51%,
      rgba(255,0,0,0) 100%
  ); /* W3C */
  opacity: .1;
}
.scanlines:after {
  box-shadow: 0 2px 6px rgba(25,25,25,0.2),
      inset 0 1px rgba(50,50,50,0.1),
      inset 0 3px rgba(50,50,50,0.05),
      inset 0 3px 8px rgba(64,64,64,0.05),
      inset 0 -5px 10px rgba(25,25,25,0.1);
}
#terminal:focus-within ~ .scanlines:before {
    content: '';
    display: block;
    animation: vline calc(var(--time, 2) * 1s) linear infinite;
}
/*
 * MS Edge don't support focus-within and css vars
 * inside pseudo selector
 */
@supports (-ms-ime-align:auto) {
    .scanlines:before {
        content: '';
        animation: vline 3s linear infinite;
    }
}
@keyframes vline {
  to { transform: translate(0, 100vh)}
}