/* we do a lil borrowing from iostpa.com */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #232136;
    color: #e0def4;
    font-family: "Andika", sans-serif;
    font-weight: 400;

    display: flex;
    justify-content: flex-start;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content {
  max-width: 45rem; 
  width: 90%;
  min-height: 12rem; 
  text-align: center;
}

h1 {
    margin-bottom: 0.25px;
}

h2 {
    margin-top: 0;
}

.switcher {
  display: flex;
  gap: 4px;
  margin-top: 2rem;
}

.switcher .button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0def4;
  text-decoration: none;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.switcher .button:hover {
  background: #2a2839;
}

.switcher svg {
  width: 1.1rem;
  height: 1.1rem;
}

p {
  align-items: center;
  text-align: center;
}

.content a::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.25em;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.content a { --icon: url("/assets/globe.svg"); } /* for most websites this should work */
.content a[href*="github.com"]     { --icon: url("/assets/github.svg"); } /* for github links */