.flex h3, p.inside {
    margin: 10px;
  }
  .flex h3 y {
    opacity:0.5;
    font-size:0.7rem;
    vertical-align: middle;
    filter:brightness(0.6);
  }
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content:center;
}
.flex.fourhundred {
  max-width: 400px;
}
  .flex > div {
    flex: 0 1 400px;
    height:fit-content;
  }
  .lone {
    justify-self:center;
    max-width:400px;
    width:100%;
  }
  h1, h2, h3, h4, h5 {
  border:2px dotted black;
  padding:5px;
  box-sizing:border-box;
  }
  h2.imp {
    font-weight:bold;
    display:flex;
    gap:5px;
    justify-content: space-between;
  }
  h2.imp a {
    opacity:0.7;
  }
  h1.first {
    padding:10px;
    text-align:center;
    border:2px dotted black;
    margin-bottom:-20px;
  }
  a {
    color:#5555aa;
    padding:2px;
    text-decoration:none;
  }
  a:hover {
    outline: 1px dotted #5555aa;
  }
  .content, .addinfo {
    padding:10px;
    width:100%;
    margin: 0 auto;
    box-sizing:border-box;
    justify-self:center;
    max-width:700px;
  }
  .addinfo {
    margin-top:10px;
    margin-bottom:-30px;
  }
  .addinfo a {
    opacity:0.7;
  }
  .content.unres {
    max-width:none;
    width:100%;
  }
  body {
    margin:10px 5px;
    min-height:100vh;
    font-family:'karla';
  }
  html {
    scrollbar-width:none;
    scroll-behavior: smooth;
  }
  @font-face {
  font-family: karla;
  src: url(/webmastry/font/Karla-VariableFont_wght.woff2);
}
::selection {
  background:#5555aa;
  color:white;
}
main {
  max-width: 1700px;
    width: 100%;
    justify-self: center;
    border: 2px dotted;
    border-top: 0;
    border-bottom: 0;
    margin: -10px;
    padding: 10px;
}
.categorylist {
  display:flex;
  margin:5px 0;
  gap:5px;
  justify-content:center;
}
.categorylist a {
  background:#5555aa;
  color:white;
  padding:10px;
}
.categorylist a:hover {
  text-decoration:underline;
}