[nospaces][googlefont="Open+Sans|Exo|Roboto+Condensed|Hammersmith+One"][var name="gray" value="#2e2e2e"][var name="text" value="#222"][var name="pink" value="#ffcfd9"][var name="accent" value="#ff8495"][var name="gold" value="#face80"]

[newclass="#records"] width: 40%; max-width: 300px; min-width: 200px; margin: 10px auto; border: 6px [var="gray"] solid; font: 10px 'Exo'; color: #ddd; text-align: justify; text-transform: lowercase; background: #222; } #records .text { border: 1px #191919 solid; padding: 10px 15px; } #records .text b { color: [var="gold"]; font-weight: normal; } #records .file { display: flex; justify-content: space-around; align-content: flex-end; background-image: linear-gradient(172deg, [var="pink"] 0%, [var="pink"] 33%, #fff 34%, #fff 66%, [var="pink"] 67%); padding: 10px } #records .file #div { flex-grow: 1; } #records .file div { margin: auto 0; color: #444; text-align: right; } #records .file img { flex: none; height: 80px; width: 80px; border-radius: 100%; border: 6px #fff solid; } #records .file h1 a { display: inline-block; color: [var="text"]; transition: all .3s linear; } #records .file, #records .file a { color: [var="text"]; font: 10px 'Roboto Condensed'; } #records .file h1 a:hover { color: [var="accent"]; } #records div { margin: 4px; } #records #belt { display: flex; flex-wrap: wrap; align-content: flex-end; } #records #belt div { display: block; margin: 5px 0 0 0; } #records #belt div div { height: 3px; width: 20px; margin: 2px auto 0; border-radius: 3px; } #records #belt img { height: 30px; width: 40px; border: none; } #records h1, #records h1 a { font: 14px 'Arial' !important; font-weight: bold !important; font-style: italic !important; } #records h1 { display: inline-block; border-bottom: 1px [var="gray"] solid; padding-bottom: 1px; } #records h2, #records h2 a { display: inline; padding: 0; font: 10px 'Hammersmith One'; text-transform: uppercase; font-weight: normal; } #records a { text-decoration: none;[/newclass]