inject.css

#bomb-container {
  width: 500px;
  height: 500px;
  position: fixed;
  top: calc(50vh - (500px/2));
  left: calc(50vw - (500px/2));
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGc+PGcgZmlsbD0iI2RjNWM2NSI+PHBhdGggZD0ibTEyNS4yNzYgMTcwLjgyNWgyNjEuNDQ4djkwLjAzNWgtMjYxLjQ0OHoiLz48cGF0aCBkPSJtNDg5LjY4NCAxNzAuODI1aC01MS42MDR2OTAuMDM1aDUxLjYwNGM3LjkwNyAwIDE0LjMxNi02LjQxIDE0LjMxNi0xNC4zMTZ2LTYxLjQwM2MwLTcuOTA2LTYuNDEtMTQuMzE2LTE0LjMxNi0xNC4zMTZ6Ii8+PHBhdGggZD0ibTczLjkyIDE3MC44MjVoLTUxLjYwNGMtNy45MDYgMC0xNC4zMTYgNi40MS0xNC4zMTYgMTQuMzE3djYxLjQwM2MwIDcuOTA3IDYuNDEgMTQuMzE2IDE0LjMxNiAxNC4zMTZoNTEuNjA0eiIvPjwvZz48ZyBmaWxsPSIjZGM1YzY1Ij48cGF0aCBkPSJtMTI1LjI3NiAyNjAuODYxaDI2MS40NDh2OTAuMDM1aC0yNjEuNDQ4eiIvPjxwYXRoIGQ9Im03My45MiAyNjAuODYxaC01MS42MDRjLTcuOTA2IDAtMTQuMzE2IDYuNDA5LTE0LjMxNiAxNC4zMTZ2NjEuNDAzYzAgNy45MDcgNi40MSAxNC4zMTYgMTQuMzE2IDE0LjMxNmg1MS42MDR6Ii8+PHBhdGggZD0ibTQ4OS42ODQgMjYwLjg2MWgtNTEuNjA0djkwLjAzNWg1MS42MDRjNy45MDcgMCAxNC4zMTYtNi40MSAxNC4zMTYtMTQuMzE2di02MS40MDNjMC03LjkwNy02LjQxLTE0LjMxNi0xNC4zMTYtMTQuMzE2eiIvPjwvZz48ZyBmaWxsPSIjZGM1YzY1Ij48cGF0aCBkPSJtMTI1LjI3NiAzNTAuODk2aDI2MS40NDh2OTAuMDM1aC0yNjEuNDQ4eiIvPjxwYXRoIGQ9Im00ODkuNjg0IDM1MC44OTZoLTUxLjYwNHY5MC4wMzVoNTEuNjA0YzcuOTA3IDAgMTQuMzE2LTYuNDEgMTQuMzE2LTE0LjMxNnYtNjEuNDAzYzAtNy45MDYtNi40MS0xNC4zMTYtMTQuMzE2LTE0LjMxNnoiLz48cGF0aCBkPSJtNzMuOTIgMzUwLjg5NmgtNTEuNjA0Yy03LjkwNiAwLTE0LjMxNiA2LjQxLTE0LjMxNiAxNC4zMTZ2NjEuNDAzYzAgNy45MDcgNi40MSAxNC4zMTYgMTQuMzE2IDE0LjMxNmg1MS42MDR6Ii8+PC9nPjxnIGZpbGw9IiNiOTQ1NTEiPjxwYXRoIGQ9Im0xMjUuMjc2IDQyMi45MzFoMjYxLjQ0OHYxOGgtMjYxLjQ0OHoiLz48cGF0aCBkPSJtNDg5LjY4NCA0MjIuOTMxaC01MS42MDR2MThoNTEuNjA0YzcuOTA3IDAgMTQuMzE2LTYuNDEgMTQuMzE2LTE0LjMxNnYtMThjMCA3LjkwNy02LjQxIDE0LjMxNi0xNC4zMTYgMTQuMzE2eiIvPjxwYXRoIGQ9Im04IDQwOC42MTV2MThjMCA3LjkwNyA2LjQxIDE0LjMxNiAxNC4zMTYgMTQuMzE2aDUxLjYwNHYtMThoLTUxLjYwNGMtNy45MDYgMC0xNC4zMTYtNi40MDktMTQuMzE2LTE0LjMxNnoiLz48Zz48cGF0aCBkPSJtMTI1LjI3NiAzMzIuODk2aDI2MS40NDh2MThoLTI2MS40NDh6Ii8+PHBhdGggZD0ibTQ4OS42ODQgMzMyLjg5NmgtNTEuNjA0djE4aDUxLjYwNGM3LjkwNyAwIDE0LjMxNi02LjQxIDE0LjMxNi0xNC4zMTZ2LTE4YzAgNy45MDYtNi40MSAxNC4zMTYtMTQuMzE2IDE0LjMxNnoiLz48cGF0aCBkPSJtOCAzMTguNTh2MThjMCA3LjkwNyA2LjQxIDE0LjMxNiAxNC4zMTYgMTQuMzE2aDUxLjYwNHYtMThoLTUxLjYwNGMtNy45MDYgMC0xNC4zMTYtNi40MS0xNC4zMTYtMTQuMzE2eiIvPjwvZz48cGF0aCBkPSJtMTI1LjI3NiAyNDIuODYxaDI2MS40NDh2MThoLTI2MS40NDh6Ii8+PHBhdGggZD0ibTQ4OS42ODQgMjQyLjg2MWgtNTEuNjA0djE4aDUxLjYwNGM3LjkwNyAwIDE0LjMxNi02LjQxIDE0LjMxNi0xNC4zMTZ2LTE4YzAgNy45MDYtNi40MSAxNC4zMTYtMTQuMzE2IDE0LjMxNnoiLz48cGF0aCBkPSJtOCAyMjguNTQ1djE4YzAgNy45MDcgNi40MSAxNC4zMTYgMTQuMzE2IDE0LjMxNmg1MS42MDR2LTE4aC01MS42MDRjLTcuOTA2IDAtMTQuMzE2LTYuNDEtMTQuMzE2LTE0LjMxNnoiLz48L2c+PGNpcmNsZSBjeD0iMjU2LjAzMSIgY3k9IjEzMy4wNzIiIGZpbGw9IiMwYTc4OWIiIHI9Ijg4LjczNiIvPjxwYXRoIGQ9Im0yNTYuMDMxIDIwMy44MDhjLTQ1Ljk2OSAwLTgzLjc3NC0zNC45NTUtODguMjg0LTc5LjczNi0uMjk4IDIuOTYtLjQ1MiA1Ljk2Mi0uNDUyIDkgMCA0OS4wMDcgMzkuNzI5IDg4LjczNiA4OC43MzYgODguNzM2czg4LjczNi0zOS43MjggODguNzM2LTg4LjczNmMwLTMuMDM4LS4xNTQtNi4wNC0uNDUyLTktNC41MSA0NC43OC00Mi4zMTQgNzkuNzM2LTg4LjI4NCA3OS43MzZ6IiBmaWxsPSIjMGE2MTdkIi8+PGNpcmNsZSBjeD0iMjU2LjAzMSIgY3k9IjEzMy4wNzIiIGZpbGw9IiNlYWYxZmYiIHI9IjU0LjkyMSIvPjxwYXRoIGQ9Im0yNTYuMDMxIDE2OS45OTNjLTI3LjI2NSAwLTQ5Ljg3OC0xOS44NzItNTQuMTc0LTQ1LjkyMS0uNDgzIDIuOTMtLjc0NiA1LjkzMy0uNzQ2IDkgMCAzMC4zMzIgMjQuNTg5IDU0LjkyMSA1NC45MjEgNTQuOTIxczU0LjkyLTI0LjU4OSA1NC45Mi01NC45MjFjMC0zLjA2Ny0uMjYzLTYuMDctLjc0Ni05LTQuMjk3IDI2LjA0OC0yNi45MDkgNDUuOTIxLTU0LjE3NSA0NS45MjF6IiBmaWxsPSIjZDVlN2ZmIi8+PGcgZmlsbD0iI2Y3ZTQ3MSI+PHBhdGggZD0ibTczLjkyIDE0NC4wOTNoNTEuMzU2djMyMy41NzFoLTUxLjM1NnoiLz48cGF0aCBkPSJtMzg2LjcyNCAxNDQuMDkzaDUxLjM1NnYzMjMuNTcxaC01MS4zNTZ6Ii8+PC9nPjxwYXRoIGQ9Im03My45MiA0NDkuNjY0aDUxLjM1NnYxOGgtNTEuMzU2eiIgZmlsbD0iI2YxY2I2NiIvPjxwYXRoIGQ9Im0zODYuNzI0IDQ0OS42NjRoNTEuMzU2djE4aC01MS4zNTZ6IiBmaWxsPSIjZjFjYjY2Ii8+PC9nPjxnPjxwYXRoIGQ9Im0yNTYuMDMxIDE5NS4zNzRjMzQuNDg2IDAgNjIuNTQzLTI4LjA1NyA2Mi41NDMtNjIuNTQzcy0yOC4wNTYtNjIuNTQzLTYyLjU0My02Mi41NDMtNjIuNTQzIDI4LjA1Ni02Mi41NDMgNjIuNTQzIDI4LjA1NyA2Mi41NDMgNjIuNTQzIDYyLjU0M3ptMC0xMTAuMDU2YzI2LjE5OSAwIDQ3LjUxMyAyMS4zMTQgNDcuNTEzIDQ3LjUxM3MtMjEuMzE1IDQ3LjUxNC00Ny41MTMgNDcuNTE0LTQ3LjUxMy0yMS4zMTUtNDcuNTEzLTQ3LjUxNCAyMS4zMTUtNDcuNTEzIDQ3LjUxMy00Ny41MTN6Ii8+PHBhdGggZD0ibTI1Ni4wMzEgMTQzLjIwNWM0LjE1IDAgNy41MTUtMy4zNjUgNy41MTUtNy41MTV2LTI2LjUyOGMwLTQuMTUtMy4zNjUtNy41MTUtNy41MTUtNy41MTVzLTcuNTE1IDMuMzY1LTcuNTE1IDcuNTE1djI2LjUyOGMuMDAxIDQuMTUgMy4zNjUgNy41MTUgNy41MTUgNy41MTV6Ii8+PHBhdGggZD0ibTUxMiAxODUuMDAzYzAtMTIuMDUzLTkuODA2LTIxLjg1OS0yMS44NTktMjEuODU5aC00NC4xOXYtMTkuMjdjMC00LjE1LTMuMzY1LTcuNTE1LTcuNTE1LTcuNTE1aC0xOC4xNTF2LTE1LjI1NWMwLTE0LjY5LTExLjk1MS0yNi42NC0yNi42NC0yNi42NGgtNDkuMTYxYy0xNC44NjItMzQuMTMxLTQ4LjkxMy01OC4wNTctODguNDUzLTU4LjA1Ny0xMC42MyAwLTIxLjA3OCAxLjcyLTMxLjA1NyA1LjExMy0zLjkzIDEuMzM2LTYuMDMyIDUuNjA0LTQuNjk2IDkuNTMzIDEuMzM2IDMuOTMgNS42MDQgNi4wMzIgOS41MzMgNC42OTYgOC40MTctMi44NjEgMTcuMjM5LTQuMzEzIDI2LjIxOS00LjMxMyA0NC44ODEgMCA4MS4zOTUgMzYuNTE0IDgxLjM5NSA4MS4zOTVzLTM2LjUxNCA4MS4zOTUtODEuMzk1IDgxLjM5NS04MS4zOTUtMzYuNTE0LTgxLjM5NS04MS4zOTVjMC0yNS4wNzkgMTEuMzA2LTQ4LjM4MyAzMS4wMjEtNjMuOTM5IDMuMjU4LTIuNTcxIDMuODE1LTcuMjk2IDEuMjQ0LTEwLjU1NC0yLjU3LTMuMjU3LTcuMjk1LTMuODE1LTEwLjU1NC0xLjI0NC0xMi43ODYgMTAuMDg5LTIyLjU3OCAyMi45MzYtMjguODI4IDM3LjM3aC00OS4xMDFjLTE0LjY5IDAtMjYuNjQgMTEuOTUxLTI2LjY0IDI2LjY0djE1LjI1NWgtMTguMjEzYy00LjE1IDAtNy41MTUgMy4zNjUtNy41MTUgNy41MTV2MTkuMjdoLTQ0LjE5Yy0xMi4wNTMgMC0yMS44NTkgOS44MDYtMjEuODU5IDIxLjg1OXY2MS41MjNjMCA1LjQ4NiAyLjAzNiAxMC41MDIgNS4zODYgMTQuMzQ0LTMuMzUgMy44NDItNS4zODYgOC44NTktNS4zODYgMTQuMzQ0djYxLjUyM2MwIDUuNDg2IDIuMDM2IDEwLjUwMiA1LjM4NiAxNC4zNDQtMy4zNSAzLjg0My01LjM4NiA4Ljg1OS01LjM4NiAxNC4zNDV2NjEuNTIzYzAgMTIuMDUzIDkuODA2IDIxLjg1OSAyMS44NTkgMjEuODU5aDQ0LjE5djE5LjI3MWMwIDQuMTUgMy4zNjQgNy41MTUgNy41MTUgNy41MTVoNTEuNDU3YzQuMTUgMCA3LjUxNS0zLjM2NCA3LjUxNS03LjUxNXYtMTkuMjcxaDQ1Ljk0M2M0LjE1IDAgNy41MTUtMy4zNjUgNy41MTUtNy41MTVzLTMuMzY1LTcuNTE1LTcuNTE1LTcuNTE1aC00NS45NDN2LTc1LjE4MmgyNDYuOTMxdjc1LjE4MmgtMTcwLjkzYy00LjE1IDAtNy41MTUgMy4zNjUtNy41MTUgNy41MTVzMy4zNjQgNy41MTUgNy41MTUgNy41MTVoMTcwLjkyOXYxOS4yNzFjMCA0LjE1IDMuMzY0IDcuNTE1IDcuNTE1IDcuNTE1aDUxLjQ1NmM0LjE1IDAgNy41MTUtMy4zNjQgNy41MTUtNy41MTV2LTE5LjI3MWg0NC4xOWMxMi4wNTMgMCAyMS44NTktOS44MDYgMjEuODU5LTIxLjg1OXYtNjEuNTIzYzAtNS40ODYtMi4wMzYtMTAuNTAyLTUuMzg2LTE0LjM0NCAzLjM1LTMuODQyIDUuMzg2LTguODU4IDUuMzg2LTE0LjM0NHYtNjEuNTIzYzAtNS40ODYtMi4wMzYtMTAuNTAyLTUuMzg2LTE0LjM0NCAzLjM1LTMuODQyIDUuMzg2LTguODU4IDUuMzg2LTE0LjM0NHYtNjEuNTI0em0tMjEuODU5LTYuODNjMy43NjYgMCA2LjgzIDMuMDY0IDYuODMgNi44M3Y2MS41MjNjMCAzLjc2Ni0zLjA2NCA2LjgzLTYuODMgNi44M2gtNDQuMTl2LTc1LjE4Mmg0NC4xOXptNi44MyA5Ny4wNDF2NjEuNTIzYzAgMy43NjYtMy4wNjQgNi44My02LjgzIDYuODNoLTQ0LjE5di03NS4xODJoNDQuMTljMy43NjYgMCA2LjgzIDMuMDY0IDYuODMgNi44Mjl6bS0xMDMuMzI2LTE2NS43MjFjNi40MDIgMCAxMS42MTEgNS4yMDkgMTEuNjExIDExLjYxMXYxNS4yNTVoLTE4LjI3NmMtNC4xNSAwLTcuNTE1IDMuMzY1LTcuNTE1IDcuNTE1djE5LjI3aC0zMS44OTVjMy4xNjYtOS41MzcgNC44ODYtMTkuNzI3IDQuODg2LTMwLjMxMyAwLTguMDQ2LS45OTYtMTUuODYyLTIuODYyLTIzLjMzOHptLTI4Ni44MzggMTEuNjExYzAtNi40MDIgNS4yMDktMTEuNjExIDExLjYxMS0xMS42MTFoNDQuMDI5Yy0xLjg2NSA3LjUzNy0yLjgzOSAxNS4zNi0yLjgzOSAyMy4zMzggMCAxMC41ODYgMS43MiAyMC43NzYgNC44ODYgMzAuMzEzaC0zMS45NTh2LTE5LjI3YzAtNC4xNS0zLjM2NC03LjUxNS03LjUxNS03LjUxNWgtMTguMjEzdi0xNS4yNTV6bS04NC45NDggMjIyLjQ2M2MtMy43NjYgMC02LjgzLTMuMDY0LTYuODMtNi44M3YtNjEuNTIzYzAtMy43NjYgMy4wNjQtNi44MjkgNi44My02LjgyOWg0NC4xOXY3NS4xODJ6bS02LjgzLTE1OC41NjRjMC0zLjc2NiAzLjA2NC02LjgzIDYuODMtNi44M2g0NC4xOXY3NS4xODJoLTQ0LjE5Yy0zLjc2NiAwLTYuODMtMy4wNjQtNi44My02Ljgzdi02MS41MjJ6bTYuODMgMjQ4Ljc3NWMtMy43NjYgMC02LjgzLTMuMDY0LTYuODMtNi44Mjl2LTYxLjUyM2MwLTMuNzY2IDMuMDY0LTYuODMgNi44My02LjgzaDQ0LjE5djc1LjE4MnptOTUuNjQ2IDI2Ljc4NmgtMzYuNDI3di0zMDkuMTc1aDM2LjQyN3ptMTUuMDMtMTE2Ljk5N3YtNzUuMTgyaDE2Ni45MzhjNC4xNSAwIDcuNTE1LTMuMzY1IDcuNTE1LTcuNTE1cy0zLjM2NS03LjUxNS03LjUxNS03LjUxNWgtMTY2LjkzOHYtNzUuMTgyaDM4LjQyYzE2LjI1MiAzMC4zNzEgNDguMjg5IDUxLjA4MiA4NS4wNzYgNTEuMDgyczY4LjgyNC0yMC43MTEgODUuMDc3LTUxLjA4MmgzOC4zNTd2NzUuMTgyaC00OS45MzNjLTQuMTUgMC03LjUxNSAzLjM2NS03LjUxNSA3LjUxNXMzLjM2NSA3LjUxNSA3LjUxNSA3LjUxNWg0OS45MzN2NzUuMTgyem0yOTguMzg3IDExNi45OTdoLTM2LjQyN3YtMzA5LjE3NWgzNi40Mjd6bTY2LjA0OS0zMy42MTVjMCAzLjc2Ni0zLjA2NCA2LjgyOS02LjgzIDYuODI5aC00NC4xOXYtNzUuMTgyaDQ0LjE5YzMuNzY2IDAgNi44MyAzLjA2NCA2LjgzIDYuODN6Ii8+PC9nPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-size: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bomb-interface {
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #7f8c8d 74%);
  position: relative;
  top: 90px;
  width: 250px;
  height: 200px;
  border: 15px solid #000;
  border-radius: 10px;
}

#bomb-display {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  font-size: 20px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 20px;
  width: 100%;
  text-align: center;
  color: #e37074;
}

#bomb-input {
  display: flex;
  width: 100%;
  justify-content: space-around;
  position: relative;
  top: 80px;
}

.bomb-button {
  height: 100px;
  width: 5px;
  background-color: purple;
  margin-top: 5px;
  transition: background 0.6s;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
  border-radius: 50px/25px;
  border: none;
  position: relative;
  bottom: 50px;
  cursor: cell;
}

.bomb-button {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.bomb-button:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}