:root {
    --tn-red: #f7768e;
    --tn-orange: #ff9e64;
    --tn-yellow: #e0af68;
    --tn-white: #cfc9c2;
    --tn-green: #9ece6a;
    --tn-teal: #73dacb;
    --tn-cyan-light: #b4f9f8;
    --tn-cyan: #2ac3de;
    --tn-blue-light: #7dcfff;
    --tn-blue: #7aa2f7;
    --tn-purple: #bb9af7;
    --tn-lavender: #c0caf5;
    --tn-lavender-grey: #a9b1d6;
    --tn-gray-blue: #9aa5ce;
    --tn-dark-blue-grey: #565f89;
    --tn-darker-grey: 	#414868;
    --tn-bg: 	#1a1b26;
}

@font-face {
  font-family: DepartureMono; 
  src: url('assets/DepartureMono-1.500/DepartureMonoNerdFont-Regular.otf'); 
}

body {
  background: var(--tn-bg);
  color: var(--tn-lavender);
  font-family: DepartureMono;
  margin: 0;
  padding: 30px;
}

body::selection {
  background-color: var(--tn-orange);
  color: var(--tn-darker-grey);
}


footer {
  text-align: center;
  font-size: x-small;
  color: var(--tn-red);
  margin-top: 50px;
}

a,
.cfg,
.codewars,
.github,
.linkedin {
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  background-image: linear-gradient(var(--link-color), var(--link-color));
  transition: background-size 0.5s ease-in-out;
}

a {
  color: var(--tn-blue);
  --link-color: var(--tn-blue);
}

a:hover {
    color: var(--tn-yellow);
}

.cfg {
  --link-color: #E35795;
}

.codewars {
  --link-color: var(--tn-red);
}

.github {
  --link-color: #0FBF3E;
}

.linkedin {
  --link-color: #0077B5;
}

a:hover,
.cfg:hover,
.codewars:hover,
.github:hover,
.linkedin:hover {
  background-size: 100% 2px;
}

.prompt {    
  font-size: 18px;
  line-height: 1.6;
  border-radius: 6px;
  white-space: pre;
  }

.path     { color: var(--tn-blue-light); }   
.plain    { color: var(--tn-lavender); } 
.branch   { color: var(--tn-purple); }   
.status   { color: var(--tn-red); } 
.crate    { color: var(--tn-orange);}
.node-icon { color: var(--tn-green); }   
.version   { color: var(--tn-green); }   
.starship    { color: var(--tn-green); }   

.output {
  width: 100%;
  max-width: 95ch;
  visibility: hidden; 
  animation: appear 0s ease 2s forwards;
}

.type {
  display: inline-flex;
  color: var(--tn-lavender);
  width: 15ch;
  animation: typing 1.5s steps(10), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 10px solid var(--tn-dark-blue-grey);
}

ul {
  list-style-type: none;
  padding: 0px;
}

@keyframes appear {
  0% {visibility: hidden;}
  100% { visibility: visible;}
}

@keyframes blink {
  50% { border-color: transparent;}
}

@keyframes typing {
  0% { width: 0; }
  100% { width: 15ch; }
}

@media (min-width:600px) {
  body {
    font-size: 1.25rem;
  }
}