@font-face {
  font-family: "Hack";
  src: url("assets/fonts/hack-regular.woff2?sha=3114f1256") format("woff2"),
    url("assets/fonts/hack-regular.woff?sha=3114f1256") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Hack";
  src: url("assets/fonts/hack-bold.woff2?sha=3114f1256") format("woff2"),
    url("assets/fonts/hack-bold.woff?sha=3114f1256") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Hack";
  src: url("assets/fonts/hack-italic.woff2?sha=3114f1256") format("woff2"),
    url("assets/fonts/hack-italic.woff?sha=3114f1256") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Hack";
  src: url("assets/fonts/hack-bolditalic.woff2?sha=3114f1256") format("woff2"),
    url("assets/fonts/hack-bolditalic.woff?sha=3114f1256") format("woff");
  font-weight: 700;
  font-style: italic;
}

body {
  font-family: "hack", Verdana, sans-serif;
  background-color: rgba(0, 0, 0, 0);
  color: #111;
  padding: 0;
  margin: 0;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
  font-size: 14px;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
}

.bg-img {
  background-image: url("./assets/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;

  inset: 0;
  z-index: -1024;

  filter: saturate(0.5) contrast(0.9) opacity(0.1);

  position: fixed;

  pointer-events: none;
}

.lavrent-header-container {
  display: flex;
  align-items: end;
  width: calc(min(10rem, 100vw));
  transform: rotate(2deg);
  transform-origin: center center;

  display: flex;
  justify-content: center;
  margin: 0 auto 0 auto;
}
.lavrent-header-container > .lavrent-header {
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: bolder;
}
.note {
  font-size: small;
  color: #555;
}

@keyframes bobber {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.75rem);
  }
  100% {
    transform: translateY(0);
  }
}

a {
  cursor: crosshair;
  padding: 1px;
  color: #0090e0;
  text-decoration: wavy;
}
a:hover {
  border: 1px dashed #222;
  padding: 0;
  background-color: #ddd;
}
a:not(.link-disabled):hover {
  color: #222;
}
a:not(.link-disabled):visited {
  color: #0090e0;
}
a:not(.link-disabled):active {
  color: #f4f4f4;
  background-color: #ccc;
}
a.link-disabled {
  color: #777;
  cursor: not-allowed;
}
a.link-disabled:hover {
  text-decoration: line-through;
}

.card {
  border: 1px solid #111;
  background: #eee;
  padding: 1rem;
}

.box {
  outline: 2px dashed #111;
  outline-offset: -4px;
  background: rgba(245, 245, 245, 0.75);

  padding: 1rem;
}
.box-body {
  overflow: hidden;
}
.box-body > hr {
  margin: 1rem 0;
  clear: both;
  overflow: hidden;
}
.box-footer {
  overflow: hidden;
}
.box-footer a {
  margin: 0 0.5rem;
}
.pfp-img {
  width: 100px;
  height: 100px;
  margin: 0 1rem 1rem 0;
  float: left;
  border: 2px inset #d0d0d0;
}

#credit {
  font-size: xx-small;
  padding: 0.1rem;
  width: fit-content;
  text-align: center;
  border: 1px solid #111;
  background: #eee;
  color: #555;
  margin-top: auto;
  margin-left: auto;
  z-index: -1;

  /* writing-mode: vertical-lr;
  rotate: 180deg; */
}

/* @media only screen and (max-width: 850px) {
  #credit {
    display: none;
  }
} */

/* tipson */
.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#tipson-peeking {
  width: 60px;
  position: absolute;
  left: 0;
  bottom: -120px;
  padding-bottom: 50px;

  user-select: none;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#tipson-peeking:hover {
  transform: translateY(-70px);
}

/* tables */
table {
  border-collapse: separate;
  width: 100%;
}
td,
th {
  background: url("/assets/dither.png") repeat;
  text-align: left;
  padding: 4px;
  vertical-align: top;
}
th {
  border-bottom: 1px dotted #808080;
}

/* lists */
ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}
li {
  width: fit-content;
}
li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
li::before {
  content: "- ";
}