/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/frontend.css ***!
  \**********************************************************************************************************************************************************************/
#image {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
  border: 2px solid black;
}

.wrapper {
  margin: 0 auto;
  background-color: #121b26;
}

.framer-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto;
  padding: 20px;
  width: auto;
}

.upload-label {
  display: block;
  margin-bottom: 10px;
}

.canvas {
  margin: 0 auto;
  border: 5px solid #ff918d;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.download-button,
.upload-label {
  padding: 10px 20px;
  /* font-weight: 600; */
  background-color: #d92b18;
  font-family: "Bebas Neue";
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.disabled {
  padding: 10px 30px !important;
  /* padding-bottom: 5px !important; */
  background-color: #ccc !important;
  font-family: "Bebas Neue";
  color: #121b26 !important;
  border: none;
  border-radius: 5px;
  cursor: not-allowed;
}

.upload-label {
  padding: 10px 30px !important;
}

.download-button:hover,
.upload-label:hover {
  background-color: #fbfbfb !important;
  color: #121b26 !important;
}

.frames-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.square-grid {
  display: flex;
  /* grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); */
  /* gap: 10px; */
  margin-top: 20px;
  gap: 5px;
  width: 100%;
  justify-content: space-between;
}

.square {
  width: 100%;
  height: 100px;
  width: 100px;

  background-color: lightgray;
  border: 2px solid #d92b18;
  transition: all 0.3s ease; /* Added transition */
}

.square.highlighted {
  background-color: #7b7a8c;
  transform: scale(1.1); /* Scale the highlighted square */
}

.square:hover:not(.highlighted) {
  transform: scale(
    1.1
  ); /* Make the square 10% larger on hover, unless it's highlighted */
}

.square:hover:not(.highlighted):not(.clicked) {
  transform: scale(
    1.1
  ); /* Make the square 10% larger on hover, unless it's highlighted or clicked */
}

.square.clicked {
  transform: scale(1.1); /* Scale the clicked square */
}


/*# sourceMappingURL=frontend.css.map*/