body,
html {
  margin: 0;
  padding: 0;
  background-color: rgb(182, 221, 255);
  max-width: 940px;
  margin: auto;
}
* {
  margin: 0;
  padding: 0;
}
p {
  margin: 10px 0;
}
hr {
  margin: 5px 50px;
  background-color: rgb(152, 86, 190);
  box-shadow: inset 1px 1px #ffffff71, inset -1px -1px #8932a359;
  border: 0;
  height: 2px;
}

.flex {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.fi {
  flex-grow: 1;
  width: 35%;
  min-width: 250px;
}
.window {
  background: black;
  position: relative;
  padding: 2px;
  border-image-slice: 13;
  border-image-width: 13px 13px 13px 13px;
  border-image-outset: 10px;
  border-image-repeat: repeat repeat;
  border-image-source: url("/lace.png");
  border-style: solid;
  margin: 20px;
  display: flex;
  align-items: stretch;
}

.cont {
  background: #f0d5ff;
  border: 1px solid #3f0c7a;
  border-radius: 4px;
  box-shadow: inset -1px -1px #ffffff71, inset 1px 1px #8932a359;
  overflow: auto;
  text-align: center;
  padding: 10px;
  width: 100%;
}

.member {
  padding: 8px;
  border: 1px solid #3f0c7a;
  box-shadow: inset 1px 1px #ffffff71, inset -1px -1px #8932a359;
  border-radius: 4px;
  margin-bottom: 5px;
  display: flex;
  gap: 6px;
}
.member:last-of-type {
  margin-bottom: 0;
}

.slug,
.sitename,
.date,
.tags {
  box-shadow: inset -1px -1px #ffffff71, inset 1px 1px #8932a359;
  border: 1px solid #3f0c7a;
  border-radius: 2px;
  padding: 3px 5px;
}
.slug {
  width: 50px;
}
.date {
  width: 100px;
}

.sitename,
.tags {
  flex-grow: 1;
}
ul {
  text-align: left;
  margin: 0 40px;
}