@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Playpen+Sans:wght@100..800&display=swap');

* {
  box-sizing: border-box;
}

body {
  --ColorForeground: blue ;
  --ColorBackground: white ;
  --ColorAlternative: gray ;
  --WidthMax: 900px;
  --WidthActive: var(--WidthMax) ;
  --WidthMin: 400px;
  --Gap: 20px ;

  background-color: var(mainColor);
  font-family: "Playpen Sans", Arial, Helvetica, sans-serif;
  max-width: var(--WidthActive);
  min-width: var(--WidthMin);
  margin: auto;
}

header {
  background-color:var(--ColorForeground);
  font-size: 40px;
  font-weight:normal ;
  letter-spacing: 0.5rem;
  padding: var(--Gap);
  color: var(--ColorBackground);
}

footer {
  font-size: 50%;
  font-family: 'M PLUS 1 Code', 'Courier New', Courier, monospace;
  text-align: right;
  border-top: 3px solid var(--ColorForeground);
}

h1 {
  color: var(--ColorAlternative);
  padding-left: var(--Gap);
}