[CHALLENGE] out with the old

[nospaces][googlefont=Roboto:300i,400,700|Raleway:400,800]

[attr="class","selk-contain"]

[attr="class","selk-header"]

[attr="class","selk-img"]

[attr="class","selk-divider"]

[attr="class","selk-lyrics"]may your feet serve you well

[attr="class","selk-lyrics-small"]and the rest be sent to hell

[attr="class","selk-body"]
if i retreat, words, wars, and symphonies. make room! we're taking over here. you're the galantine, cold and alone, it suits you well. won't find me perching here again. may your feet serve you well, and the rest be sent to hell. where they always have belonged, cold hearts brew colder songs. fate will play us out, with a song of pure romance. stomp your feet and clap your hands. let's kill tonight! kill tonight! show them all you're not the ordinary type. [break][break]
let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! may your feet serve you well, and the rest be sent to hell. where they always have belonged, cold hearts brew colder songs. fate will play us out, with a song of pure romance. stomp your feet and clap your hands. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight!

[attr="class","selk-details"]

[attr="class","selk-wordcount"] 000 words

[attr="class","selk-music"]let's kill tonight

[attr="class","selk-tags"]vriska, you're up

[attr="class","selk-notes"]put'cha notes here. i really wanted to add an animation to this - entirely because 14 year old me would think that's literal magic - but i couldn't find a way to implement it that didn't look like shit. pepehands. let's kill tonight, kill tonight. show 'em all you're not the ordinary type.

[newclass=.selk-contain] width: 500px; margin: auto; padding: 25px; --selk-accent-1: #c0434a; --selk-dark: #222; display: flex; flex-flow: column nowrap; background-color: #eaeaea; [/newclass]
[newclass=.selk-contain:hover .selk-img, .selk-contain:hover .selk-body b, .selk-contain:hover .selk-body i, .selk-contain:hover .selk-details div, .selk-contain:hover .selk-lyrics-small b] transition: 1s; --selk-accent-1: #22c0e7; [/newclass]
[newclass=.selk-header] width: 100%; display: flex; flex-flow: row nowrap; align-items: center; height: 175px; position: relative; [/newclass]
[newclass=.selk-divider] flex-shrink: 0; width: 204px; height: 6px; display: flex; flex-flow: column nowrap; justify-content: center; position: absolute; background: #222; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.selk-img] width: 175px; height: 175px; background: var(--selk-accent-1); transition: 1s; display: flex; align-items: center; position: absolute; [/newclass]
[newclass=.selk-img img] display: block; border-radius: 100%; background: #eee; padding: 5px; border: 10px solid #222; position: relative; left: -65px; position: relative; z-index: 1; [/newclass]
[newclass=.selk-lyrics] width: calc(100% - 200px); font: 800 49px/100% raleway; text-transform: uppercase; text-align: left; margin-left: auto; color: #222; [/newclass]
[newclass=.selk-lyrics-small] width: calc(100% - 175px); height: 25px; font: 900 9px/25px roboto; text-align: center; text-transform: uppercase; background: #222; color: #8a8a8a; position: absolute; bottom: 0px; right: 0px; [/newclass]
[newclass=.selk-lyrics-small b] color: var(--selk-accent-1); transition: 1s; font: 900 9px/25px roboto; [/newclass]
[newclass=.selk-lyrics-small:after] content: "!"; font-style: italic; [/newclass]
[newclass=.selk-body] background: #f4f4f4; padding: 75px; font: 400 12px/15px helvetica; text-align: justify; color: #8a8a8a; [/newclass]
[newclass=.selk-body b] font: 700 13px/15px roboto; color: var(--selk-accent-1); transition: 1s; [/newclass]
[newclass=.selk-body i] font: 300 12px/15px roboto; color: #aaa; font-style: italic; border-bottom: 1px solid var(--selk-accent-1); transition: 1s; [/newclass]
[newclass=.selk-details] display: flex; align-items: center; justify-content: space-between; [/newclass]
[newclass=.selk-details div] background: var(--selk-accent-1); transition: 1s; padding: 10px 15px; font: 700 10px/100% roboto; text-transform: uppercase; text-align: justify; color: #222; margin: 25px 25px 0px 0px; [/newclass]
[newclass=.selk-details div:hover] cursor: pointer; [/newclass]
[newclass=.selk-details div a] text-decoration: none !important; font: 700 10px/100% roboto !important; color: #222 !important; [/newclass]
[newclass=.selk-music] text-align-last: center; [/newclass]
[newclass=.selk-tags] flex-grow: 1; margin: 25px 0px 0px 0px!important; [/newclass]
[newclass=.selk-notes] margin: 25px 0px 0px; background: #f1f1f1; padding: 25px; color: #c6c6c6; font: 400 11px roboto; text-align: justify; [/newclass]