PixelCraft Code

@font-face {
  font-family: "Martel Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Martel Sans Regular"), local("MartelSans-Regular"),
    url(https://fonts.gstatic.com/s/martelsans/v6/h0GsssGi7VdzDgKjM-4d8hjYx-4.woff2)
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

* {
  font-family: "Martel Sans", sans-serif;
}

body {
  background-color: #232125;
  margin: 0px;
}

#popup,
#frames {
  background-color: #332f35;
  color: white;
  font-size: 20px;
  padding: 30px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.1, 0.1);
  text-align: center;
  max-width: 420px;
  width: 70%;
  transition: 0.2s all;
  z-index: 2;
  border-radius: 5px;
}

#color-settings-popup {
  background-color: #332f35;
  color: white;
  border-radius: 5px;
  font-size: 20px;
  width: calc(100vh - 55vh);
  padding: 30px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  transform: translate(-50%, -50%);
  transition: 0.2s all;
  left: 50%;
  top: 50%;
}

#color-settings-popup .color-palette {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(10, 43px);
}

#color-settings-popup .button-grp {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-top: 20px;
}

#color-settings-popup .close {
  font-size: 18;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

#color-settings-popup .close i {
  padding: 10px;
  background-color: #262327;
}

#color-settings-popup .button-grp button {
  background-color: #262327;
  color: white;
  padding: 5px 10px 5px 10px;
  font-size: 18px;
  font-weight: bolder;
  display: block;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.color-palette .item {
  padding: 15px;
}

#popup {
  display: none;
}
#popup h3 {
  line-height: 30px;
}

#frames {
  display: none;
  padding: 10px;
}

#frames #gallery {
  padding: 10px 10px 10px 10px;
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}

#frames .btn {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
  font-size: 20px;
  padding: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

#frames img {
  width: 100px;
  margin: 10px;
}

#width,
#height {
  background-color: #262327;
  color: white;
  margin: 10px;
  padding: 5px;
  font-size: 14px;
  font-weight: bolder;
  border: none;
  border-radius: 3px;
  max-width: 60px;
}

#close {
  background-color: #262327;
  color: white;
  margin: 15px auto 5px auto;
  padding: 5px 10px 5px 10px;
  font-size: 18px;
  font-weight: bolder;
  display: block;
  border: none;
  border-radius: 3px;
  max-width: 60px;
  transition: 0.2s all;
}

#close:hover {
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}

#canvas {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  max-width: 550px;
  display: none;
  cursor: crosshair;
  touch-action: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#toolbar {
  position: fixed;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  padding: 0px;
  color: white;
  max-width: 150px;
}

#toolbar .item {
  display: inline-block;
  float: left;
  padding: 15px;
  border: 1px solid #fff;
  cursor: pointer;
  height: 32px;
  width: 32px;
  font-family: Arial, FontAwesome;
  font-size: 24px;
}

#palette {
  position: fixed;
  top: 25%;
  right: 0%;
  /* transform: translateY(-50%); */
  padding: 0px;
  color: white;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#palette .item {
  display: inline-block;
  padding: 25px;
  cursor: pointer;
}

#palette .btn {
  padding: 10px;
  cursor: pointer;
}

path {
  fill: white;
}

.display-none {
  display: none;
}

.item:hover {
  background-color: grey;
}

.menubtn {
  position: fixed;
  left: 20px;
  top: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  background-color: #332f35;
  color: white;
  padding: 5px 15px 5px 15px;
  border-radius: 5px;
  font-size: 25px;
  font-weight: bolder;
  cursor: pointer;
  z-index: 3;
}

.menu {
  position: fixed;
  top: 70px;
  left: 20px;
  border-radius: 5px;
  padding: 0px;
  color: white;
  z-index: 3;
  display: none;
}

.menu li {
  padding: 5px 20px 5px 20px;
  list-style: none;
  background-color: #332f35;
  cursor: pointer;
}

.menu li i {
  padding-right: 10px;
}

.menu li a {
  text-decoration: none;
  color: white;
}

@media only screen and (max-width: 600px) {
  #toolbar {
    position: fixed;
    top: 100%;
    left: 50%;
    min-width: 100%;
    transform: translate(-50%, -100%);
    padding: 0px;
    color: white;
  }
  #palette {
    position: fixed;
    top: 0%;
    /* transform: translateY(0%); */
    min-width: 100%;
    color: white;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(auto-fill, 30px);
  }

  #palette .item {
    padding: 15px;
  }

  #toolbar .item {
    width: 20px;
    height: 20px;
  }
  .menubtn {
    top: 70px;
  }
  .menu {
    top: 110px;
  }
}