* {
  margin : 0;
  padding : 0;
  box-sizing: border-box;
  font-family: "Orbitron", sans-serif;
}

body {
  background-color: #181d1a;
}

header {
  Position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
}

header h4 {
  position: absolute;
  left: 10%;
  bottom: 1rem;
  font-size:1.6rem;
}

/*Splash screen*/

.intro {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #7c8477;
  transition: 1s;
}

.loading-header {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.loading {
  position: relative;
  display: inline-block;
  bottom: -20px;
  opacity: 0;
  color: #d3e4d3;
  white-space: pre-wrap;
}

.loading.active {
  bottom: 0;
  opacity: 1;
  transition: ease-in-out 0.5s;
}

.loading.fade {
  bottom: 150px;
  opacity: 0;
  transition: ease-in-out 0.5s;
}

/*Typewriter Text*/

html {
font-size:62.5%;
}

*, *::before, *::after{
box-sizing:box-sizing;
padding:0;
margin:0;
}

section{
position:relative;
width:100%;
height:auto;
min-height:100vh;
display:grid;
place-items:center;
}

pre{
 color: #d3e4d3;
 font-family: "Courier New", monospace;
}
.typewriter{
position:relative;
width:auto;
height:auto;
padding:1rem;
display:flex;
flex-direction:column;
gap:1.5rem;
font-size: 1.4rem;
color: #7c8477;
}

.line01, .line02, .line03, .line04, .line05, .line06, .line07, .line08, .line09, .line10, .line11, .line12, .line13, .line14, .line15, .line16, .line17, .line18, .line19, .line20, .line21, .line22, .line23, .line24, .line25, .line26, .line27, .line28, .line29{
position: relative;
display: block;
width: fit-content;
white-space: nowrap;
overflow: hidden;
padding:0.1rem 0;
}

.line01::before, .line02::before, .line03::before, .line04::before, .line05::before, .line06::before, .line07::before, .line08::before, .line09::before,  .line10::before, .line11::before, .line12::before, .line13::before, .line14::before, .line15::before, .line16::before, .line17::before, .line18::before, .line19::before, .line20::before, .line21::before, .line22::before, .line23::before, .line24::before, .line25::before, .line26::before, .line27::before, .line28::before, .line29{
content:"";
position: absolute;
top:-0.1rem;
right:-1ch;
height:calc(100% + 0.2rem);
width:calc(100% + 1ch);
background-color: rgb(025 025 025 / 1.0);
border-left:2px solid white;
}

.line01::before { 
width:37ch; 
animation: typing calc(37 * 150ms) steps(36) calc(1 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
} 

.line02::before { 
width:40ch;
animation: typing calc(40 * 150ms) steps(39) calc(37 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line03::before { 
width:63ch; 
animation: typing calc(63 * 150ms) steps(62) calc(77 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line04::before { 
width:50ch; 
animation: typing calc(50 * 150ms) steps(49) calc(140 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
} 

.line05::before { 
width:18ch; 
animation: typing calc(18 * 150ms) steps(17) calc(190 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line06::before { 
width:109ch; 
animation: typing calc(109 * 150ms) steps(108) calc(208 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line07::before { 
width:111ch; 
animation: typing calc(111 * 150ms) steps(110) calc(317 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line08::before { 
width:111ch; 
animation: typing calc(111 * 150ms) steps(110) calc(428 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line09::before { 
width:111ch; 
animation: typing calc(111 * 150ms) steps(110) calc(539 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line10::before { 
width:111ch; 
animation: typing calc(111 * 150ms) steps(110) calc(650 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line11::before { 
width:111ch; 
animation: typing calc(111 * 150ms) steps(110) calc(761 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line12::before { 
width:106ch; 
animation: typing calc(106 * 150ms) steps(105) calc(872 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line13::before { 
width:37ch; 
animation: typing calc(37 * 150ms) steps(36) calc(978 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line14::before { 
width:41ch; 
animation: typing calc(41 * 150ms) steps(40) calc(1015 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

.line15::before { 
width:19ch; 
animation: typing calc(19 * 150ms) steps(18) calc(1056 * 150ms) 1 both,
           blinking 150ms linear infinite alternate;
}

@keyframes typing {
from {max-width:calc(100% + 1ch);}
to {max-width: 0ch;}
}

@keyframes blinking {
  from {border-color:white;}
  to{ border-color:transparent;}
}