.handwritten {
    position: relative;
    color: var(--text-color);
    background: var(--btn-bg);
    padding: 0.75em clamp(1.5em, 6vw, 4em);
    border: 0.15em solid var(--text-color);
    border-radius: 16em 1em 14em 1em / 1em 14em 1em 16em;
    transition: border-color 0.2s ease;
}

.handwritten::before {
    content: "";
    position: absolute;
    inset: -0.4em;
    border: 0.1em solid var(--text-color);
    border-radius: 1em 14em 1em 16em / 16em 1em 14em 1em;
    opacity: 0.4;
    transform: rotate(-1deg);
    pointer-events: none;
}

.handwritten:hover,
.handwritten:hover::before {
    border-color: var(--link-color-hover);
}

.wildflower {
    padding: 44px 90px;
    border-image-slice: 35 29 34 29;
    border-image-width: 35px 29px 34px 29px;
    border-image-repeat: round;
    border-style: solid;
    border-color: transparent;
    image-rendering: pixelated;
    border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAABiBAMAAABuaRZMAAAAD1BMVEUAAAB7p1S1uKa1uKbGKEN07jaiAAAAA3RSTlMA/wPwW2gWAAAEEElEQVR42pyVgYnkMBRDny5TgMQ2cCVkcQPTf1U3wSeMQwB2FWDJW6M431IGnpUH8jPJmCUh/9whLOU3Dtoc/BsHP98+6y8wOE6oQoALDXpflf4BYMFxXVSRgXFc1wnIoSrddaEPp0oAPp6X9QLcKICp8cVLFQAu1o3FAHeKCNOA86NpIVCScJzHRwxIEoOB0hrXeozjdRxjOhgZxZ/7832OgWImBUq72Vie+P0eyxfAjPF6XbZiUUqbGkUQ4MUL6mCYevPm/malAccQId/34PvTlsOiMk4z3zl8AyAR395YwQbgq1QmNPM9i28jkJR4m/oFbDD6Km13FMvNgzId8nDymQ5xqawYECE0k4mM5If0yUZOKA0dmBzaC8VGeWxAjBRTGnkrwdBcGiO3ftcfWlxN74t6rKrUHcR0C9ofrm7QJAHAqzuszKuV8npVDEqHFLVgbneAlXkBCJA7bmwU96DkltntjmFlXkwZNQjEJLS4XmtWd5hSHQRBDSMxWcU1AdfBVHUwzZdY0VdWcd0Moc2hmff0ToJpKS3LzOJq/lOAaHdgZd5GBpn4/x5MlHQPShdItDtVbGFiCKuUIorpHICAgnC7U8mWnIAMq5RWvH1EZUjmcjbFkmLQVkrLtw+5QbGtsEtleykloMXdn2duspPArZTS4w9aInFX9K82M0BxHYaBaMReQLlJ73+6j4P6+K+Ahxo6AEsIVb2yRtJMGSqMRuChOtz5BDUfAHf0qK+J8AGnZzT/aoCTNJ1l5a+bdEdwUVXrw9MfaAFXBsVS9/SHIQJll0DBDk1m/Gp27wFpGPzr85qbETSPaVT1DJlmdgcwu9fAHn6vCHVwhl4RGDh9kIdi5KxUHN3FRYDFwK/qgWHyf4SDmpwIgxNemPsH3OSPv7yvjPJRSABcTZh+QDq4BLgaMf2AK3kXAlwNoB+8ywJSwtUA+gEUhRDD1QD6AfRgoYarAfSDoSi7AVyNoB/MGcgDXA2gH5AH7kJ3me+zuQvqQUnIqaAeqEkxLaKKmoQXBxGgaCBlpKhJ7rf5JTDJ3URaYzmqZjcyIvAyq2ZvYuMbeBOLqtnb4LMlextMqpmNFLnscXRH1eyt+LpXhNJWnFSzN/PqJw3azJNqtjoYOWt1sFfNLyuU5+G2Qum/rWp+faqkJ4JV0t9WNVuprXcPiazU9qrZanGWfavFoJqtWKdgrVi/UM2Q8hvVLOVuxqLcg2rGPRBj5R7sVTMOhhlrB2OrmksuCoUgF6W3qrnk5FCMcnJ6p5rtR8FY95KgmhUBxipCUM1y1TiDXLWgmuXskQc5e0E1y13kLuQuBtUsh1P1wMuomqGKahISJNVspxde2OnNqpnEw02ed6qZcsuOd/3Kdc/O/89/fTj/BeQfHOPms3wI298AAAAASUVORK5CYII=");
}

