@charset "UTF-8";

:root {
  --bg-color: #e8fff4;
  --text-color: #3a31ee;
  --border-color: #2ac0b3;
  --duration: 700ms;
  --hover-color: white;
  --hover-bg-color: rgb(133, 154, 144);
  --focus-color: rgb(255, 225, 170);
  --focus-bg-color: rgb(14, 115, 255);
  --active-color: rgb(72, 246, 52);
  --active-bg-color: rgb(148, 55, 255);
}
body{
  background-color: var(--bg-color);
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1024px;
  margin: 50px auto;
  padding: 30px;
  border: 3px solid var(--border-color);
  color: var(--text-color);
}
.container li {
  width: 100px;
  height: 100px;
  border: 2px solid var(--border-color);
}
.container li button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: background-color var(--duration), color var(--duration);
}
.container li[data-type="hover"] button:hover {
  color: var(--hover--bg-color);
  background-color: var(--hover-bg-color);
}
.container li[data-type="focus"] button:focus {
  color: var(--focus-color);
  background-color: var(--focus-bg-color);
}
.container li[data-type="active"] button:active {
  color: var(--active-color);
  background-color: var(--active-bg-color);
}