@font-face {
  font-family: "Architects Daughter";
  src: url("fonts/ArchitectsDaughter.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  box-sizing: border-box;
  font-family: "Architects Daughter", cursive, "Courier New", monospace,
    sans-serif;
}
:root {
  --eraserPositionX: -100px;
  --eraserPositionY: -100px;
  --eraserWidth: 100px;
  --eraserHeight: 100px;
  --scale: 1;
}
.eraser-tool {
  position: fixed;
  border: 2px solid #ae9f9f;
  /* cursor: grab; */
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transform: translate(
    calc(var(--eraserPositionX) - (var(--eraserWidth, 100px) / 2)),
    calc(var(--eraserPositionY) - (var(--eraserHeight, 100px) / 2))
  );
  z-index: 214748365;
  top: 0;
  left: 0;
  width: var(--eraserWidth, 100px);
  height: var(--eraserHeight, 100px);
  background-color: transparent;
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: rgb(183, 213, 213); */
}

ul {
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.li-box.hover:hover {
  /* background-color: #464c54; */
  background-color: rgba(75, 178, 203, 0.5);
  border-radius: 10px;
  transition: background-color 0.2s ease-in;
}

.ul-container {
  display: flex;
  /* flex-direction: column; */
  row-gap: 0.5rem;
}
/**
This will only work well inside react-packages
**/
.pallete-box {
  position: fixed;
  bottom: 1.75rem;
  left: 50% !important;
  translate: -50% 0 !important;
  /* translate: translateX(-50%) 0 !important; */
  pointer-events: auto !important;
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: center !important;
  align-items: center !important;

  backdrop-filter: blur(10px);

  background-color: rgba(255, 255, 255, 0.4);
  color: black;
  z-index: 2147483646;
  border: 1.5px solid #eaecef;
  box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 0.2);
  border-radius: 0.375rem;
  scale: var(--scale);
  cursor: default;
  /* transition: width 0.2s ease-in; */
}

/* .pallete-box {
  transform: translateX(-50%) scale(var(--scale)) !important;
  transform-origin: bottom center !important;
} */

/**
-------------------------------------------------------------
**/

/**
This will only work well inside extensions
**/
/* .pallete-box {
  position: fixed !important;
  inset-inline: 0 !important;  
  bottom: 1.75rem;  
  margin-inline: auto !important; 
  width: fit-content;
  height: fit-content;

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

  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.4);
  color: black;

  z-index: 2147483646;
  border: 1.5px solid #eaecef;
  box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 0.2);
  border-radius: 0.375rem;

  cursor: default;
  transition: width 0.2s ease-in;

  pointer-events: auto !important;
  scale: var(--scale);
 
} */
.pallete-box.show {
  animation: moveUp 0.5s ease-out forwards;
}
.pallete-box.hide {
  animation: moveDown 0.5s ease-out forwards;
}
@keyframes moveUp {
  from {
    transform: translateY(300px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes moveDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(300px);
  }
}

.pallete-box.show {
  animation: moveUp 0.8s ease-out forwards;
}
.pallete-box.hide {
  animation: moveDown 0.5s ease-out forwards;
}
@keyframes moveUp {
  from {
    transform: translateY(300px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes moveDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(300px);
  }
}

.pallete-tools {
  /* background-color: aqua; */
  /* width: fit-content;
  height: fit-content; */
  padding: 0.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  column-gap: 0.5rem;
}

.li-box {
  user-select: none !important;
  position: relative;
  cursor: pointer;
  border: 1px;
  padding: 0.25rem;
  border: 1px solid transparent;
  /* transition: background-color, 0.2s ease-in; */
  border-radius: 0.375rem;
}

.li-box.show {
  border-color: #464c54;
  background-color: rgba(75, 178, 203, 0.7);
  fill: oklch(82.7% 0.119 306.383);
}
/* .li-box.hide {
  border-color: transparent;
  background-color: transparent;
  fill: inherit;
} */
.center {
  display: flex;
  align-items: center;
}

.editor-input {
  border: none;
  outline: none;
  opacity: 0.8;
  backdrop-filter: 10px;
  padding: 0.25rem;
  background-color: rgba(130, 133, 134, 0.707);
}
.sticker-editor {
  border: none;
  outline: none;
  font-size: 0.875rem;
  backdrop-filter: 10px;
  line-height: 0.25rem;
  padding: 0.25rem;
  left: 3rem;
  background-color: rgba(130, 133, 134, 0.707);
  opacity: 0.8;
}

.pencil {
  display: inline-block;
  width: 30px;
  height: 30px;
  scale: 80%;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='m59.466 6.317l-1.783-1.784a8.654 8.654 0 0 0-12.234 0L9.419 40.565L2.278 59.237c-.838 2.21.281 3.323 2.484 2.481l18.675-7.134l36.029-36.033c3.381-3.376 3.377-8.853 0-12.234m-22.629 9.486l2.508 2.507l-24.764 24.766l-2.508-2.509zm3.834 3.834l3.695 3.696l-24.763 24.765l-3.695-3.695zM11.026 57.32l-4.342-4.346l4.201-10.941L21.964 53.11zm12.411-5.387l-2.506-2.509l24.762-24.765l2.508 2.509zm26.209-26.21L38.281 14.36l2.827-2.828l11.365 11.363z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.palette-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M33.126 44.979c-2.951-2.363-7.736-2.363-10.687 0c-2.948 2.364-2.948 6.195 0 8.559c2.95 2.364 7.735 2.364 10.687 0c2.949-2.364 2.949-6.195 0-8.559m-11.34-3.409c2.287-2.841 1.513-6.43-1.727-8.014s-7.72-.564-10.007 2.277c-2.284 2.841-1.512 6.43 1.727 8.014c3.242 1.585 7.722.565 10.007-2.277m-3.103-13.552c2.189-2.446 1.66-5.713-1.183-7.297c-2.842-1.585-6.919-.887-9.109 1.559s-1.66 5.712 1.182 7.296s6.921.887 9.11-1.558m2.017-8.71c2.718 1.582 6.669.98 8.823-1.341c2.155-2.322 1.7-5.485-1.017-7.066c-2.717-1.582-6.668-.981-8.822 1.34c-2.156 2.322-1.701 5.485 1.016 7.067m22.946-4.037c2.42-1.237 2.689-3.667.6-5.43c-2.087-1.763-5.746-2.19-8.167-.954c-2.422 1.236-2.69 3.667-.601 5.43s5.748 2.19 8.168.954'/%3E%3Cpath fill='%23000' d='M52.475 33.199c-2.164-.636-4.031-1.186-4.544-2.459c-.297-.738-.181-1.822.323-3.221c5.366-5.02 13.394-13.109 13.168-16.396c-.09-1.314-2.184-3.196-3.557-3.196l-.108.004c-1.486.102-3.757 2.068-6.183 4.73a10 10 0 0 0-.781-1.761C48.248 6.515 42.653 4 35.444 4c-5.605 0-11.846 1.545-18.045 4.468c-7.957 3.752-13.9 11.576-15.14 19.934c-.922 6.206.18 15.592 10.658 25.075C17.563 57.684 24.879 60 33.514 60h.003c6.932 0 13.955-1.543 19.271-4.23C58.729 52.765 62 48.609 62 44.066c0-8.066-5.506-9.685-9.525-10.867m5.39-23.772c.631 0 2.027 1.31 2.06 1.798c.191 2.783-9.723 12.647-16.35 18.529l-1.13-.983l-.739-.645c4.932-7.358 13.366-18.509 16.159-18.699M39.266 31.06l1.522-1.745l1.731 1.51L41 32.569zm12.62 22.924C46.84 56.536 40.146 58 33.517 58h-.002c-8.14 0-14.978-2.133-19.256-6.006C4.435 43.105 3.386 34.418 4.235 28.695c1.146-7.714 6.648-14.943 14.019-18.418C24.187 7.479 30.132 6 35.444 6c6.383 0 11.473 2.207 13.618 5.904c.462.795.772 1.645.952 2.535c-4.478 5.283-9.026 12.053-9.895 13.359l-2.777 3.184c-1.458-.015-2.918.622-3.368 2.161c-1.658 5.655-5.351 9.162-5.351 9.162s9.361-1.85 11.152-3.952c.97-1.138 1.44-2.498 1.429-3.738l2.908-3.334c.388-.341.965-.854 1.676-1.496c-.004.624.082 1.194.286 1.702c.875 2.172 3.284 2.88 5.835 3.63c3.977 1.17 8.09 2.379 8.09 8.949c.001 3.75-2.882 7.272-8.113 9.918'/%3E%3Cpath fill='%23000' d='M54.121 39.807c-2.95-2.363-7.736-2.363-10.686 0s-2.949 6.195 0 8.559s7.735 2.363 10.686 0s2.95-6.196 0-8.559m-1.453 7.394c-2.147 1.721-5.633 1.721-7.779 0s-2.147-4.51 0-6.23s5.632-1.721 7.779 0s2.147 4.509 0 6.23'/%3E%3C/svg%3E");
}

.pencil-tools::after {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.25 23.25a3 3 0 0 1-3-3V6.53a3 3 0 0 1 .32-1.34l2-4a.75.75 0 0 1 1.34 0l2 4a3 3 0 0 1 .32 1.34v13.72a3 3 0 0 1-2.98 3m-3-16.75h6m-6 12h6m6-17.75h6s1.5 0 1.5 1.5v19.5s0 1.5-1.5 1.5h-6s-1.5 0-1.5-1.5V2.25s0-1.5 1.5-1.5m-1.5 4.5h3.5m-3.5 4.5h3.5m-3.5 4.5h3.5m-3.5 4.5h3.5'/%3E%3C/svg%3E");
}
/* .eraser-line::after {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cg clip-path='url(%23SVGXv8lpc2Y)'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m11.607 6.535l-7.779 7.779a2 2 0 0 0 0 2.828l1.536 1.536a2 2 0 0 0 1.414.585h6.243M11.607 6.535l2.12-2.12a2 2 0 0 1 2.83 0l4.242 4.242a2 2 0 0 1 0 2.828l-2.121 2.122m-7.071-7.072l7.07 7.072m0 0l-5.656 5.656m0 0H20'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='SVGXv8lpc2Y'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
} */
.eraser-line::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%23000' d='m5.505 11.41l.53.53zM3 14.952h-.75zM9.048 21v.75zM11.41 5.505l-.53-.53zm1.831 12.34a.75.75 0 0 0 1.06-1.061zM7.216 9.697a.75.75 0 1 0-1.06 1.061zm10.749 2.362l-5.905 5.905l1.06 1.06l5.905-5.904zm-11.93-.12l5.905-5.905l-1.06-1.06l-5.905 5.904zm0 6.025c-.85-.85-1.433-1.436-1.812-1.933c-.367-.481-.473-.79-.473-1.08h-1.5c0 .749.312 1.375.78 1.99c.455.596 1.125 1.263 1.945 2.083zm-1.06-7.086c-.82.82-1.49 1.488-1.945 2.084c-.468.614-.78 1.24-.78 1.99h1.5c0-.29.106-.6.473-1.08c.38-.498.962-1.083 1.812-1.933zm7.085 7.086c-.85.85-1.435 1.433-1.933 1.813c-.48.366-.79.472-1.08.472v1.5c.75 0 1.376-.312 1.99-.78c.596-.455 1.264-1.125 2.084-1.945zm-7.085 1.06c.82.82 1.487 1.49 2.084 1.945c.614.468 1.24.78 1.989.78v-1.5c-.29 0-.599-.106-1.08-.473c-.497-.38-1.083-.962-1.933-1.812zm12.99-12.99c.85.85 1.433 1.436 1.813 1.933c.366.481.472.79.472 1.08h1.5c0-.749-.312-1.375-.78-1.99c-.455-.596-1.125-1.263-1.945-2.083zm1.06 7.086c.82-.82 1.49-1.488 1.945-2.084c.468-.614.78-1.24.78-1.99h-1.5c0 .29-.106.6-.473 1.08c-.38.498-.962 1.083-1.812 1.933zm0-8.146c-.82-.82-1.487-1.49-2.084-1.945c-.614-.468-1.24-.78-1.989-.78v1.5c.29 0 .599.106 1.08.473c.497.38 1.083.962 1.933 1.812zm-7.085 1.06c.85-.85 1.435-1.433 1.933-1.812c.48-.367.79-.473 1.08-.473v-1.5c-.75 0-1.376.312-1.99.78c-.596.455-1.264 1.125-2.084 1.945zm2.362 10.749L7.216 9.698l-1.06 1.061l7.085 7.085z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M9 21h12'/%3E%3C/g%3E%3C/svg%3E");
}
.reset::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='M6.5 3.5c-2.414 1.377-4 4.022-4 7a8 8 0 1 0 8-8'/%3E%3Cpath d='M6.5 7.5v-4h-4'/%3E%3C/g%3E%3C/svg%3E");
}
.keyboard::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%23000' d='M7 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m3-3a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 3a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M16 5c2.828 0 4.243 0 5.121.879C22 6.757 22 8.172 22 11v2c0 2.828 0 4.243-.879 5.121C20.243 19 18.828 19 16 19H8c-2.828 0-4.243 0-5.121-.879C2 17.243 2 15.828 2 13v-2c0-2.828 0-4.243.879-5.121C3.757 5 5.172 5 8 5h4M7 16h10'/%3E%3C/g%3E%3C/svg%3E");
}
.cursor::after {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v5a2 2 0 0 1-1.164 1.818a1.5 1.5 0 0 0-.275-.379l-.446-.446A1 1 0 0 0 14 10V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h4v1H3a2 2 0 0 1-2-2zm7.854 3.146A.5.5 0 0 0 8 8.5v6a.5.5 0 0 0 .9.3l1.35-1.8h2.25a.5.5 0 0 0 .354-.854zM9 13V9.707L11.293 12H10a.5.5 0 0 0-.4.2z'/%3E%3C/svg%3E");
}
.sticker::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M9 16c.85.63 1.885 1 3 1s2.15-.37 3-1'/%3E%3Cellipse cx='15' cy='10.5' fill='%23000' rx='1' ry='1.5'/%3E%3Cellipse cx='9' cy='10.5' fill='%23000' rx='1' ry='1.5'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M15 22h-3c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464c.974.974 1.3 2.343 1.41 4.536M15 22a7 7 0 0 0 7-7m-7 7c0-1.861 0-2.792.245-3.545a5 5 0 0 1 3.21-3.21C19.208 15 20.139 15 22 15m0-3v3'/%3E%3C/g%3E%3C/svg%3E");
}

