/* Minimalny reset  */
html {
  font-size: 16px; /* bazowy rozmiar czcionki */
  font-family: system-ui, sans-serif; /* font systemowy */
  line-height: 1.5; /* lepsza czytelność */
}
body {
  margin: 1rem;
  padding: 0;
}

a {
  color: #0066cc; /* niebieski kolor linków */
  text-decoration: none; /* bez podkreślenia */
  font-size: 1.4rem;
}
a:hover {
  text-decoration: underline; /* podkreślenie przy najechaniu */
}

#add-square,
#add-circle {
  width: 100%;
  height: 54px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 16px;
  border: 1px solid lightgray;
  cursor: pointer;
}

#container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 64px;
  background-color: rgba(247, 247, 247, 0.096);
  padding: 48px;
  border-radius: 16px;
  border: 1px solid rgb(231, 231, 231);
}

.shape {
  width: 64px;
  height: 64px;
  cursor: pointer;
}

.circle {
  border-radius: 100%;
}

.actions {
  display: flex;
  gap: 48px;
  justify-content: center;
  margin-bottom: 64px;
}