@import url("https://fonts.googleapis.com/css?family=Open+Sans");

body {
  background: #fafafa;
  padding: 0 1rem;
  margin: 0;
  font-family: "Open Sans", sans-serif, Arial;
}

main {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

p {
  margin: 1rem 0;
}

h1 {
  font-size: 3rem;
}
h2 {
  margin-top: 4rem;
  font-size: 2rem;
}

h3 {
  margin-top: 3rem;
  font-size: 1.5rem;
}

b {
  font-weight: 900;
}

body pre[class*="language-"] {
  margin: 2rem 0;
}

div[data-pel] {
  margin: 2rem 0;
}

footer {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
footer a {
  color: #999;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  /* background-color: blue; */
  border-radius: 99rem;
  transition: background ease 0.3s;
}

footer span {
  color: #0003;
  transition: color ease 0.3s;
}
footer a:hover {
  background-color: #3331;
}

footer a:hover span {
  color: rgb(255, 146, 146);
}

footer span {
  font-size: 0.7rem;
}

.note {
  background-color: #daeaf0;
  border-radius: 4px;
  /* border: 1px solid #5a8ca1; */
  color: #5a8ca1;
  padding: 1rem;
  display: flex;
  /* flex-direction: column; */
  gap: 1rem;
}

.note .icon {
  flex-shrink: 0;
  flex-grow: 0;
  width: 24px;
  height: 24px;
  background-color: #5a8ca1; /* Color of the icon */
  mask-image: url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-info-square-rounded%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%209h.01%22%20%2F%3E%3Cpath%20d%3D%22M11%2012h1v4h1%22%20%2F%3E%3Cpath%20d%3D%22M12%203c7.2%200%209%201.8%209%209s-1.8%209%20-9%209s-9%20-1.8%20-9%20-9s1.8%20-9%209%20-9z%22%20%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.eventLabelsPreview {
  padding: 0;
  li {
    display: inline-flex;
    padding: 0.2rem 0.5rem 0.25rem 0.5rem;
    border-radius: 0.2rem;
    color: white;
    /* text-transform: uppercase; */
    font-size: 0.8rem;
  }
}