[data-termynal]:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /* A little hack to display the window buttons in one pseudo element. */
    background: #d9515d;
    -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
            box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
}

[data-termynal]:after {

  border-radius: 4px;
  padding: 45px 5px 5px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.screenshot img {
  display: block;
  border-radius: 2px;
}

.screenshot:before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;

    text-decoration: none;
    transition: all 0.2s ease;
}

.source-card:hover {
    border-color: #0052cc;
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.1);
    transform: translateY(-1px);
}

.source-index {
    min-width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #0052cc 0%, #2684ff 100%);
    color: white;
    border-radius: 4px;
    font-size: 0.6875rem;

        <img src="https://img.shields.io/badge/-000000?style=for-the-badge&logo=x&logoColor=white" alt="X (Twitter)" style="margin: 0 20px;">
    </a>
    <a href="https://www.youtube.com/@GradleInc">
        <img src="https://img.shields.io/badge/-FF0000?style=for-the-badge&logo=youtube&logoColor=white" alt="YouTube" style="margin: 0 20px;">
    </a>
    <a href="https://mastodon.social/@Gradle">

  script.setAttribute("data-button-image-height", "20px");
  script.setAttribute("data-button-image-width", "20px");
  script.setAttribute("data-button-text", "Ask AI");
  script.setAttribute("data-button-text-font-size", "0.5rem");
  script.setAttribute("data-button-text-font-family", "Roboto, sans-serif");

<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
{% endfor %}
{% endif %}

{% if sponsors.silver %}

### Silver Sponsors

{% for sponsor in sponsors.silver -%}
<a href="{{ sponsor.url }}" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}" style="border-radius:15px"></a>
{% endfor %}
{% endif %}

{% if sponsors.bronze %}

### Bronze Sponsors

        for (dep in platform.uses) {
            node("${platform.id} --> $dep")
        }
    }

    private fun NodeWriter.element(element: ArchitectureElement) {
        println()
        node("${element.id}[\"${element.name} module\"]")
        node("style ${element.id} stroke:#1abc9c,fill:#b1f4e7,stroke-width:2px,color:#000;")
    }

}

.top15 {
	margin-top: 1.5em;
}

.top20 {
	margin-top: 2.0em;
}

.top25 {
	margin-top: 2.5em;
}

.top30 {
	margin-top: 3.0em;
}

.container .text-muted {
	margin: 20px 0;
}

.notification {
	text-align: center;
}

ul.has-error {
	color: #dd4b39 !important;
	list-style-type: none;
	padding: 0;
}

.form-group .has-error + .form-control {

      num: 10,
      lang: $("#langSearchOption").val()
    },
    boxCssInfo: {
      border: "1px solid rgba(82, 168, 236, 0.5)",
      "box-shadow": "0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)",
      "background-color": "#fff",
      "z-index": "10000"
    },
    listSelectedCssInfo: {
      "background-color": "rgba(82, 168, 236, 0.1)"
    },
    listDeselectedCssInfo: {

      num: 10,
      lang: $("#langSearchOption").val()
    },
    boxCssInfo: {
      border: "1px solid rgba(82, 168, 236, 0.5)",
      "box-shadow": "0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)",
      "background-color": "#fff",
      "z-index": "10000"
    },
    listSelectedCssInfo: {
      "background-color": "rgba(82, 168, 236, 0.1)"
    },
    listDeselectedCssInfo: {