:root {
  --text-color: #1c1c1c;
  --background-color: #fbfbfb;
  --red-display: flex;
  --orange-display: flex;
  --yellow-display: flex;
  --green-display: flex;
  --cyan-display: flex;
  --blue-display: flex;
  --purple-display: flex;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'General Sans', 'Helvetica', sans-serif;
  font-weight: 400;
  margin: 0;
  overflow-y: auto;
  min-height: 100%;
}
body > * {
}
main {
  background-color: var(--background-color);
  margin: 0 auto;
  max-width: 1280px;
  min-height: 100%;
  padding-top: var(--size-3);
}
section {
  margin: 0 auto;
  width: 75%;
}
footer {
  margin: 0 auto;
  color: rgba(28, 28, 28,0.4);
  margin-top: var(--size-6);
  margin-bottom: var(--size-6);
  width: 75%;
  max-width: 960px;
}
a {
  color: inherit;
  text-decoration: none;
}
footer a {
  color: rgba(8, 8, 128,0.5);
}
@media only screen and (max-width: 440px) {
  section {
    margin: 0 auto;
    width: 92.5%;
  }
  footer {
    margin-top: 0;
    font-size: var(--size-3);
    width: 92.5%;
  }
  hr {
    width: 90% !important;
  }
}

.draggable {
  touch-action: none;
  user-select: none;
  z-index: 10;
  position: relative;
}
.draggable.dragging {
  position: fixed; /* Apply this class when dragging */
  z-index: 1000; /* Ensure it's on top when dragging */
}

/* Saved Games Section  */
#saved-links-section {
  position: relative;
}
#saved-links-key {
  color: rgb(140, 140, 140);
  font-family: 'Iosevka Extended', monospace;
  text-align: right;
  position: absolute;
  left: calc(var(--size-10) * -3.35);
  width: calc(var(--size-10) * 3);
  padding-top: var(--size-3);
}
#saved-links-key h4 {
  font-size: var(--scale-fluid-1);
  font-weight: 300;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--size-1);
}
#saved-links h4 span {
  display: none;
  color: red;
  font-size: calc(var(--scale-1) * 0.5);
  margin-left: var(--size-1);
}
#savedGamesContainer {
  padding: 0;
  margin: 0;
  margin-top: var(--size-4);
  min-height: 100px;
}
#savedGamesContainer:empty {
  outline: 2px dotted lightgrey;
  background-image: url('dnd_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-bottom: var(--scale-3);
  /* min-height: 200px; */
  min-height: calc(var(--scale-9)*2);
}
#savedGamesContainer li {
  list-style-type: none;
  display: flex;
  padding-bottom: var(--size-1);
  padding-top: var(--size-1);

  font-size: var(--scale-4);
  letter-spacing: -1px;
}
#savedGamesContainer li img {
  height: var(--scale-4);
  margin-right: var(--size-2);
  align-self: center;
}
#savedGamesContainer li:hover {
  background: rgb(254, 254, 254);
}
#savedGamesContainer li:hover .deleteButton {
  opacity: 1;
}
.deleteButton {
  margin-left: auto;
  opacity: 0;
  cursor: pointer;
}
#saved-games-buttons {
  display: flex;
  justify-content: space-between;
}
#openLinksButton {
  font-family: 'General Sans', 'Helvetica', sans-serif;
  margin-top: var(--size-3);
  padding-bottom: var(--size-1);
  padding-left: var(--size-6);
  padding-right: var(--size-6);
  border: none;
  font-size: var(--scale-5);
  font-weight: 400;
  letter-spacing: -0.5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  align-self: end;
  color: var(--background-color);

  background: linear-gradient(
    180deg,
    #cbcdff 0%,
    rgba(39, 37, 161, 0.977717) 12.5%,
    rgba(70, 10, 199, 0.902299) 45%,
    #777cff 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(119, 124, 255, 0.1),
    0px 0px 0px 1px rgba(119, 124, 255, 0.1),
    inset 0px 1px 0px #2725a1,
    inset 0px 0px 0px 1px rgba(39, 37, 161, 0.5);
  border-radius: 42px;
}
#openLinksButton img {
  align-self: center;
  height: calc(var(--scale-6));
  margin-left: var(--size-3);
  margin-right: var(--size-3);
}
#edit-button {
  margin-top: var(--size-3);
  padding-left: var(--size-6);
  cursor: pointer;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  color: var(--background-color);
  align-self: end;
  height: calc(var(--scale-5));
  margin-left: var(--size-3);
  filter: invert(0.8);
}

