.intro-index-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-right:20px;
}

.intro {
  flex: 2;
}

.page-index-box {
  flex: 1;
  border: 2px dashed var(--stroke);
  padding: 12px 18px;
  border-radius: 6px;
}

.page-index-box h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.page-index-box ol {
  margin: 0;
  padding-left: 20px;
}

strong {
  font-weight:500;
  color:var(--header);
}

code {
  font-family: "Share Tech Mono", ui-monospace, Consolas, monospace;
}

.code-container {
  background-color: var(--bg);
  color: var(--font);
  margin: 20px 20px 0 20px;
  text-align: left;
  padding: 20px;
  overflow-x: auto;
  font-family: "Share Tech Mono", ui-monospace, Consolas, monospace;
}

.code-container pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.resource-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.resource-flex img {
  flex-shrink: 0;
  margin-left:25px;
}

p.info-text {
  text-align:left;
  margin-left:5px;
}

p.tutorial-text {
  text-align:left;
  margin-left:5px;
  line-height:21px;
  margin-bottom:0;
}

/* RAINBOW DEMO TEXT LINK */
  span.rb-demo {
background: linear-gradient(
  80deg,
  #f13737 12.5%,    /* Red */
  #ee9530 0 25%,    /* Orange */
  #ecec3b 0 37.5%,  /* Yellow */
  #47ee47 0 50%,    /* Green */
  #47e7e7 0 62.5%,  /* Cyan */
  #3232eb 0 75%,    /* Blue */
  #622ae6 0 87.5%,  /* Purple */
  #f14fc9 0 100%    /* Pink */
);
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s linear infinite;
  width: fit-content;
  display: inline-block;
}

  span.rb-demo:hover {
background: linear-gradient(
  80deg,
  #ffa6a6 12.5%,    /* Red */
  #ffcf99 0 25%,    /* Orange */
  #ffffbd 0 37.5%,  /* Yellow */
  #b8ffb8 0 50%,    /* Green */
  #bdffff 0 62.5%,  /* Cyan */
  #9cb9ff 0 75%,    /* Blue */
  #c294ff 0 87.5%,  /* Purple */
  #ffb5d5 0 100%    /* Pink */
);
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s linear infinite;
  width: fit-content;
  display: inline-block;
}

:target {
  scroll-margin: 30px;}
 
 @media (max-width: 650px) {
  .intro-index-wrapper {
    flex-direction: column;
  }
}

  
@media (max-width: 500px) {
  .resource-flex {
    flex-direction: column;
    align-items: flex-start;
  }
}