/* src/styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var( --bg, url("./media/circle-blues.png") lightgray 0% 0% / 300px 300px repeat );
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  background: none;
}
@media screen and (max-width: 768px) {
  img.article-img {
    width: 128px;
  }
}
img.mt-0 {
  margin-top: 0.3rem;
}
img.whiteBoard {
  border: 8px solid #6f7a83;
  padding: 20px;
  box-shadow: 4px 4px 0px 0px #000;
  background: white;
}
img.invert {
  filter: invert(1);
}
img.blackBoard {
  border: 8px solid #080a19;
  box-shadow: 4px 4px 0px 0px #ffffff;
  background: none;
}
h1,
h2,
h3,
h6 {
  text-transform: lowercase;
}
h1 {
  font-family: "IBM Plex Mono";
  font-size: 6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 6rem;
  letter-spacing: -0.18rem;
  color: var(--text-color, #080a19);
  background: none;
  margin: 3rem 0 1.5rem 0;
}
h1.mt-1 {
  margin-top: 1rem;
}
h2 {
  font-family: "IBM Plex Mono";
  font-size: 3.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 4rem;
  letter-spacing: -0.1rem;
  color: var(--text-color, #080a19);
  background: none;
  margin-top: 4rem;
  margin-bottom: 0.75rem;
}
h3.mt-0 {
  margin-top: 0rem;
}
h3 {
  font-family: "IBM Plex Mono";
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem;
  letter-spacing: -0.05rem;
  color: var(--text-color, #080a19);
  background: none;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}
h6 {
  font-family: "IBM Plex Mono";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.0125rem;
  color: var(--text-color, #080a19);
  background: none;
  margin-top: 2rem;
}
p {
  font-family: "IBM Plex Mono";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  letter-spacing: -0.0125rem;
  color: var(--text-color, #080a19);
  background: none;
}
p.article {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: var(--font-weight, 500);
  letter-spacing: 0;
  color: var(--text-color, #080a19);
  background: none;
  font-size: 1.25rem;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  p.article {
    font-size: 1rem;
    line-height: 1.5;
  }
}
p.mb-2 {
  margin-bottom: 2rem;
}
p.highlight {
  display: block;
  background: #000000;
  color: #6ffa1e;
  padding: 0.2rem 1rem;
  border-left: 2px solid #6ffa1e;
  margin: 2rem 0;
}
mark {
  color: #000000;
  background: rgba(111, 250, 30, 0.6);
  padding: 0rem 0.5rem;
}
em {
  font-style: normal;
  color: #3A94DE;
  font-weight: 500;
  background: none;
  letter-spacing: 0.02rem;
}
button {
  cursor: pointer;
  background: #000000;
  padding: 4px 8px;
  margin: 20px 10px 10px 10px;
  box-shadow: 4px 4px 0px 0px white;
  border: none;
  font-family: "IBM Plex Mono";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  letter-spacing: -0.0125rem;
}
button.next {
  color: #6ffa1e;
  box-shadow: 4px 4px 0px 0px #6ffa1e;
}
button.back {
  color: white;
}
s {
  background: none;
}
small {
  font-family: "IBM Plex Mono";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.00875rem;
  color: #080a19;
  background: none;
}
a {
  background: none;
  color: rgb(54, 54, 255);
}
blockquote {
  font-family: "IBM Plex Mono";
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.0125rem;
  color: var(--text-color, #080a19);
  background: none;
  border-left: 3px solid var(--text-color, #080a19);
  padding-left: 1rem;
  margin: 2rem 0;
}
code {
  display: block;
  background: #000000;
  font-family: "IBM Plex Mono";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0.02rem;
  color: #6ffa1e;
  padding: 0.2rem 0.4rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
code::selection {
  background-color: rgba(111, 250, 30, 0.2);
}
ul,
ol {
  font-family: "IBM Plex Mono";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.0125rem;
  color: var(--text-color, #080a19);
  background: none;
  margin: 1rem 0;
  padding-left: 2rem;
}
li {
  background: none;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
}
strong {
  background: none;
}
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
    line-height: 3rem;
  }
  h2 {
    font-size: 2rem;
    line-height: 2rem;
  }
  h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  p {
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: -0.0125rem;
  }
  blockquote {
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: -0.0125rem;
  }
  @media (max-width: 440px) {
    h1 {
      font-size: 2.5rem;
      line-height: 2.5rem;
    }
  }
  ul,
  ol,
  li {
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: -0.0125rem;
  }
}
.traffic-lights {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
svg.traffic-lights-svg {
  background: none;
}
.hit-area {
  cursor: pointer;
  pointer-events: all;
}
.blackened-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.articles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--articles-background-color, #c6c8c8);
}
@keyframes changeAlien {
  0% {
    content: url("./media/alien1.png");
  }
  33.33% {
    content: url("./media/alien2.png");
  }
  66.66% {
    content: url("./media/alien3.png");
  }
}
.alien-image {
  width: 300px;
  height: 300px;
  object-fit: contain;
  margin: 20px auto;
  display: block;
  animation: changeAlien 3s infinite steps(1);
}
@keyframes changeLemon {
  0%, 20% {
    content: url("./media/lemon1.png");
  }
  25%, 45% {
    content: url("./media/lemon2.png");
  }
  50%, 70% {
    content: url("./media/lemon3.png");
  }
  75%, 95% {
    content: url("./media/lemon4.png");
  }
}
.lemon-animation {
  width: 300px;
  height: 300px;
  object-fit: contain;
  margin: 20px auto;
  display: block;
  animation: changeLemon 2s infinite steps(1);
}
.game-of-life-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  width: 100%;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */