/* Main */
body
{
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #1E1E1E;
}
pre
{
  color: #d7d7d7;
  font-size:      12px;
  font-family: "Courier New";
}
div, span
{
  color: #d7d7d7;
  font-size:      16px;
  font-family: "Times New Roman", "Georgia", serif;
}
.n
{
  color: #d7d7d7;
  font-size:      16px;
  font-family: "Times New Roman", "Georgia", serif;
  font-weight: bold;
}
.light
{
  color: #919191;
  font-family: "Times New Roman", "Georgia", serif;
  display:inline;
}
.large
{
  font-family: "Times New Roman", "Georgia", serif;
  font-size:      20px;
}
.small
{
  color: #919191;
  font-family: "Times New Roman", "Georgia", serif;
  font-size:      12px;
}
.bio
{
  color: #919191;
  font-family: "Times New Roman", "Georgia", serif;
  font-size:      14px;
}
.container
{
    flex: 1 1 auto;  /* grow vertically */
    justify-content: center;
    align-items: center;
}
#footer
{
    bottom: 0;
    color: #707070;
    left: 0;
    position: relative;
    width:100%;
}

hr
{
  margin-top: 10px;
  margin-bottom: 10px;
}

html
{
  position: relative;
  min-height: 100%;
}

body
{
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* Hide scrollbars */
}

/* Links */
a:link {
  color: #dbbcdb;
  background-color: transparent;
}

a:visited {
  color: #dbbcdb;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #ba7aba;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #dbbcdb;
  background-color: transparent;
  text-decoration: underline;
}

/* Animations */
.s1::before {
    content: "-";
    animation: a1 infinite 5s;
    padding-left: 10px;
    font-family: "Courier New";
}

@keyframes a1 {
    0% {
      content: "-";
    }
    100% {
      content: "*";
    }
}

.s2::before {
    content: "-";
    animation: a2 infinite 3s;
    padding-left: 10px;
    font-family: "Courier New";
}

@keyframes a2 {
    0% {
      content: "*";
    }
    100% {
      content: "-";
    }
}

.s3::before {
    content: ".";
    animation: a3 infinite 0.9s ease-in;
}

@keyframes a3 {
    0% {
      content: " ";
    }
    10% {
      content: ".";
    }
    20% {
      content: " ";
    }
    30% {
      content: ".";
    }
    60%
    {
      content: ".";
    }
}