body {
  background-color: rgb(250, 248, 245);
  color: black;
}
h1 {
  font-family: 'Milonga', serif;
  color: rgb(253, 245, 230);
  padding: 0 0 0 70px;
  margin: 0;
  z-index: 99;
}
.top-bar img {
  width: 20vw;
  max-width: 150px;
  left: -20px;
  position: absolute;
  filter: grayscale(30%);
  z-index: 0;
}

h2 {
  font-family: 'Milonga', serif;
  color: rgb(176, 182, 194);
  text-align: right;
}
.reset {
  font-family: 'EB Garamond', serif;
  text-transform: upper;
  border-top-left-radius:100%;
  border-top-right-radius:20%;
  padding: 1em 2em 0 2em;
  background: rgb(250, 248, 245);
  text-transform: uppercase;
}
.about {
  font-family: 'EB Garamond', serif;
  text-transform: upper;
  background: none;
  text-transform: uppercase;
}
.container {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  margin: 5vh 10vw;
}
.top-bar {
  background: rgb(176, 182, 194);
  height: 12vh;
  border-bottom-left-radius:0;
  border-bottom-right-radius:100%;
}

.top-bar-title {
  font-size: 20px;
  margin-left: 15.5%;
}
a {
  color: black;
  background: rgb(250, 248, 245);
  text-decoration: none;
  background-image: linear-gradient(
    rgb(250, 248, 245) 85%,
   gray 86%,
   oldlace 90%
  );

}
a:hover {
  color: black;
}
a.delay {
  animation: underlinedelay 10s linear;
}
svg {
  position: absolute;
  z-index: 10;
}
line {
  stroke: black;
  stroke-width: 2px;
}
polyline {
  fill: none;
  stroke: rgba(178,34,34, .5);
  stroke-width: 2px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 1s linear forwards;

}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.scribble svg {
  height: 1rem;
  margin: 2rem 0 1rem 0;
}

.scribble svg line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
/*
fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, fade-exit-done, fade-appear, and fade-appear-active
*/

.mapping-exit-active {
  animation: fadeout 1s ease-in;
}
.mapping-exit {
  opacity: 0;
}
.mapping-enter-active {
  display: none;
  opacity: 0;
}
.mapping-enter-done {
  display: inline;
  animation: fadein 1s ease-out, colorchange 20s ease-out;

}

@keyframes underlinedelay {
  from {
    background-image: linear-gradient(
     rgba(250, 248, 245, 0) 85%,
     rgba(128, 125, 125, 0) 86%,
     rgba(253, 245, 230, 0) 90%
    );
  }
  to {
    background-image: linear-gradient(
      rgba(250, 248, 245, 1) 85%,
      rgba(128, 125, 125, 1) 86%,
      rgba(253, 245, 230, 1) 90%
    );}
  
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes colorchange {
  from { color: rgb(174, 44, 44); }
  to { color: black }
}

#about-toggle {
  visibility: hidden;
}
#about-toggle.open {
  visibility: visible;
}

.about-modal {
  display: none;
  position: relative;
  top: 60px;
  border: 1px solid gainsboro;
  font-family: "EB Garamond", serif;
  left: 1rem;
  width: 15rem;
  padding: 1rem;
  line-height: 1.5em;
  z-index: 99;
  background: snow;
}
.about-modal a {
  font-family: inherit;
  font-size: inherit;
  background: snow;
  text-decoration: underline;
 }
.about-modal .close {
  font-family: 'EB Garamond', sans-serif;
  text-align: right;
}
.about-modal .close a {
    border-bottom: none;
}
.about-modal.open {
  display: block;
}

  @media (max-width: 599px) {
    .top-bar img {
      display: none;
    }
    .reset {
      background: none;
      padding: 0 5vw 0 0;
    }
    .top-bar {
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;
    }
    h1 {
      padding: 0 0 0 5vw;
    }
    .about-modal {
      display: none;
      position: absolute;
      top: 0px;
    }
    .container {
      margin: 5vh 5vw;

    }
  }