*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}
body { background: #fafafa; }

.wrapper {
  display: grid;
  gap: 2rem;
  place-items: center;
  place-content: center;
  min-height: 100vh;
}

/* Prep code */
.container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  place-content: center;
  justify-content: center;
  background-color: #fafafa;
}

button {
  font: inherit;
  border: none;
  background-color: white;
  font-size: 2.5rem;
  padding: .3em 1em;
  cursor: pointer;
  position: relative;
  transition: all 250ms cubic-bezier(0.99,-0.14, 0.05, 1.07);
}

button:is(:hover, :focus){
  transform: translate(10px, 10px);
  box-shadow: 0px 0px #00214d;
}

.success {
  background-color: hsl(171 100% 46.1%);
  color: hsl(171 100% 13.1%);
  box-shadow: 10px 10px hsl(171 100% 13.1%);
}

.warning {
  background-color: hsl(350 100% 66.5%);
  color: hsl(350 100% 13.5%);
  box-shadow: 10px 10px hsl(350 100% 13.5%);
}

.info {
  background-color: hsl(51 97.8% 65.1%);
  color: hsl(51 97.8% 12.1%);
  box-shadow: 10px 10px hsl(51 97.8% 12.1%);
}