@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

code {
  /* background-color: #41403f;*/
  color: #d900b9;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 0;
  width: fit-content !important;
  display: block;
  margin-left: auto;
  position: relative;
  margin-top: -28px;
  transform: translateY(3vw);
  z-index: 1;
  padding: 0;
  padding-left: 1em;
  padding-right: 2.5em;
  margin-right: -1em;
  font-family: "Gochi Hand";
  font-weight: 400;
}

code:before {
  display: inline-block;
  /* font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  content: "\f063";*/
  content: "";
  background-image: url('data:image/svg+xml;utf8,%3Csvg style="fill: none; stroke: %23d900b9; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 7px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.01 119.59"%3E%3Cpath d="m5.6,114c24.5-12.1,43.4-22.9,55-47.7,2.9-6.3,5-14.3,2.6-20.2-7.6-13.1-23.6,3.9-10.8,19.6,5.2,6.4,11.1,10.9,19.3,10,11.4-1.2,26.4-12.2,28.4-30.2,1.7-15.3-2-29-9-42" /%3E%3Cpath d="m13.6,97c-3,3.1-8.2,14.3-10.1,18.1"/%3E%3Cpath d="m27.5,115c-6.1,1.2-17.9,1.6-24,.2"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  width: 27px;
  height: 21px;
  background-size: 27px auto;
  position: absolute;
  bottom: -15px;
  transform: rotate(-2deg);
  z-index: 0;
  overflow: hidden;
  background-position: left bottom;
}

code span { display: none; }

code.white {
  color: white;
}
code.white:before {
  background-image: url('data:image/svg+xml;utf8,%3Csvg style="fill: none; stroke: %23FFF; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 7px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.01 119.59"%3E%3Cpath d="m5.6,114c24.5-12.1,43.4-22.9,55-47.7,2.9-6.3,5-14.3,2.6-20.2-7.6-13.1-23.6,3.9-10.8,19.6,5.2,6.4,11.1,10.9,19.3,10,11.4-1.2,26.4-12.2,28.4-30.2,1.7-15.3-2-29-9-42" /%3E%3Cpath d="m13.6,97c-3,3.1-8.2,14.3-10.1,18.1"/%3E%3Cpath d="m27.5,115c-6.1,1.2-17.9,1.6-24,.2"/%3E%3C/svg%3E');
}

.sidebar-right { position: relative; }
.sidebar-right code {
/*  position: absolute;*/
  height: fit-content;
}


code.hero {
  margin-right: 2em;
  margin-top: -7px;
  height: 0;
}

code.hero:before {
  transform: rotate(65deg);
  top: -20px;
  bottom: auto;  
}


header {
  margin-bottom: 3.5%; 
  background-image: linear-gradient(130deg, #55416a, #2c3861); 
  text-align: center;
}

header h1 {
  margin: 0; 
  padding: 1em 0 1.5em; 
  color: white;
}

.section-cards-overlay:has(.cell-1) .cell-1:not(:first-of-type) { display: none; }
.section-cards-overlay:has(.cell-2) .cell-2:last-of-type { display: none; }

.section-cards:has(.cell-1) .cell-1:not(:first-of-type) { display: none; }
.section-cards:has(.cell-2) .cell-2:last-of-type { display: none; }