@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "TikTok Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
}


form .buttons {
  /* border: 2px solid blue; */
  width: 100%;
  height: 25%;

  display: flex;
  justify-content: center;
}

#btn-container {
  /* border: 2px solid green; */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

/*--------------------------------------------------------------------------------------------*/
#increment-btn {
  /* border: 2px solid red; */
  background-color: black;
  color: white;

  cursor: pointer;
  transition: all 0.3s ease;

  font-weight: bold;
  border: none;
  border-radius: 20px;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 0.00001px solid rgb(74, 73, 73);
 
   /* width: 25%;
  height: 45%; */
  width: 85px;
  height: 40px;

}

#increment-btn {
  box-shadow: 0 0 10px darkgray, 0 0 20px whitesmoke;
}

#increment-btn:hover {
  border: 2px solid aqua;
  color: darkslategray;
  background-color: rgb(51, 150, 237);
  box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px aqua;
}

#increment-btn:before {
  content: "turn";
  font-size: 16px;
}

#increment-btn:hover::before {
  content: "ON";
  font-size: 16px;
}

/*--------------------------------------------------------------------------------------------*/
#save-btn {
  background-color: black;
  color: white;

  cursor: pointer;
  transition: all 0.3s ease;

  font-weight: bold;
  border: none;
  border-radius: 20px;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 0.00001px solid rgb(74, 73, 73);

  display: none;
  width: 85px;
  height: 40px;
}

#save-btn {
  box-shadow: 0 0 10px green, 0 0 20px lime;
}

#save-btn:hover {
  border: 2px solid lime;
  color: darkslategray;
  background-color: rgb(217, 242, 181);
  box-shadow: 0 0 10px green, 0 0 20px green, 0 0 30px lime;
}

#save-btn:before {
  content: "save";
  font-size: 16px;
}

#save-btn:hover::before {
  content: "SAVE";
  font-size: 16px;
}

/*--------------------------------------------------------------------------------------------*/
#reset-btn {
  background-color: black;
  color: white;

  cursor: pointer;
  transition: all 0.3s ease;

  font-weight: bold;
  border: none;
  border-radius: 20px;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 0.00001px solid rgb(74, 73, 73);

  display: none;
  width: 85px;
  height: 40px;
}

#reset-btn:before {
  content: "reset";
  font-size: 16px;
}

#reset-btn:hover::before {
  content: "RESET";
  font-size: 16px;
}

#reset-btn {
  box-shadow: 0 0 10px gold, 0 0 20px yellow;
}

#reset-btn:hover {
  border: 2px solid gold;
  color: darkslategray;
  background-color: rgb(247, 251, 152);
  box-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px navajowhite;
}

/*--------------------------------------------------------------------------------------------*/
#trash-btn {
  /* border: 2px solid red; */
  background-color: black;
  color: white;

  cursor: pointer;
  transition: all 0.3s ease;

  font-weight: bold;
  border: none;
  border-radius: 20px;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 0.00001px solid rgb(74, 73, 73);

  display: none;
  width: 85px;
  height: 40px;
}

#trash-btn {
  box-shadow: 0 0 10px rgb(246, 1, 1), 0 0 20px rgb(250, 120, 120);
}

#trash-btn:hover {
  border: 2px solid crimson;
  color: darkslategray;
  background-color: rgb(237, 51, 51);
  box-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px crimson;
}

#trash-btn:before {
  content: "trash";
  font-size: 16px;
}

#trash-btn:hover::before {
  content: "TRASH";
  font-size: 16px;
}