.screen::after {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M35.288 7.445a4.82 4.82 0 0 1 6.894 6.735l-8.01 8.392a3.75 3.75 0 0 1-1.87 1.065l-5.77 1.331a1.25 1.25 0 0 1-1.517-1.408l.875-5.69a3.75 3.75 0 0 1 1.055-2.082zm5.337 2.121a2.32 2.32 0 0 0-3.57-.353l-8.342 8.342a1.25 1.25 0 0 0-.352.694l-.595 3.869l3.974-.917a1.25 1.25 0 0 0 .623-.355l8.01-8.392a2.32 2.32 0 0 0 .252-2.888m-11.928.934H10.25a3.75 3.75 0 0 0-3.75 3.75v4.932c1.01-.747 2.106-1.514 3.208-2.164c1.342-.792 2.796-1.475 4.186-1.687c1.445-.22 2.946.062 4.055 1.356c.523.61.827 1.285.922 2.005c.093.704-.024 1.376-.225 1.982c-.36 1.086-1.073 2.168-1.672 3.078l-.12.181c-.682 1.039-1.196 1.866-1.392 2.603c-.09.34-.095.603-.043.821c.049.21.17.464.465.76c.403.402.758.545 1.06.584c.32.042.699-.018 1.15-.212c.943-.405 1.908-1.259 2.772-2.123a1.25 1.25 0 1 1 1.768 1.768c-.869.87-2.128 2.04-3.553 2.652c-.732.314-1.572.51-2.462.394c-.909-.119-1.756-.549-2.503-1.296c-.581-.582-.963-1.236-1.131-1.957c-.167-.712-.106-1.403.061-2.033c.32-1.2 1.087-2.373 1.719-3.334l.035-.053c.676-1.028 1.22-1.857 1.473-2.62c.12-.363.149-.643.12-.868c-.028-.21-.114-.44-.342-.705c-.391-.457-.921-.643-1.78-.512c-.915.14-2.04.63-3.292 1.368c-1.233.728-2.492 1.639-3.667 2.527q-.41.31-.812.619V33.75a3.75 3.75 0 0 0 3.75 3.75h27.5a3.75 3.75 0 0 0 3.75-3.75V18.515l2.5-2.62V33.75A6.25 6.25 0 0 1 37.75 40h-27.5A6.25 6.25 0 0 1 4 33.75v-19.5A6.25 6.25 0 0 1 10.25 8h20.947z'/%3E%3C/svg%3E");
}

