@font-face {
  font-family: "coda";
  src: url("/fonts/CMMCodaKMCustom-Proportional.woff");
}

@font-face {
  font-family: "coda";
  src: url("/fonts/CMMCodaKMCustom-ProportionalItalic.woff");
  font-style: italic;
}

@font-face {
  font-family: "codamono";
  src: url("/fonts/CMMCodaKMCustom-MonoSans.woff");
  font-style: italic;
}

@font-face {
  font-family: "ibm";
  src: url("/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf");
}

body {
  font-family: "ibm", sans-serif;
  font-size: 16px;
}

body,
html {
  margin: 0;
  padding: 0;
}

#title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.codeblock {
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#container {
  margin-top: 100px;
  height: 100%;
  padding: 20px;
}

#container,
#container > img {
  max-width: 700px;
  width: 100%;
}

.rewrites {
  /* border-collapse: collapse; */
  max-width: 100vw;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  margin-top: 20px;
}

@media (width > 1000px) {
  .rewrites {
    margin-left: -15%;
    width: 130%;
  }
}

i {
  font-size: 12px;
  color: #666;
}

.rewrites th,
.rewrites td {
  padding: 10px;
  text-align: left;
}

p,
b {
  margin: 5px 0;
  line-height: 1.5;
}

b {
  margin-top: 20px;
}

ul {
  margin-top: 0;
  margin-left: 0px;
  margin-bottom: 20px;
}
ul > li {
  margin-bottom: 5px;
  padding-right: 30px;
}

#outer {
  display: flex;
  justify-content: center;
  width: 100%;
}

code {
  font-family: monospace;
}