body {
  background-color: #f3f3f3;
  margin: 0 auto 0 auto;
}

@media only screen and (max-width: 500px) {
  body {
    width: 95%;
  }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
  body {
    width: 500px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    width: 500px;
    margin-top: 100px;
  }
}

.margin-bot {
  margin-bottom: 20px;
}

.center {
  text-align: center;
}

.desc {
  margin: 10px;
}

.rows {
  display: flex;
  flex-direction: column;
}

.blog-row {
  margin: 5px;
}

.blog,
.github {
  padding: 10px;
  flex-grow: 1;
  text-align: center;
}

.blog {
  background-color: rgb(225, 247, 190);
  margin-right: 5px;
}

.github {
  background-color: rgb(206, 230, 247);
  margin-left: 5px;
}

.row {
  padding: 10px;
  margin: 5px;
}

.row-2 {
  margin-bottom: 10px;
}

.columns {
  display: flex;
  flex-direction: row;
}

.space-evenly {
  justify-content: space-evenly;
}

.space-between {
  justify-content: space-between;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.blog,
.github,
.rust,
.haskell,
.rocq {
  border-radius: 10px;
}

.rust {
  background-color: rgb(255, 234, 190);
}

.haskell {
  background-color: rgb(231, 216, 255);
}

.rocq {
  background-color: rgb(255, 210, 210);
}

.gray {
  color: rgb(80, 80, 80);
}

.item {
  margin: 5px 0;
}

.bold {
  font-weight: bold;
}

.emph {
  font-style: italic;
}

.tt {
  font-family: monospace;
  font-size: large;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 88);
}

summary {
  list-style: none;
  &::after {
    content: "…";
    margin: 0 10px;
    padding: 0 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
  }
  [open] &::after {
    background-color: inherit;
  }
}

details > div {
  margin: 10px 20px;
}