.notepaper {
  color: black;
  padding: 44px 90px;                                                                                                                            
  border-image-slice: 20 11 20 19 fill;
  border-image-width: 20px 11px 20px 19px;
  border-image-repeat: repeat round;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAABoCAMAAABvw+gRAAAALVBMVEUAAADu7u6qqqqZmZmIiIh3d3e7u7vMzMz////d3d1mZmZVVVX+/v7v7+/w8PCGxkBUAAAAAXRSTlMAQObYZgAAA+lJREFUeNqNWAmC2zAINKeM4u3/n9tYK2yTcdzSY3UwGhAINlkuQiyibzE1MxbTfcbMsq/zAmLmjda30HqVoKAIFzWVqq9TowAo50TRxPQK8PVB6JfN9YT0+KJaOZtqYQAXQMjzArRq01coif1SXJZAtW6RciLy5EqFh/ySyPosiTwQ1nLtmxN0DmIgwCS6mJIbubUHnv/LqASdiHLoQ2j6noGw+yTTj3koM2fiIQsiVjJ+i9Izx8gsN7N4o0c4Wf9l1RSLHTDwbRhU4k3HSuiCorfBe0A8Jw1JvnF1nwD3p3dC+qtvlOOS+/gGaGhxXOGvuCsOlOPGuxmHV8YqVFyGSEZBpM5TbpFC7n59IoTZTnAyJvVAmJSTKgBhmlcF5xXi6oecm43biiyfVvWW88ZhIQ6xq9y6+GG/Wx8t4VAgoBgczq4iKpwFUqAjlPvF3DXHayB8UdaXpc/G0KoSlUlyWHPhNq3iewfynwyCNobTKH+qqUPNKCij+VgYqFSfMWUT8+IrkBHtCIYw05xuP7f1yhyOTNn+lMeViO6g/pCP80XNtTQuviETIQ/PCEOSHA9JXnED0dNMINmgWtCMR3I24ZbocVVo5ERMCDfrTaFElVnIbpVTRKwrL8NEPVQ2uOGs1Natt2h9pmIrRmHnBOHTig0K3PTDupkdWB70J0ktPiOvwj1iGIUtKmnoEvPe5jzc8p0frg8a+shdaxkC526unIdu23Qd8or5mDX104afP9tHRIhmtjdaUQhvl2o3oMsrqBGkGnmdl0PQyE4OrHD81MaAZlpFX5Q2RPF8g8X+vF3wPa16HYRdXz5hebvFtUTQK46sZLG1eF6Js7bzi47GwOyQVal/7R+NTTJ15fJsf2oVzW5QxbnWROiDz4ihXSMryyLcTbuqTYSu9UVVGuKzIgY7eA427Rx89nNpHsqoRReK0aPOnTem1tMNKIiXQYL0xRGqiEVLJa4UKJmJqV9GQEHDj9o/qOps0KUGggnduO2cNN+5ciqTd/7wfINy/UZ4m83Yhd27zJ2E/FTmgciayCNJMuYglAiPufDaEdDkAKULv4K5RfMJWASqCtSShaf2RBR9EDs12fGzAXKQ5jOSFlK/PrgH0tBqHDQyFykQxTsgScO1e5RESlvq5ygG5hsfKBECjQ9Ldpk3KRyghGvB+XsJnI7jk6Ond9ipsOa77xztyaRKHeJLeYQAADfU74IWqUD0eUgbiOkI3Z9dQOQzrfReAx0Jc/gu6vkLE1b4NgqOLUuhgp9s8NGdnE1tOaXrqRr3WFZdipixRwRFEBGtFOuYrWPWWNh0ARFRURFR3Uc2f8r47yD4C5YqfMcto41mAAAAAElFTkSuQmCC");
}


.castlevania { 
  color: black;
  background: rgba(255, 255, 255, 0.137);
  padding: 20px 50px 20px 50px;
  background-clip: padding-box;
  border-image-slice: 24;
  border-image-width: 24px;
  border-image-repeat: round;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABIBAMAAAB8eARWAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAA9QTFRFAAAAAAAAYGBgqKio+Pj4oSPPugAAAAV0Uk5TAP////8c0CZSAAABiklEQVR4nO2WwVLCMBiE/z+ebZOUc0vKXUFfQJ+cNwAfQNvCnTZytokJDjMcCKweGTOTU3f+7W6SmY9JEVnpLUvyls4vkYdvzM/kW9OzNbJJKWlG45onZUt3rurqRjzsmTyd2a7j+p2LTPtNGYWZ/EyM9Nrtd1zwveXaB/tF2p2KYeSCyNmYhmU6UUgdlW5Ijjou1lHp/XVlqCnnC6YnS1dr1vWuxZQFlWtA+bgMfU6XoHtFyMygZDkF3YXKwERCjWBLPB86TKkrVFk46Ixin4QmmrgK7LMooeaDuzY96I7fOr70fP6qfF2Bfd6g++0l+u/zltwhpaIBU3KdN1ginosPcOZi+4W62xHsU4kRzG5Ugyol2mcRQAVMNPRonx16RnMGE/HLdge6P3VgnzzL0D7jrTOW++szFf+K1gI0JocG0wPz6gMBBqpMztLVWy6Ua3+oMtMuSahy34tAsa2JpBrptz6SLkmyJ7vXqyA025Ei/QaiHruk+3TocpFvTCTq8MfpmkKaGOnAvN++FhjIlJe9yAAAAABJRU5ErkJggg==");
}

