/* ITCSS */

/* Settings */
:root {
  --main-bg-color: #eee;
  --main-text-color: #666;
  --main-text-weight: 300;
  --main-text-size: 22px;
  --main-text-font-family: Ubuntu, "Segoe UI", Verdana, sans-serif;
  --main-shadow-color: #ddd;
  --card-bg-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: #111;
    --main-shadow-color: #111;
    --main-text-color: #eee;
    --card-bg-color: #222;
  }
}

/* Tools */

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon {
  height: 1.2em;
  vertical-align: text-top;
}

.note {
  font-size: 0.6rem;
}

/* Generic (reset, ...) */

* {
  color: var(--main-text-color);
  font-weight: var(--main-text-weight);
}
html {
  font-family: var(--main-text-font-family);
  font-size: var(--main-text-size);
}
h1 {
  margin: 0;
}

/* Elements */

header {
  margin: 1.2rem 0;
}
header > h1 {
  font-size: 1.9em;
}

body {
  color-scheme: light dark;
  padding: 0;
  margin: 0;
  display: grid;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  text-align: center;
  height: 100vh;
  background-color: var(--main-bg-color);
}

footer {
  margin: 1.2rem 0;
}

/* Components */

.💳 {
  padding: 30px;
  margin: 1em;
  border-radius: 9px;

  background-color: var(--card-bg-color);
  box-shadow: 5px 5px 10px var(--main-shadow-color);
  max-width: 220px;
}

.❤ {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20px);
  justify-content: center;
  align-content: center;
  gap: 1rem;
}

.🔗 {
  font-size: 0.6rem;
  color: #999;
}
.🔗 > li {
  display: inline;
}
.🔗 > li:not(:last-child)::after {
  content: " |";
}