@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@500&display=swap');

body {
  background: #eee;
  padding-top:35px;
  width:600px;
  margin:auto;
  font-size: 20px;
}

h1.title {
  font-family: sans-serif;
  font-family: "Fira Sans";
  font-weight: normal;
  font-size:40px;
  padding-bottom: 2px;
  margin-bottom: 35px;
  position: relative;
  left:-38px;
  border-bottom: 10px solid #6fe2be;
  padding-left:20px;
  padding-right:20px;
  display: inline-block;
  text-align:center;
}
.main-view {
  background: white;
  padding:60px;
  border: 2px solid black;
  font-size: 30px;
  font-family: "Fira Mono";
  outline: none;
}

.evaluated, .parsed {
  min-height: 50px;
  display: block;
}

.parsed:before {
  content: "▸";
  padding-left: 5px;
  padding-right: 15px;
}

.result {
  margin-top: 35px;
}

.evaluated:before {
  content: "→";
  padding-left: 5px;
  padding-right: 15px;
}

.malformed-token, .parse-error {
  outline: 2px dotted red;
}

.cursor:not(.hole)  {
  display: inline-block;
  width:0px;
  height:1em;
  outline: 1px solid #d06dff;
  position: relative;
  top:5px;
}

.hole {
  font-size:0;
  position:relative;
  top: 4px;
}

/* .hole:after::-moz-selection { background-color: red} */
*::selection { background-color: black; color: white }

.hole.cursor:after,
.hole:after {
  content: "";
  display: inline-block;
  font-size:30px;
  width: 18px;
  height: 1em;
  outline: 2px solid black;
}
.hole.cursor:after {
  outline: 2px solid #d06dff;
  background: #f9edff;
}

.op {
  padding-left:10px;
  padding-right:10px;
}

a, a:visited {
  color: #6fe2be;
  text-decoration: none;

}