.battle {
  color: black;
  padding: 20px 50px 20px 50px;
  border-image-slice: 5 5 6 8 fill;
  border-image-width: 10px 10px 12px 12px;
  border-image-repeat: stretch;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkAgMAAACyK1GZAAAADFBMVEUAAAAAAACoqMj///8ztpC5AAAAAXRSTlMAQObYZgAAAHZJREFUeNqVy9cBAUEQxvHvhBLQljROVoISNEE9mqAEqQCPm8Psyu7/9psAEHXBkY3hGwZwTxip2B1F+R6nb5gxjihWn9D8gAOaa8YWzc0fGD5hn6GlKkIO0U7oopOjZIhvmDFuXazC944o4EY2CzsMoFBCFy4NjSEyqM/IKooAAAAASUVORK5CYII=");;

}

.cowboy {
  color: white;
  background: rgba(153, 51, 51, 0.616);
  padding: 20px 50px 20px 50px;
  border-image-slice: 16;
  border-image-width: 16px;
  border-image-repeat: round;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABACAMAAAByderSAAAAk1BMVEUAAAAzAADMzJkAM5kAZplmM2YzM5kRERGIiIhEREQRAAAzMzMAM8xVVVUiAAAiIiLMzMwzZpn////u7u4zMwBmZmaZmZmZmcy7u7vMzP+qqqpmM5kzAGYAAACZAACZMzN3d3e7AABmmczd3d0AACIAM2YAABEAZsxEAACZZmaIAAB3AABmAABVAACqAACZZjNmMzPyZfkqAAAAAXRSTlMAQObYZgAAAp9JREFUeNrtl4d23CAQRc0oWgQKDFtEiGJkyVV1nf//urBYaeNGyun7tuqdc6964YL9ay4YhGTZh3zDQ4DBiykElyXEEGA1bD5ssiz7yLNXDEprDG+MBgJEQ4aZyTbZNoOXDSLAGgVn4mQgQDSg2e32e5PBywZUGvWhAKgsABAgGnDzab8zeQ7E4EouuQ6fk4DbtaVANODnOk7/akAsZVx4rQ+nXw1rKBANXy7zy18NAfYl2lWA8Zf/MBAgGLDJ818NTvEybnYVUXxSCFhDgGjI8ya/umoA6JbEg+Z4iAKO7VpSIBigaZquCXlmgOLpEKhl6RALiCFANHB+cp6qK2LgWsZfq901rh0F4nnBOWdNDPvdAAcOgOgcHpRdKwqQM4saADWeHGh+NBR4zwAlkoIC/+Xs/i3s4r1QYC3a4ibZQIFYVFK6ZAMFYrHnaJMNFIhFLTk3iQYKxMLc3nGPN4kGCoTCufL+1t+KRAMFQtGi93cPWCYaKMCsdb30d3d8sLVxCQYKMKGqsZH3t1yVQlQJBgLE1ZrGXkvRJq4FBUIBfvbaV5BmoEAscPZ+mrFOM1AgFDVbpkUfZ89dioECoZiXrpumuVl0lWKgAIM66LqxW8aF8RQDBRiovu+7pRt75plNMFAgFGxsurlr+t5LkWCgAAMxzcdpambPlPcJBgoweOzFJJtx8aMVKQYKMNCyZmyZOZ+LG5VgoAC74d4dUX7dBfEeEgwUYK6t3OiULurZQYqBAizeYKFiAh5tioECsVACrBSASQYKxMKVUHsBhdm7BAMBYgHKmFBUprYJBgqE4sYUZS1b4FWpEgwUYIVQrZNKC6MrWyQYKMDAGLs3bVtX1tmUtaAAgxhXJ971KPBf7v4v5zy+OI8vzuOL8/jiG4cSa13xn0gaAAAAAElFTkSuQmCC");
}

.diamond {
  color: var(--text-color);
  /* background: var(--btn-bg);  */
  padding: 2.4em 3.4em;
  border-style: solid;
  border-color: transparent;
  border-image-slice: 350 190 300 190;
  border-image-width: 42px 20px 38px 24px;
  border-image-repeat: round stretch;
  border-image-source: url("content/layers/diamonds.PNG");
}

.floraltile {
  padding: 35px;
  border-image-slice: 14;
  border-image-width: 18px;
  border-image-repeat: round;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAMAAADyHTlpAAAAElBMVEVwiL7u8fQUCkitBwmkCgsAAADCEFijAAAABnRSTlP//////wCzv6S/AAAAdElEQVR42u2URQKAMBDEavv/L+Myl4EgtwZN3RMi5+25tjw988sZSjqx6IK16beU6XPDcqm1TF9vi7ZFnYEGgG79M65gYl8Qgl1ZIdiVFYLEoaQ6zCHYlRWCXVkh2JUVgsSBBoBu/TOuYGLBcgH0M6ufWYQBblAHfUInEAoAAAAASUVORK5CYII=");
}

[data-theme="dark"] .diamond {
  border-image-source: url("content/layers/white_diamonds.PNG");
}