.screen-off::after {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='m12.293 13l1.853 1.854a.5.5 0 0 0 .708-.708l-13-13a.5.5 0 1 0-.708.708l1.355 1.354A2.5 2.5 0 0 0 1 5.5v5A2.5 2.5 0 0 0 3.5 13zm-1-1H3.5A1.5 1.5 0 0 1 2 10.5V7.272c.555-.453 1.19-.864 1.749-1.071c.31-.116.557-.153.735-.132c.157.019.265.08.35.208c.126.189.126.34.045.537c-.098.24-.3.497-.573.83l-.034.043c-.243.295-.538.655-.716 1.043c-.201.436-.275.95-.003 1.494c.42.842 1.368.932 2.115.788a4.43 4.43 0 0 0 2.186-1.158a.5.5 0 1 0-.708-.708c-.428.429-1.08.77-1.668.884c-.62.12-.924-.04-1.03-.254c-.104-.206-.093-.392.016-.628c.122-.266.342-.535.616-.87l.01-.012c.248-.302.551-.673.715-1.073a1.7 1.7 0 0 0 .128-.553zM4.357 5.064a2.9 2.9 0 0 0-.956.199c-.469.174-.952.448-1.401.758V5.5a1.5 1.5 0 0 1 1.305-1.487zm6.375 3.474l-.056.016l-.805-.805l.578-.17c.24-.071.46-.201.636-.378l2.64-2.64a.914.914 0 0 0-1.292-1.293l-2.64 2.639a1.5 1.5 0 0 0-.378.638l-.17.579l-.806-.806l.017-.055a2.5 2.5 0 0 1 .63-1.063l2.64-2.64a1.914 1.914 0 1 1 2.707 2.708l-2.64 2.64a2.5 2.5 0 0 1-1.06.63m3.595 3.668l-.707-.708c.236-.265.38-.615.38-.998V7.115l1-1V10.5c0 .66-.255 1.26-.673 1.706M5.121 3l1 1h2.75l1-1z'/%3E%3C/svg%3E");
}

