:root {
  --background-color: hsl(40, 100%, 96%);
  --main-title-color: hsl(0, 100%, 0%);
  --primary-title-color: hsl(118, 63%, 30%);
  --secondary-title-color: hsl(212, 78%, 45%);
  --button-color: hsl(212, 78%, 45%);
  --button-hover: hsl(229, 92%, 35%);
  --button-activation: hsl(229, 98%, 35%);
  --font-color: hsl(0, 100%, 0%);
  --anchor-color: hsl(0, 0%, 22%);
  --anchor-activation: hsl(15, 100%, 10%);
  --along-trantition: 0.3s;
}

[data-theme="dark"] {
  --background-color: hsl(234, 36%, 17%);
  --main-title-color: hsl(0, 0%, 100%);
  --primary-title-color: hsl(235, 55%, 43%);
  --secondary-title-color: hsl(236, 67%, 48%);
  --button-color: hsl(240, 95%, 42%);
  --button-hover: hsl(240, 85%, 57%);
  --button-activation: hsl(240, 81%, 25%);
  --font-color: hsl(235, 37%, 88%);
  --anchor-color: hsl(235, 31%, 58%);
  --anchor-activation: hsl(216, 62%, 80%);
}

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background: var(--background-color);
  color: var(--font-color);
  transition: background-color var(--along-trantition) ease,
    color var(--along-trantition) ease;
}
header,
main,
footer {
  padding: 1em;
  margin: 0;
}
section {
  margin: 1em;
}
h1 {
  color: var(--main-title-color);
}
h2 {
  color: var(--primary-title-color);
}
h3 {
  color: var(--secondary-title-color);
}

a {
  background: var(--background-color);
  color: var(--anchor-color);
  text-decoration: none;
}
a:hover {
  background-color: var(--anchor-color);
  color: var(--background-color);
  text-decoration: double;
}
a:visited {
  background: var(--background-color);
  color: var(--anchor-color);
}
a:active {
  background: var(--anchor-activation);
}

button{
  background: var(--button-color);
  color: var(--font-color);
  border: none;
  border-radius: 4px;
  width: max-content;
  height: max-content;
  transition: padding var(--along-trantition) ease, background-color var(--along-trantition) ease;
}

button:hover{
  background: var(--button-hover);
  padding: 5px 10px;
}


@media print {
  button{
    display: none;
  }
}

h1,
h2,
h3,
h4,
h5,
pre,
ul,
li {
  margin: 0.5rem;
}