/* Custom variables */
:root {
  --steps: 77; /* Char count */
  --background: #fbf1c7;
  --color: #3c3836;
}

body {
  background: var(--background);
  color: var(--color);
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 30px;
  /* display: grid; */
  /* place-content: center; */
  /* margin: 0 auto; */
  padding: 10px;
  /* background-color: #fbf1c7; */
}

h1 {
  line-height: normal;
}

h1.typing {
  max-width: none;
  display: grid;
  place-items: center;
  /* Text style */
  /* min-height: 10vh; */
  font-family: 'Inconsolata', Consolas, monospace;
  font-size: 25px;
  color: #3c3836;
  /* Cursor & typing styles */
  position: relative;
  &::after {
    content: "|";
    position: absolute;
    right: 0;
    width: 100%;
    color: white;
    background: var(--background);
    animation:
      typing 0.8s steps(var(--steps)) forwards,
      caret 1s infinite;
  }
}

a {
  text-decoration: none;
  color: #268bd2;
  overflow-wrap: break-word;
  word-wrap: break-word;
  }

a:visited {
  color: #2aa198;
  }

a:hover {
  text-decoration: underline;
  }

a.no-link {
  color: var(--color);
  }

a.no-link:visited {
  color: var(--color);
  }

/* ------------------------- */
/* paragraph separation line */
/* ------------------------- */
hr.mypar {
  width: 33%;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  }

/* Typing animation */
@keyframes typing {
  /* from { width: 0 } */
  to { width: 0 }
  /* to { width: 100% } */
  }

/* Blinking animation */
@keyframes caret {
  0% { color: transparent }
  100% { color: transparent }
  }



/* /1* ---------------- *1/ */
/* /1* typing animation *1/ */
/* /1* ---------------- *1/ */
/* /1* $chWidth: 1.49em; *1/ */
/* $chWidth: 0.49em; */
/* $chCount: 9; */
/* $typeDuration: 180ms * $chCount; */
/* $color: #3c3836; */
/* $bg: #fbf1c7; */
/* $cursor: scale-color($color, $lightness: -60%); */

/* h1{ */
/*   text-align: center; */
/*   } */

/* .type-animation{ */
/*   /1* needed to keep expected alignment *1/ */
/*   display: inline-flex; */
/*   /1* start out by hiding via width and overflow *1/ */
/*   width: 0; */
/*   overflow: hidden; */
/*   /1* leave room for cursor *1/ */
/*   padding-right: 0.08em; */
/*   position: relative; */

/*   &:after{ */
/*     content: ""; */
/*     background: $bg; */
/*     position: absolute; */
/*     right: 0; */
/*     top: -0.05em; */
/*     bottom: -0.05em; */
/*     width: 0.08em; */
/*     border-right: 2px solid transparent; */
/*     } */

/*   &.animating{ */
/*     animation: type $typeDuration; */
/*     /1* stick to last frame *1/ */
/*     animation-fill-mode: forwards; */
/*     animation-delay: 1s; */

/*     &:after{ */
/*       $cursorLoopCount: ((($chCount + 1) * 180)/320) + 3; */
/*       animation: cursor 320ms $cursorLoopCount ease-in-out; */
/*       } */
/*     } */
/*   } */

/* @keyframes cursor{ */
/*   0%, */
/*   100%{ */
/*     border-color: $bg; */
/*     } */
/*   50%{ */
/*     border-color: $cursor; */
/*     } */
/*   100%{ */
/*     width: 0; */
/*     } */
/*   } */

/* $frameSize: 100/ $chCount; */
/* @keyframes type{ */
/*   @for $ch from 1 to $chCount { */
/*     $frame: $ch * $frameSize; */
/*     #{$frame}% { */
/*       width: $ch * $chWidth; */
/*       } */
/*     } */
/*     100%{ */
/*     width: ($chCount - 1)* $chWidth; */
/*     padding-right: 0; */
/*     } */
/*   } */