body {
  margin: 0;
  font-family: monospace;
  background: #111;
  color: #ddd;
}

.section {
  margin-top: 25px;
  padding: 10px 0;
  border-top: 1px solid #333;
}

/* WHOLE APP LAYOUT */
.wrapper {
  display: flex;
  height: 100vh;
}

/* LEFT NAV */
.sidebar {
  width: 220px;
  background: #1a1a1a;
  padding: 10px;
  overflow-y: auto;
}

/* MAIN CONTENT */
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #141414;
}

/* LINKS */
a {
  color: #66aaff;
  text-decoration: none;
}

a:hover {
  color: white;
}

/* ONLY sidebar links become blocks */
.sidebar a {
  display: block;
  padding: 4px 0;
}

/* HEADERS */
h1 {
  color: #FCDA00;
}

.category {
  margin-top: 40px;
  padding: 10px 0;
}

.category h2 {
  display: flex;
  align-items: flex-end;

  margin: 0;
  padding-bottom: 8px;

  color: #FCDA00;

  border-bottom: 2px solid #FCDA00;

  cursor: pointer;
  user-select: none;
}

.category .texture {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;

  vertical-align: middle;

  margin-right: 6px;

  flex-shrink: 0;
}

.section .texture {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;

  vertical-align: middle;

  margin-right: 6px;

  flex-shrink: 0;
}

.category-content {
  display: block;
}

.category.collapsed .category-content {
  display: none;
}

.section {
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #333;
  margin-left: 10px; /* slight indent under category */
}

.warning-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-weight: bold;

  color: #F76C6C;

  text-shadow: 1px 1px rgba(255,255,255,0.3);

  padding: 10px 15px;

  background: rgba(247,108,108,0.08);

  border-bottom: 1px solid #5a2a2a;
}

.warning-banner button {
  background: none;
  border: none;

  color: #F76C6C;

  font-size: 16px;
  cursor: pointer;
}

.warning-banner button:hover {
  color: white;
}

/* le crafting recipes >:) */
/* (mostly stolen from https://computercraft.info/wiki) */
/* =========================
   CRAFTING
========================= */

.crafting-table {
  position: relative;
  width: 256px;
  height: 132px;

  flex: 0 0 auto; /* prevents flex scaling issues */

  image-rendering: pixelated;
}

/* main recipe container */
.crafting-table {
  position: relative;

  width: 256px;
  height: 132px;

  border-radius: 16px;
  overflow: hidden;
  outline: 2px solid red;
}

/* crafting table GUI background */
.crafting-bg {
  width: 100%;
  height: 100%;

  display: block;

  image-rendering: pixelated;
}

/* 3x3 crafting grid */
.crafting-table-grid {
  position: absolute;
  top: 14px;
  left: 14px;

  display: grid;

  grid-template-columns: repeat(3, 32px);
  grid-template-rows: repeat(3, 32px);

  gap: 4px;
}

/* result item position */
.crafting-table-result {
  position: absolute;
  top: 50px;
  left: 202px;
}


.crafting-table-grid > div {
  outline: 1px solid rgba(255,255,255,0.2);
}
/* ingredient/result wrapper */
.item-slot {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

/* actual item image */
.item-texture {
  width: 32px;
  height: 32px;

  display: block;

  image-rendering: pixelated;
}

/* utility */
.pixelated {
  image-rendering: pixelated;
}