/* normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

/* fonts */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* custom colors*/
:root {
  --background: #12171B;
  --text: #D6DFDF;
  --green:#6CC989;
  --grey:#20262C;
  --pink:#ff99ac;
  --red: #e5383b;
  --teal : #8BA5BD;
}

::-moz-selection { /* Code for Firefox */
  color: var(--background);
  background: var(--green);
}

::selection {
  color: var(--background);
  background: var(--green);
}

/*  */
html{
  font-family: 'JetBrains Mono', monospace;
  background-color: var(--background);
  color: var(--text);
  scroll-behavior: smooth;
}

body{
  font-size:17px;
  padding:5px;
  line-height:1.4;
}

.app-body{
  height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
}

main{
  width: 1300px;
}

.main-header{
  border-bottom:1px solid var(--grey);
  height:46px;
  background: #101418 ;
}

.main-body{
height:calc(85vh - 92px);
max-height:800px;
overflow-y: scroll;
padding: 5px;
margin:2px;
background: var(--background);
}

.main-footer{
    height:46px;
    border-top:1px solid var(--grey);
    background: #101418 ;
    color: var(--teal);
  }

.main-body::-webkit-scrollbar {
	 width: 8px;
	}

	.main-body::-webkit-scrollbar-thumb {
	 background: var(--teal);
	 border-radius: 15px;
	}

	.main-body::-webkit-scrollbar-thumb:hover{
	 background: var(--green);
	}
  
	.main-body::-webkit-scrollbar-track{
	 background: var(--grey);
	 border-radius: 6px;
  }

  .scrollbardiv::-webkit-scrollbar {
	 width: 8px;
	}

	.scrollbardiv::-webkit-scrollbar-thumb {
	 background: var(--teal);
	 border-radius: 15px;
	}

	.scrollbardiv::-webkit-scrollbar-thumb:hover{
	 background: var(--green);
	}
  
	.scrollbardiv::-webkit-scrollbar-track{
	 background: var(--grey);
	 border-radius: 6px;
  }

   .landing-div-800 {
      margin: 50px auto;
      max-width: 800px;
    }

    .landing-div-1000 {
      margin: 50px auto;
      max-width: 1000px;
    }
    
article{
  border: 1px solid var(--grey);
  border-radius:5px;
}

p{
  padding:5px 10px;
  margin:0;
}

h2{
  color:var(--green);
  padding:12px 10px;
  margin:0;
  font-size:18px;
}

.terminal-first{
  color: var(--green);
}

.terminal-first .robot-icon {
  display: inline-block;
  width: 16px; height: 16px;
  position:relative;
  top:-2px;
  background: url('/images/robot.svg') no-repeat center / contain;
  vertical-align: middle;
}

.pink-bold{
  color:var(--pink);
  font-weight: bold;
}

input{
  background: var(--background);
  color:white;
  border: 1px solid var(--text);
  border-radius: 5px;
  height:34px;
  padding:5px;
}

button{
  background: #faedcd;
  padding: 8px;
  cursor:pointer;
  border-radius: 5px;
  border: none;
  height: 34px;
  color: var(--background);
}

.landing-button{
  background: var(--green);
  color: var(--background);
  padding: 8px;
  cursor:pointer;
  border-radius: 5px;
  border: none;
  height: 34px;
}

#c {
      display: block;
      opacity: 0.07;
      position: absolute;
      top: 0;
      left: 0;
      max-width: 100% !important;
      z-index: -100;
    }

@media (max-width: 500px) {
    .app-header-page{
      display: none;
    }
  }    

  .modalloader {
  width: 120px;
  height: 24px;
  -webkit-mask:
    radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
   linear-gradient(var(--green) 0 0) 0/0% no-repeat
   #ddd;
  animation: l7 2s infinite linear;
}
@keyframes l7 {
    100% {background-size:100%}
}