:root {
  /* Global variables */
  --border-size: 0.125rem;
  --duration: 250ms;
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --font-family: 'Poppins', sans-serif;
  --color-primary: white;  /* Default button background */
  --color-secondary: red;   /* Active button background */
  --color-tertiary: dodgerblue; /* Hovered button color */
  --shadow: rgba(0, 0, 0, 0.1);
  --space: 0.5rem;
}

* {
  box-sizing: border-box;
}

body {
  height: 50vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: calc(var(--space) * 2);
  max-width: 500px;
}

/* Multi-button container */
.multi-button {
  display: flex;
  width: 60%;
  box-shadow: var(--shadow) 4px 4px;
  border-radius: 15px;
  align-self: center;
  gap: 15px; /* Space between buttons */
}

/* Default button style */
.multi-button button {
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  padding: calc(var(--space) / 1.125) var(--space) var(--space);
  border: var(--border-size) solid black;
  color: black;
  background-color: var(--color-primary); /* Default white */
  font-size: 0.85rem;
  font-family: var(--font-family);
  text-transform: lowercase;
  text-shadow: var(--shadow) 4px 4px;
  transition: flex-grow var(--duration) var(--ease), background-color var(--duration) var(--ease);
  border-radius: 15px;
}

/* Hover effect */
.multi-button button:hover {
  flex-grow: 2;
  color: white;
  background-color: var(--color-tertiary); /* Blue when hovered */
  border-radius: 15px;
}

/* Active button (when clicked) */
.multi-button button.active {
  background-color: var(--color-secondary); /* Red when active */
  color: white;
}

/* Prevent outline from affecting layout */
.multi-button button:focus {
  outline: var(--border-size) dashed var(--color-primary);
  outline-offset: calc(var(--border-size) * -3);
}

/* Reset styling when focus is removed */
.multi-button:hover button:focus:not(:hover) {
  flex-grow: 1;
  color: black;
  background-color: var(--color-primary);
  outline-color: var(--color-tertiary);
}