hr {
  border: 1px solid rgb(214, 214, 214);
  max-width: 1280px;
  width: 75%;
  margin: 0 auto;
  margin-top: var(--size-8);
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01);
}

/* Category Gallery */
#category-section {
  position: relative;
  margin-top: var(--size-8);
  margin-bottom: var(--size-2);
}
#category-section-key {
  color: rgb(140, 140, 140);
  font-family: 'Fira Code', monospace;
  text-align: right;
  position: absolute;
  left: calc(var(--size-10) * -3.35);
  width: calc(var(--size-10) * 3);
  padding-top: var(--size-0);
}
#category-section-key h4 {
  font-weight: 300;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--size-1);
  cursor: pointer;
}
#category-section-key h4:hover span {
  display: block;
}
#category-section-key h4:hover .category-game-item {
  box-shadow: none;
}
#category-section-key h4 span {
  display: none;
  color: red;
  font-size: calc(var(--scale-1) * 0.5);
  margin-left: var(--size-1);
}

#category-section h1 {
  font-weight: 500;
  font-size: var(--scale-5);
  margin: 0;
  padding: 0;
  margin-right: var(--size-3);
  margin-top: var(--size-1);
  margin-bottom: var(--size-2);
}
#category-gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.category-game-item {
  font-size: var(--scale-5);
  font-weight: 400;
  letter-spacing: -0.5px;
  display: flex;
  align-content: center;
  border-radius: var(--radius-lg);
  margin-right: var(--size-3);
  margin-bottom: var(--size-3);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, #f7f7f7 0%, #ededed 91.18%) ;
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(32, 32, 32, 0.1),
    0px 0px 0px 1px rgba(32, 32, 32, 0.25),
    inset 0px 1px 0px #ffffff,
    inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important;
  border-radius: 20px;
}
.category-game-item img {
  pointer-events: none;
  
  margin-top: var(--size-2);
  margin-bottom: var(--size-2);
  margin-left: var(--size-1);
  height: var(--size-9);
  padding-left: var(--size-1);
  padding-right: var(--size-2);
  mix-blend-mode: color-burn;
}
.category-game-item a {
  margin-top: var(--size-2);
  margin-bottom: var(--size-2);
  margin-right: var(--size-3);
  line-height: var(--size-9);
}
/* 
USING DISPLAY NONE ON THE BUTTON AS A HACK TO PREVENT HAVING TO REWRITE CODE
*/
.category-game-item button {
  display:none;
  border: none;
  border-radius: 2px;
  opacity: 0;
  background-color: white;
}
.category-game-item:hover button {
  opacity: 0.5;
}

@media only screen and (max-width: 440px) {
  #category-section-key {
    display: none;
  }
  .category-game-item {
    animation: none;
    font-size: var(--scale-2);
    font-weight: 400;
    letter-spacing: -0.5px;

    display: flex;
    align-content: center;

    border-radius: var(--radius-xs);

    margin-right: var(--size-2);
    margin-bottom: var(--size-3);

    white-space: nowrap;
    overflow: hidden;

    background: linear-gradient(180deg, #f7f7f7 0%, #ededed 91.18%);
    box-shadow:
      0px 1px 2px rgba(0, 0, 0, 0.1),
      0px 4px 4px rgba(0, 0, 0, 0.08),
      0px 10px 6px rgba(0, 0, 0, 0.05),
      0px 17px 7px rgba(0, 0, 0, 0.01),
      0px 1px 0px rgba(32, 32, 32, 0.1),
      0px 0px 0px 1px rgba(32, 32, 32, 0.25),
      inset 0px 1px 0px #ffffff,
      inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px;
  }
  .category-game-item img {
    margin-top: var(--size-1);
    margin-bottom: var(--size-1);
    margin-left: var(--size-1);
    height: var(--size-5);
    padding-left: var(--size-1);
    padding-right: var(--size-1);
    mix-blend-mode: color-burn;
  }
  .category-game-item a {
    margin-top: var(--size-1);
    margin-right: var(--size-2);
    margin-bottom: var(--size-1);
    line-height: var(--size-5);
  }
  .category-game-item button {
    display: none;
  }
}

