[styleclass=tarot-card][ ][sc=tarot-card-inner][ ][sc=tarot-card-front][img]https://i.ibb.co/sbFvD9z/BackCard.png[/img][/sc][ ][sc=tarot-card-back][styleclass=tabbed_interface horizontal][ ][ul][ ][li][img]https://i.ibb.co/6sR7crg/air.png[/img][/li][ ][li][img]https://i.ibb.co/WDrXPrR/fire.png[/img][/li][ ][li][img]https://i.ibb.co/XL7Sm0G/water.png[/img][/li][ ][li][img]https://i.ibb.co/FbC2J0S/earth.png[/img][/li][ ][li][img]https://i.ibb.co/stRNyWv/spirit.png[/img][/li][ ][/ul][ ][sc=tab tab-active]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][/styleclass][/sc][ ][/sc][ ][sc=credits][sc=align][url=https://pokefarm.com/forum/post/6463030][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc] [sc=align]credits[/sc][/sc][/styleclass] [style] @text: #ae9300; @text-alt: #8D976D; @font-face { font-family: Headers; src: url('https://pokefarm.com/upload/Aemilia/Fonts_For_Templates/Cataclysmic.jpg'); } .tarot-card { width: 310px; height: 517px; perspective: 1000px; border-radius: 15px; } /* positions the front and back side */ .tarot-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1.5s; transform-style: preserve-3d; } /* horizontal flip when you move the mouse over the flip box container */ .tarot-card:hover .tarot-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .tarot-card-front, .tarot-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; filter: drop-shadow(0 0 3px #000); } /* Style the front side (fallback if image is missing) */ .tarot-card-front { background-color: transparent; color: black; } /* Style the back side */ .tarot-card-back { background: url('https://i.ibb.co/t4bSL14/Front-Card.png'); color: white; transform: rotateY(180deg); & > .tabbed_interface > ul > li > img { height: 35px; width: auto; } & > .tabbed_interface { background: transparent; border: none; box-shadow: none; margin: 0 auto; margin-top: 45px; width: 75%; > ul { background: transparent; border: none; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; gap: 5px; > li { background: none; border: none; &:hover { cursor: pointer; filter: drop-shadow(0 0 5px #ae9300); } } } > .tab, > .tab-active { background: transparent; border: none; margin-top: 5px; padding: 0 5px; height: 380px; box-shadow: none; color: @text; text-align: left; overflow: hidden; hr { border: none; background: transparent; background: url('https://i.ibb.co/z8CM2Nw/rule.png'); background-size: 100%; height: 35px; width: 100%; } h1, h2, h3 { font-family: "Headers", sans-serif; color: @text-alt; } a, a:link, a:hover, a:active, a:visited { color: @text-alt; } a:not(.panel > h3 > a) { display: inline-block; color: lighten(@text-alt, 10%); text-decoration: none; position: relative; } a:not(.panel > h3 > a)::after { content: ""; background: white; mix-blend-mode: exclusion; width: 100% + 8px; height: 0; position: absolute; bottom: -2px; left: -2px; transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } a:not(.panel > h3 > a):hover { color: lighten(@text-alt, 35%); } a:not(.panel > h3 > a):hover::after { height: 100% + 8px; } span.bbcode_tooltip { border-bottom: 2px double @text-alt; } .tooltip_content { background: #7d4a28; color: #fff; border-radius: 0; border: 5px double @text-alt; } ul { list-style-type: circle; margin: 0; text-align: left; } .expbar { padding: 5px; background: transparent; color: #fff; border: 5px double @text; border-radius: 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; div { background: #CBB772; border-right: 2px solid #584927; border-radius: 0; } } .panel { box-shadow: none; border: none; border-radius: 0; background: transparent; > h3 { background: #c4a357; color: #000000; border-radius: 0; border: 5px double #584927; box-shadow: none; & > a { color: inherit; } &:not(h3:first-child):not(h3>a:first-child) { margin-top: 5px; } } > div { color: inherit; border: 5px double #584927; margin-top: 5px; box-shadow: none; } } table { margin: 0 auto; text-align: center; border-collapse: separate; border-spacing: 5px; border: none; display: flex; width: 100%; overflow-x: auto; tr { th { width: fit-content; padding: 5px; background: #c4a357; color: #000000; border: 5px double #584927; } td { background: transparent; color: @text; border: 5px double @text; padding: 5px; } } } } } } .credits { display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; width: 100%; bottom: 2px; left: 2px; font-variant: small-caps; color: #FFFFFF; font-size: 10pt; > .align { & > a > img:hover { filter: drop-shadow(0 0 5px #777); } &:last-child { margin-top: -12px; } } } [/style]