[nospaces][googlefont=Roboto:400,400i,700|Montserrat:400|Montserrat+Alternates:700]
[newclass=.jen-contain] --jenAccent01:#ffc0cb; --jenAccent02:#b8821e;[/newclass]
[attr="class","jen-contain"]
[attr="class","jen-header"]
[attr="class","jen-body"]
I love the idea of the two of them forming an unlikely friendship. Like, here's Chloe with her bright and sunny disposition and then there's Dante... being Dante. They both can be terrible pokemon trainers together though as she's never been in a battle before she's just so naive and a cinnamon roll that she doesn't know what she's doing. The two of them could flounder together while bickering since they're such opposites.
[attr="class","jen-footer"]
let's be unlikely friends!
[attr="class","jen-credit"]
SELKIE[newclass=.jen-contain] width:500px; overflow:hidden; background-color:#f0f0f0; border-radius:10px; [/newclass]
[newclass=.jen-header] width:100%; display:flex; align-items:center; justify-content:space-between; [/newclass]
[newclass=.jen-header img] width:75px; height:75px; border-radius:100%; padding:5px; margin:0px 25px; background-color:#fafafa; border:10px solid #333; transition:.25s ease; transition-delay:.1s; [/newclass]
[newclass=.jen-header img:hover] transform:scale(.9); transition:.25s ease; transition-delay:.1s; cursor:pointer; [/newclass]
[newclass=.jen-header div] flex-shrink:0; width:286px; height:155px; display:flex; align-items:center; justify-content:center; background-color:var(--jenAccent01); [/newclass]
[newclass=.jen-header div:first-child] justify-content:flex-start; -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); [/newclass]
[newclass=.jen-header div:last-child] justify-content:flex-end; margin-left:-76px; [/newclass]
[newclass=.jen-body] font: 400 11px roboto; color:#6a6a6a; text-align:justify; padding:25px; margin:25px; background-color:#fafafa; border-radius:10px; [/newclass]
[newclass=.jen-body b] font:700 11px roboto; color:#aaa; color:var(--jenAccent01); [/newclass]
[newclass=.jen-body i] font:400 11px roboto; font-style:italic; color:#aaa; border-bottom:1px solid var(--jenAccent01); [/newclass]
[newclass=.jen-footer] width:100%; min-height:75px; background-color:#333; display:flex; align-items:center; justify-content:space-between; [/newclass]
[newclass=.jen-footer div:first-child] font:400 20px/18px montserrat; color:#5a5a5a; margin-left:25px; text-align:left; [/newclass]
[newclass=.jen-footer div:first-child b] font:700 20px/18px montserrat alternates; color:#aaa; color:var(--jenAccent01); [/newclass]
[newclass=.jen-footer div:last-child] min-height:75px; width:100px; padding-left:20px; margin-right:-1px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0px 20px 0px 40px; background-color:var(--jenAccent01); color:#333; font:700 20px/18px montserrat alternates; text-transform:lowercase; text-align:left; -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); word-wrap: break-word; overflow-wrap: break-word; [/newclass]
[newclass=.jen-footer div a] font:700 20px/18px montserrat alternates!important; color:#333!important; [/newclass]
[newclass=.jen-credit] font:bold 7px roboto; margin-left:450px; [/newclass]
[newclass=.jen-credit a] font:bold 7px roboto!important; [/newclass]