* {
  color: white;
  font-family: "Oxygen Mono", monospace;
}

html {
  background-color: #313031;
}

.grip {
  background-repeat: repeat;
  background-size: 5px 40px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAIAAABrHEPqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABaSURBVChT7VExEoAwCAs40I+o//+ctF4rBgc9d0cTCOQ4psg6LwCsFDMTEb0xJVSF5KCyKVmiwR8gIvRaHvz+jc+9IInAMQaLYWRC3Gqrbd8zHZ577755dT8BSZgdqmTeWwoAAAAASUVORK5CYII=");
}

.button {
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* shadow-md */
  background: #FFFFFF11;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0);
  border-right: 1px solid rgba(255, 255, 255, 0);

  padding: 1.2em;
  color: white;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 80ms;
}

.button.icon {
  width: 36px;
  height: 36px;
}

.button.icon-big {
  width: 72px;
  height: 72px;
}

.button:hover {
  text-decoration: none;
  filter: drop-shadow(0 0 8px white);
  transform: scaleY(1.1);
}

.button:active,
.button.pushed {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 8px white);
  outline: 0;
}

.button:active {
  transform: scale(0.95) rotateX(30deg) translateY(5px);
}

.button.disabled,
.button.disabled:hover,
.button.disabled:active {
  pointer-events: none;
  cursor: default;
  color: #818181;
}

.button.disabled>* {
  color: white;
  opacity: 0.25;
}

.glass {
  backdrop-filter: blur(4px);
}

.card {
  backdrop-filter: blur(4px);
  /* backdrop-blur-sm */
  border-radius: 0.75rem;
  /* rounded-xl */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* shadow-md */
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* border-[1px] border-white/10 */
  min-height: 36px;
  padding: 0.5em;
}

hr {
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.card.inset {
  backdrop-filter: blur(4px);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 36px;
  padding: 0.5em;
}

.progressbar-container {
  width: 100%;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
}

.progressbar-empty {
  width: 100%;
  height: 100%;
}

.progressbar-full {
  height: 100%;
  position: relative;
  top: -100%;
}

.progressbar-full.good {
  background: #31ff2e;
  background: linear-gradient(90deg,
      rgba(49, 255, 46, 1) 0%,
      rgba(41, 216, 37, 1) 50%,
      rgba(24, 176, 21, 1) 100%);
}

.progressbar-full.bad {
  background-color: #cba50f;
}

.titlebar {
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
}

.slot {
  width: calc(36px * 2.5);
  height: calc(36px * 2.5);
  background-color: #313031;
  border-top: 1px solid #1d1d1d;
  border-left: 1px solid #272727;
  border-right: 1px solid #272727;
  border-bottom: 1px solid #403f40;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5) inset;
}

.slot:hover {
  background-color: #ffae00;
  border-top: 1px solid #4d3210;
  border-left: 1px solid #6c4911;
  border-right: 1px solid #6d490f;
  border-bottom: 1px solid #c8913a;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5) inset;
}

.slot:active {
  background-color: #db7a00;
  border-top: 1px solid #4d3210;
  border-left: 1px solid #6c4911;
  border-right: 1px solid #6d490f;
  border-bottom: 1px solid #c8913a;
  box-shadow: 0px 0px 8px 0px rgba(1, 1, 1, 0.5) inset;
}