.paint-roller::after {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M87 20v130h8.596c-.196 2.517-.095 4.886.404 7c1.733 7.34 8.458 16 16 16s14.267-8.66 16-16c.5-2.114.6-4.483.404-7h101.27c-2.738 5.914-6.99 16.49-5.674 23c.846 4.188 4.13 9.127 7.814 9.127s6.967-4.94 7.813-9.127c1.315-6.51-2.936-17.086-5.674-23h102.14c1.85 7.268 8.477 15.67 15.907 15.67s14.056-8.402 15.908-15.67H425V94h14v85.99s.417 10.562-9.986 15.13c-.868.223-33.657 8.69-69.08 18.153c-17.945 4.794-36.337 9.78-51.182 13.975c-14.845 4.194-25.117 7.082-30.656 9.51c-6.74 2.954-14.238 6.833-20.422 13.25S247 265.748 247 277v103h18V277c0-6.897 2.1-10.83 5.637-14.502c3.538-3.672 8.894-6.717 14.685-9.256c1.548-.678 13.63-4.52 28.324-8.672c14.696-4.15 33.033-9.127 50.932-13.908c35.798-9.562 69.844-18.35 69.844-18.35l.62-.162l.59-.248C456.533 203.194 457 179.99 457 179.99V76h-32V20zm18 18h302v47.373c-7.212 4.035-14.646 14.71-23 15.627c-21.86 2.4-42.026-16.844-64-16c-16.853.647-32.418 22.454-48 16c-11.018-4.564-4.686-28.23-16-32c-22.627-7.542-40.21 30.31-64 32c-16.823 1.196-31.135-16-48-16c-12.762 0-28.045 1.332-39 7.906zm39 159s-19.875 31.586-16 48c1.733 7.34 8.458 16 16 16s14.267-8.66 16-16c3.875-16.414-16-48-16-48m89 201v94h46v-94z'/%3E%3C/svg%3E");
}
.lock::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16Z'/%3E%3Ccircle cx='12' cy='16' r='2'/%3E%3Cpath stroke-linecap='round' d='M6 10V8a6 6 0 1 1 12 0v2'/%3E%3C/g%3E%3C/svg%3E");
}

