.xcolorsec9767 {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 gap: 1rem;

 .csscolor707 {
  font-weight: bold;
 }

 .opacity219 {
  margin: 0;
  padding: 0;
  background-image: url("i/tile_B.png");
  .opacity087 {
   display: block;
   margin: 0;
   padding: 0;
   font-size: 2rem;
   font-weight: bold;
   color: white;
   opacity: 0.4;
  }
 }
}

.background0432 {
 display: flex;
 flex-wrap: wrap;

 align-items: center;

 justify-content: space-evenly;

 > * {
  display: inline-block;
  border-radius: 0.5rem;
  margin: 0.3rem;
  padding: 0.3rem;
 }

 .xbackground7575 {
  vertical-align: middle;
  height: 9rem;
  background-image: url("i/tile_A.png");

  color: white;
  background-color: black;
 }

 .lineargrad431 {
  padding: 1rem;
  background-image: linear-gradient(-90deg, #895aa2, #90bb6f, #ccff77);
 }

 .conicg0336 {
  width: 7rem;
  height: 7rem;
  text-align: center;
  border-radius: 50%;
  background-image: conic-gradient(red, white);
 }

 .replg6046 {
  background-image: repeating-linear-gradient(45deg, gold 0, gold 15px, white 15px, white 30px);
  height: 50px;
  border: solid 1px grey;
 }

 .xradialgrad027 {
  padding: 1rem;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, #1d6c28, #dc7648, #24fdf4);
 }
}

.xtable-bvbK5 {
 display: inline-block;
 margin: 0.5rem;
}

div.xtable-bvbK5b {
 display: table-row;
}

div.xtable-bvbK5c {
 display: table-cell;
 border: solid 1px silver;
 padding: 0.5rem;
}

.roundcorner991 {
 display: inline-block;
 border: solid 6px grey;
 padding: 0.5rem;
 vertical-align: middle;
 border-radius: 2rem;
 border-top-right-radius: 0;
 text-align: center;
}

.textdecofcbYy {
 display: flex;

 flex-wrap: wrap;
 gap: 1rem 2rem;

 .xtextshadow533 {
  display: inline-block;
  margin: 0.5rem;
  font-size: 1.7rem;
  text-shadow: 3px 3px 2px blue, 10px 10px 4px red, 20px 20px 7px green;
 }

 .outlQ3JmC {
  white-space: nowrap;
  margin: 1rem;
  padding: 0.5rem;
  color: white;
  text-shadow: 1px 0px 1px black, -1px 0px 1px black, 0px 1px 1px black, 0px -1px 1px black, 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
 }

 .underline_64042 {
  text-decoration: underline;
 }
 .overline_61202 {
  text-decoration: overline;
 }
 .line_through_45913 {
  text-decoration: line-through;
 }
 .bold_59472 {
  font-weight: bold;
 }
 .xletterspacing43 {
  letter-spacing: 8px;
 }
 .xwordspacing82 {
  word-spacing: 8px;
 }

 .xfirstlet353 {
  a:first-letter {
   font: 3rem serif;
   color: red;
  }
 }

 .xfirstline986 {
  width: 22ch;
  a:first-line {
   color: red;
  }
 }

 .before-after-096 {
  display: inline-block;
  margin: 0.5rem;
  a:before {
   font-family: serif;
   content: "“";
   font-size: 50px;
   color: red;
  }
  a:after {
   font-family: serif;
   content: "”";
   font-size: 50px;
   color: red;
  }
 }
}

.anime65439 {
 position: relative;
 display: inline-block;
 margin: 20px;
}

.heartbox04040 {
 position: absolute;
 bottom: 4px;
 right: 0px;
}

.heart34860 {
 animation: heart56224 1s 0s 60;
}

@keyframes heart56224 {
 0% {
  font-size: 1rem;
  color: red;
 }

 50% {
  font-size: 9rem;
  color: red;
  opacity: 0.7;
 }

 100% {
  font-size: 1rem;
  color: red;
 }
}

.imgrollover38437 {
 display: inline-block;
 margin: 0.5rem;
 padding: 2px;
 color: white;
 font-size: 1.5rem;
 font-weight: bold;
 max-width: 128px;
 background-image: url("i/tile_A.png");
}

.imgrollover38437:hover {
 background: url("i/tile_B.png"), brown;
}

.transform2d242 {
 display: inline-block;
 margin: 30px;
 font-size: 1.5rem;
 transform: rotate(-14deg) skew(30deg);
}

.transition124 {
 display: table;
 padding: 10px;
 margin: 0.5rem;
 border: solid 5px red;
 border-radius: 200px;
 box-shadow: 0 0 99px grey;
 min-width: 150px;
 transition: box-shadow 1s, min-width 1s;
 touch-action: manipulation;
}

.transition124:hover,
.transition124:active {
 min-width: 300px;
 box-shadow: 0px 0px 100px red;
}

.layout-yc9k {
 display: inline-block;
 border: solid 1px grey;
 padding: 0;
 margin: 0;
 width: 280px;
 max-width: 280px;
}

.display-kxmq {
 display: inline-block;
 border: solid 2px blue;
 padding: 0.5rem;
 margin: 0.5rem;
}

.layout-ygz8 {
 display: inline-block;
 position: relative;
 top: 20px;
 left: 60px;
 padding: 1rem;
 margin: 0;
 border: solid 1px grey;
 background-color: hsl(143, 19%, 43%, 0.2);
}

.posfixed871 {
 position: fixed;
 padding: 0.5rem;
 right: 5px;
 top: 100px;
 border: solid 3px grey;
}

.margin-8959 {
 display: inline-block;
 width: fit-content;
 font-size: 1rem;
 border: none;
 background-color: silver;
 color: black;
 margin: 0.5rem;
 padding: 0 1rem 1rem 1rem;
}

.padding-3599 {
 outline: solid 1px black;
 background-color: bisque;
 color: black;
 margin: 0;
 padding: 0 1rem 1rem 1rem;
}

.text-1580 {
 font-size: 1rem;
 border: none;
 background-color: white;
 color: black;
 margin: 0;
 padding: 0;
}

.boxshadow-StRM5 {
 display: inline-block;
 border-radius: 9px;
 padding: 4px;
 margin: 40px;
 box-shadow: 8px 6px 13px 8px red, -16px 12px 20px 16px yellow, 48px 36px 71px 48px hsla(168, 39%, 21%, 0.35);
}

.border-xZz74 {
 display: inline-block;
 border: dotted 4px red;
 padding: 0.5rem;
 margin: 0.5rem;
}

.outline-QJv7x {
 display: inline-block;
 outline: solid 3px red;
}

.boxsizing-FWnbY {
 display: inline-block;
 border: solid 1px grey;
 margin: 0.5rem;
 padding: 0.5rem;
 white-space: nowrap;
}

.centerG3yb8 {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

.centerG3yb8 {
 display: flex;
 width: 9rem;
 height: 4rem;
 align-items: center;
 justify-content: center;
 border: dotted 4px red;
}

.textwrap50001 {
 display: inline-block;
 margin: 0.5rem;
 border: solid 1px silver;
}

.align75700 {
 display: inline-block;
 text-align: right;
 width: 8rem;
 border: solid 1px silver;
}

.overflow454 {
 display: inline-block;
 margin: 20px;
 overflow: auto;
 width: 15rem;
 height: 5rem;
 font-size: 1rem;
}

.xflowlist08 {
 display: inline-block;
 margin: 0.5rem;
}

ul.liststar882 {
 list-style-type: "✿ ";

 li {
  line-height: 1;
 }
 li::marker {
  line-height: 1;
  font-size: 1.5rem;
  color: orange;
 }
}

.textflow4600 {
 display: inline-block;
 font-size: 1rem;
 max-width: 150px;
}

.textflow7395 {
 float: left;
 margin: 0.5rem;
}

.XdNgN {
 display: inline-block;
}

.zindex67-outer, .zindex67-inner {
 display: inline-block;
 width: 100px;
 height: 60px;
 margin: 0;
}

.zindex67-outer {
 position: relative;
 background-color: salmon;
}

.zindex67-inner {
 position: absolute;
 top: 20px;
 left: 20px;
 background-color: gold;
 opacity: 0.7;
}

.textoverimg55 {
 display: inline-block;
 margin: 0.5rem;
}

.flowAround66320 {
 display: inline-block;
 margin: 0.5rem;
}

.xfontfa {
 display: inline-block;
 font-family: cursive;
 font-family: "Times New Roman", Tinos, "Liberation Serif", serif;
 font-size: 2rem;
}

.webfont3525 {
 display: inline-block;
 font-family: "Courier New", Cousine, "Liberation Mono", monospace;
 font-size: 1.5rem;
}

.fontsize1336 {
 font-size: 2rem;
}

.xmulticol {
 font-size: 0.6rem;
 width: 350px;
 column-count: 2;
 border: solid 2px grey;
 padding: 0.5rem;
}

.xflexbox7025 {
 display: flex;
 border: solid 1px red;
 justify-content: space-evenly;
}

.xitem951 {
 border: solid 1px green;
 padding: 10px;
 margin: 6px;
}

.pieszv8p {
 display: inline-flex;

 align-items: center;
 justify-content: center;

 margin: 0.5rem;
 padding: 0.5rem;
 width: 90px;
 height: 90px;
 border-radius: 50%;
 color: black;
 text-shadow: 0px 0px 3px white;
 background-image: conic-gradient(red 0deg 80deg, yellow 80deg 275deg, green 275deg 340deg, blue 340deg 360deg);
}

.spinYwmDC {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: conic-gradient(transparent, green);

 animation: spin5511 1s linear 200;
}

@keyframes spin5511 {
 to {
  transform: rotate(360deg);
 }
}