:root {
     --primary-color: #0D0D0D;
     --secondary-color: #F2F2F2;
     --tertiary-color: #0442BF;
     --quaternary-color: #0A0E59;
     --quinary-color: #33a64e;
     --senary-color: #d93232;
 }

 html,
 body {
     height: 100%;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     padding: 1rem;
     background-color: var(--primary-color);
     color: var(--secondary-color);
     font-family: system-ui, sans-serif;
     display: grid;
     padding: 1rem;
     gap: 2rem;
     grid-template-rows: repeat(3, minmax(0, 1fr));
     align-content: space-between;
     justify-content: center;
     height: 100dvh;
 }

 .bulletButton {
     background-color: transparent;
     border: none;
     padding: 0;
     margin: 0;
 }

 .bulletButton:disabled {
     opacity: 20%;
 }

 .bulletImages {
     display: flex;
     user-select: none;
     justify-content: space-between;
     gap: 0.5rem;
 }

 .bwBullet {
     filter: grayscale(100%);
     opacity: 40%;
 }

 .actionButton>img,
 .bulletImage,
 .gun-image {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
     max-height: 100%;
 }

 .meta {
     display: flex;
     justify-content: space-between;
     gap: 1rem;
 }

 .actionButton {
     width: 100%;
     background-color: transparent;
     border: none;
 }

 .actionButton:disabled>img {
     width: 100%;
     opacity: 20%;
 }

 #feedback {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.5s ease;
     z-index: 9999;
 }

 #feedback.show-success {
     background-color: var(--quinary-color);
     opacity: 0.3;
 }

 #feedback.show-error {
     background-color: var(--senary-color);
     opacity: 0.3;
 }