@font-face {
  font-family: '0xProto';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("fonts/0xProto/0xProto-Regular.woff2")format('woff2');
}

@font-face {
  font-family: '0xProto';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("fonts/0xProto/0xProto-Bold.woff2")format('woff2');
}

@font-face {
  font-family: '0xProto';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("fonts/0xProto/0xProto-Italic.woff2")format('woff2');
}

:root {
  --background: #241f31;
  --foreground: #eceae5;
  --accent: #f66151;
  --off-foreground: #c1c1c1;
}

.embed-container {
  width: var(--container-width);
  height: calc(0.62 * var(--container-width));
}

body {
	font-family: '0xProto';
  background-repeat: repeat;
  background-image: url("/img/grid_tile.png");
  background-position: center;
  background-size: 8rem;
}

.container.center {
  background-color: var(--background);
  box-shadow: 10px 0px 10px black, -10px 0px 10px black;
}

.logo {
	font-size: x-large;
  font-weight: bold;
	padding: 5;
  width: 23rem;
  height: 8rem;
}

.logoImg {
	margin: 0;
	padding: 0;
	border: 0;

  aspect-ratio: 1/1;
  width: 8rem;
}

.header__logo a {
  max-width: 75%;
  z-index: 5;
}
.header__logo::after{
  z-index: 1;
}

.share-link {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  padding: 0.5em 1em;
  border: 2px;
  border-color: var(--accent);
  border-style: solid;
  text-decoration: none;
  transition: background 0.2s;
}

a.big-text {
  font-size: 19px;
}

.share-link:hover {
  border-style: dashed;
}

.breadcrumbs {
  list-style: none;
  margin: 0;
  padding: 2vw;
}


.breadcrumbs li {
  display: inline;
}

.post-date,
.post-author,
.post-reading-time {
  color: var(--off-foreground);
}


a.share-copy { color: var(--off-foreground); }
a.share-bluesky { color: #0077FF; }
a.share-mastodon { color: #6364FF; }
a.share-x-twitter { color: var(--off-foreground); }
a.share-ko-fi { color: #ff2e2e; }
a.share-itch-io { color: #c64b47; }