/* Search */
#search-form {
  margin-bottom: var(--scale-1);
}
#search-input {
  border: none;
  padding-left: var(--size-1);
  border-radius: 1px;
  color:rgba(28, 28, 28,0.6);
  box-shadow:
    0px 1px 0px rgba(32, 32, 32, 0.1),
    0px 0px 0px 1px rgba(32, 32, 32, 0.25),
    inset 0px 1px 0px #ffffff,
    inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important;
}
#search-button {
  display:none;
}

.red-category-button {
  display: var(--red-display);
  background: linear-gradient(
    180deg,
    rgba(255, 59, 48, 0.35) 0%,
    rgba(255, 16, 2, 0.35) 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(255, 16, 2, 0.1),
    0px 0px 0px 1px rgba(255, 16, 2, 0.25),
    inset 0px 1px 0px #ff3b30,
    inset 0px 0px 0px 1px rgba(255, 59, 48, 0.5);
}
.orange-category-button {
  display: var(--orange-display);
  background: linear-gradient(
    180deg,
    rgba(255, 149, 0, 0.35) 0%,
    rgba(225, 132, 0, 0.35) 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(225, 132, 0, 0.1),
    0px 0px 0px 1px rgba(225, 132, 0, 0.25),
    inset 0px 1px 0px #ff9500,
    inset 0px 0px 0px 1px rgba(255, 149, 0, 0.5);
}
.yellow-category-button {
  display: var(--yellow-display);
  background: linear-gradient(
    180deg,
    rgba(255, 204, 0, 0.35) 0%,
    rgba(202, 162, 0, 0.35) 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(202, 161, 0, 0.1),
    0px 0px 0px 1px rgba(202, 161, 0, 0.25),
    inset 0px 1px 0px #ffcc00,
    inset 0px 0px 0px 1px rgba(255, 204, 0, 0.5);
}
.green-category-button {
  display: var(--green-display);
  background: linear-gradient(
    180deg,
    rgba(52, 199, 89, 0.35) 0%,
    rgba(41, 146, 67, 0.35) 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(41, 146, 67, 0.1),
    0px 0px 0px 1px rgba(41, 146, 67, 0.25),
    inset 0px 1px 0px #34c759,
    inset 0px 0px 0px 1px rgba(52, 199, 89, 0.780392);
}
.cyan-category-button {
  display: var(--cyan-display);
  background: linear-gradient(
    180deg,
    rgba(0, 199, 190, 0.35) 0%,
    rgba(6, 156, 149, 0.35) 65.5%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(6, 156, 149, 0.1),
    0px 0px 0px 1px rgba(6, 156, 149, 0.25),
    inset 0px 1px 0px #00c7be,
    inset 0px 0px 0px 1px rgba(0, 199, 190, 0.5);
}
.blue-category-button {
  display: var(--blue-display);
  background: linear-gradient(
    180deg,
    rgba(0, 122, 255, 0.35) 0%,
    rgba(8, 84, 166, 0.35) 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(8, 84, 166, 0.1),
    0px 0px 0px 1px rgba(8, 84, 166, 0.25),
    inset 0px 1px 0px #007aff,
    inset 0px 0px 0px 1px rgba(0, 122, 255, 0.5);
}
.purple-category-button {
  display: var(--purple-display);
  background: linear-gradient(
    180deg,
    rgba(175, 82, 222, 0.35) 0%,
    rgba(128, 45, 170, 0.35) 100%
  );
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 4px 4px rgba(0, 0, 0, 0.08),
    0px 10px 6px rgba(0, 0, 0, 0.05),
    0px 17px 7px rgba(0, 0, 0, 0.01),
    0px 1px 0px rgba(128, 45, 170, 0.1),
    0px 0px 0px 1px rgba(128, 45, 170, 0.25),
    inset 0px 1px 0px #af52de,
    inset 0px 0px 0px 1px rgba(175, 82, 222, 0.5);
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}