@font-face {
  font-family: "Noto Mono";
  src: url("fonts/NotoMono-Regular.ttf");
  }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 12pt;
}

#pig {
  width: 50pt;
  float: left;
}

h1 {
  font-size: 16pt;
  margin: 0;
  line-height: 16pt;
  position: relative;
  top: 10pt;
}

img {
  width: 100%;
}

#output {
  padding: 20px;
  text-align: justify;
}

.input {
  background: white;
}

.highlight {
  font-weight: bold;
  background: yellow;
}

.intro {
  width: 75%;
  margin: auto;
}

.permutation {
  background: #eee;
  width: fit-content;
  padding: 10pt;
  border-radius: 10pt;
  margin: auto;
  margin-bottom: 10pt;
  border: 1pt solid gray;
  box-shadow: 5px 5px 8px rgba(0,0,0,0.3);
}

.input {
  padding: 3pt;
  border: 1pt solid;
  border-radius: 3pt;
  height: 15pt;
  font-family: 'Noto Mono', 'Courier New', Courier, monospace;
}

.label {
  font-size: 14pt;
  padding: 3pt;
  border-bottom: 1pt solid;
  margin-bottom: 3pt;
}

/*.out-table {
  display: grid;
  grid-template-columns: 20% 20% auto;;
}*/

p {
  line-height: 1.5em
}

th {
  border-bottom: 1pt solid;
}

th, td {
  padding-right: 5pt; 
}



.console, pre {
  font-family: 'Noto Mono', 'Courier New', Courier, monospace;
  background: black;
  color: lightgreen;
  padding: 2pt;
  padding-left: 3pt;
  padding-right: 3pt; 
}
.error {
  color: orangered;
  padding: 20pt;
  margin: 5pt;
}
.z {
  font-weight: bold;
  color: white;
}

pre {
  padding: 10pt;
  border-radius: 10pt;
}

table {
  font-family: 'Noto Mono', 'Courier New', Courier, monospace;
}