* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --PALLETE-BG-1: #1b0682;
  --PALLETE-BG-2: #4285f7;
  --PALLETE-BG-3: aqua;
  --PALLETE-BG-GT: linear-gradient(var(--PALLETE-BG-1), var(--PALLETE-BG-2));
}

:is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
}

h1 {
  font-size: 1.3em;
}

h2 {
  font-size: 1em;
  color: gray;
}

ul {
  padding: 0 1em;
}

header {
  height: 8em;
  background: var(--PALLETE-BG);
}

main {
  transform: translateY(-7em);
  background-color: var(--PALLETE-BG-3);
  border-radius: 2em;
  margin: 1em;
  padding: 1em;
}

footer {
  text-align: center;
}

body {
  background-color: var(--PALLETE-BG-2);
}

.void {
  width: auto;
  height: 2em;
}

.badge {
  margin: 1.2em;
  align-self: center;
}

.card-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  gap: 2em;
  justify-items: center;
  align-items: start;
}

.preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: white;
  border: solid 0.5em black;
}

.box-pract {
  border: solid;
  border-color: black;
  border-radius: 0.6em;
  padding: 1em;
  aspect-ratio: 1 / 1;
}