[styleclass=jirachi][img]https://i.ibb.co/FK00hjV/jirachi-header.png[/img][ ][sc=body] [/sc][ ][img]https://i.ibb.co/rMRZRp3/jirachi-footer.png[/img][sc=credits][url=https://pokefarm.com/forum/post/6391407][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc][/styleclass] [style] @font-face { font-family: 'Indie'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/indieflower/v16/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .jirachi { min-height: 100px; color: #584927; .body { background: url('https://i.ibb.co/ZXPMkgF/jirachi-body.png'); padding: 2%; .grid { font-size: 12pt; &--container { display: grid; grid-template-columns: repeat(6, minmax(50px, 1fr)); grid-template-rows: repeat(auto-fill, 50px); gap: 10px; } &--header { grid-column: 1 / span 6; font-size: 20pt; line-height: 42px; text-align: center; border: 5px double #584927; color: #584927; background: transparent; letter-spacing: 1px; font-weight: normal; font-family: 'Indie'; } &--item { border: 5px double #584927; padding: 5px; text-align: center; img { filter: drop-shadow(0 0 3px #777); margin-right: 5px; } span.bbcode_tooltip { border: none; } &--collected { display: none; } } } hr { height: 50px; background-image: url('https://i.ibb.co/4TQ5BjN/hr.png'); background-repeat: no-repeat; background-position: center; border: none; } ul { margin: 0; margin-top: 10px; list-style: none; padding:0; } ul li:not(.tabbed_interface > ul > li) { padding-left: 5px; } ul li:not(.tabbed_interface > ul > li)::before { content: "★"; margin-right: 8px; display: inline-block; width: 15px; height: 15px; } h1, h2, h3:not(.panel > h3) { color: #584927; text-shadow: none; letter-spacing: 1px; font-weight: bold; font-family: 'Indie'; } a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited { color: #1C5E5A; display: inline-block; transition: 0.3s; transition-delay: 0s; transform: scale(1); } a:not(.panel > h3 > a)::before { content: ' '; position: absolute; z-index: -1; bottom: 0; left: -2px; padding: 0 2px; width: 100%; height: 1px; border-bottom: 2px double #1C5E5A; transition: 0.4s; } a:not(.panel > h3 > a)::after { content: ' '; position: absolute; z-index: -1; bottom: 0; left: 0; padding: 0 0px; width: 0; height: 0; border: 1px solid transparent; transition: 0.4s; } a:not(.panel > h3 > a):hover::before { border-color: transparent; } a:not(.panel > h3 > a):hover::after { width: 100%; height: 0.75em; left: -1em; bottom: -0.35em; padding: 0.5em 1em; border-color: #fff; background-color: #1C5E5A; border-radius: 2.5em; } a:not(.panel > h3 > a):hover { color: #fff; transform: scale(1.2); transition-delay: 0.11s; } .tabbed_interface { background: transparent; > ul { background: transparent; > li { background: transparent; border: 5px double #584927; padding: 1%; margin: 10px 5px; color: #000000; box-shadow: 0 0 5px #777; transition: background 0.5s ease-in-out, color 0.25s ease-in-out, border 0.5s ease-in-out; text-align: center; font-family: 'Indie'; font-size: 18pt; &:hover, &:focus, &.tab-active { color: #000000; background: #c4a357; border: 5px double #584927; cursor: pointer; } } } > .tab, > .tab-active { background: transparent; border: 5px double #584927; padding: 2%; color: #584927; box-shadow: 0 0 5px #777; } } span.bbcode_tooltip { border-bottom: 2px double #1C5E5A; } .tooltip_content { background: #1C5E5A; color: #fff; border-radius: 0; border: 5px double #278280; } span.bbcode_tooltip:hover + div.tooltip_content,.tooltip_trigger.lock+.tooltip_content,.tooltip_trigger.lock.dismiss+.tooltip_content { display: inline-block!important; margin-left: 4px; margin-top: -9px; } .expbar { padding: 5px; background: transparent; color: #fff; border: 5px double #584927; 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, > h3 > a { background: #c4a357; color: #000000; border-radius: 0; border: 5px double #584927; box-shadow: 0 0 5px #777; &:not(h3:first-child):not(h3>a:first-child) { margin-top: 5px; } } > div { color: inherit; border: 5px double #584927; margin-top: 5px; box-shadow: 0 0 5px #777; } } 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: #000000; border: 5px double #584927; padding: 5px; } } } } .credits { position: absolute; bottom: 173px; left: 5px; > a > img:hover { filter: drop-shadow(0 0 5px #777); } } } [/style]