Step2 CSS

step2.css

.callout[data-callout="wordcloud"] {
  --callout-color: 8, 149, 251;
}

.callout[data-callout="wordcloud"] .callout-title{
  display:none;
}

.callout[data-callout="wordcloud"] .callout-content{
  background-color: white !important;
  border-left: 0px !important;
  padding-top: 2rem;
  /* padding-bottom: 3rem; */
}

.callout[data-callout="wordcloud"] .callout-content p{
  background-color: white !important;
}

.callout[data-callout="wordcloud"] a{
  color: inherit !important;
  text-decoration: none;
}

.callout[data-callout="wordcloud"] a:hover{
  color: inherit !important;
  text-decoration: none;
}

.cloud1{ --size : 3;}
.cloud2{ --size : 5;}
.cloud3{ --size : 8;}
.cloud4{ --size : 10;}
.cloud5{ --size : 11;}
.cloud6{ --size : 12;}
.cloud7{ --size : 14;}


.callout[data-callout="wordcloud"] .callout-content .block-language-dataviewjs.node-insert-event > p > span{
  display: flex;
  max-width: 700px;
  margin: auto;
  /* padding: 0 10%; */
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  justify-content: center;
  line-height: 2.5rem;
  font-weight: bold;
}

.callout[data-callout="wordcloud"] span.cloud a{
  color: #a33 !important;
  display: inline-block;
  font-size: 1.5rem;
  padding: 0.1em 0.2em;
  text-decoration: none;
  position: relative;
  font-size: calc(var(--size) * 0.35rem + 0.8rem);
  transition: box-shadow 0.2s;
}

.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+1) a { color: #63b1ce  !important}
.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+2) a { color: #8057cd  !important}
.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+3) a { color: #cc964b  !important}
.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+4) a { color: #c2523e  !important}
.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+5) a { color: #ac44b5  !important}
.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+6) a { color: #435ebe  !important}
.callout[data-callout="wordcloud"] span.cloud:nth-child(7n+7) a { color: #4eb748  !important}


.callout[data-callout="wordcloud"] a:hover {
  box-shadow: inset 0 -100px 0 #dcc89687;
  /* border-radius: 5px; */
}

.callout[data-callout="wordcloud"] .cloud-title {
  margin: 50px auto;
  color: #3949ddd0;
  font-style: italic;
  font-size: 2rem;
}

.callout[data-callout="wordcloud"] .cloud-title mark {
  color: #3949dd;
  box-shadow: inset 0 -0.8rem 0 var(--color-highlight);
}