.full-screen::after {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M9.998 6c-.015 1.707-.11 2.648-.73 3.268s-1.561.716-3.268.73m3.998 7.999c-.015-1.706-.11-2.647-.73-3.267S7.707 14.014 6 14m8-8c.014 1.707.11 2.648.73 3.268s1.56.716 3.267.73M14 17.997c.014-1.706.11-2.647.73-3.267s1.56-.716 3.267-.73'/%3E%3Cpath d='M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464c.974.974 1.3 2.343 1.41 4.536'/%3E%3C/g%3E%3C/svg%3E");
}
.screenshot::after {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3Cpath stroke-linecap='round' d='M2 13.364c0-3.065 0-4.597.749-5.697a4.4 4.4 0 0 1 1.226-1.204c.72-.473 1.622-.642 3.003-.702c.659 0 1.226-.49 1.355-1.125A2.064 2.064 0 0 1 10.366 3h3.268c.988 0 1.839.685 2.033 1.636c.129.635.696 1.125 1.355 1.125c1.38.06 2.282.23 3.003.702c.485.318.902.727 1.226 1.204c.749 1.1.749 2.632.749 5.697s0 4.596-.749 5.697a4.4 4.4 0 0 1-1.226 1.204C18.904 21 17.343 21 14.222 21H9.778c-3.121 0-4.682 0-5.803-.735A4.4 4.4 0 0 1 2.75 19.06A3.4 3.4 0 0 1 2.277 18M19 10h-1'/%3E%3C/g%3E%3C/svg%3E");
}

.exit::after {
  display: inline-block;
  width: 23px;
  height: 23px;
  vertical-align: -0.125em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' d='M24 12H8m10.5-5c0 .577.665 1.562 1.228 2.294a7.5 7.5 0 0 0 1.745 1.662C22.2 11.445 23.2 12 23.99 12c-.79 0-1.79.556-2.517 1.044a7.5 7.5 0 0 0-1.745 1.662c-.563.732-1.228 1.717-1.228 2.294m-4-10V2.5h-.329A46 46 0 0 1 1.103.605L.75.5H.5v23h.25l.353-.105A46 46 0 0 1 14.171 21.5h.329V17' stroke-width='1'/%3E%3C/svg%3E");
}
/* @media screen and (max-width: 440px) {
  :root {
    --scale: 80%;
  }
}
@media screen and (max-width: 380px) {
  :root {
    --scale: 61%;
  }
} */
