[nospaces][var name="accent" value="#6497ac"][var name="background" value="#222"][var name="sequin" value="#191919"][var name="text" value="#ccc"][var name="hp" value="#b3c83d"][googlefont=Hammersmith+One|Chivo]

[newclass="#silence"]width: 100%; max-width: 400px;background: [var="background"]; display: flex; flex-direction: row; font: 10px 'Chivo'; color: [var="text"]; text-align: justify; margin: 15px auto; border: 1px [var="sequin"] solid; } #silence .sidebar { width: 100px; flex-grow: 20%; background: [var="accent"] url(https://image.ibb.co/cpf8Wc/flower_patt.png) no-repeat bottom; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: 0 10px 10px 0; } #silence .sidebar::before { content: ''; width: 100px; } #silence .sidebar div { width: 37px; height: 37px; background: [var="background"]; border: 1px [var="sequin"] solid; border-radius: 50%; margin: 3px 0; } #silence .sidebar .box::before { content: ''; position: absolute; display: block; width: 2px; height: 7px; background: [var="background"]; transform: translate(18px, -7px); } #silence .sidebar .box:nth-child(1)::before { height: 0; } #silence .sidebar div div { border-radius: 2px; width: 20px; height: 2px; transform: translate(8px,-0px); } #silence .content { padding: 15px; } #silence .sidebar .inactive { filter: grayscale(100%); -webkit-filter: grayscale(100%); } #silence .content .tag { margin: 0; display: block; background: [var="background"]; margin: 10px 0; padding: 8px; transform: translate(-50px,-5px); border: 1px [var="sequin"] solid; border-radius: 5px; } #silence .content .tag, #silence .content .tag a { font: inherit; } #silence .content h2 { color: [var="accent"]; font: inherit; font-weight: bold; display: inline; } #silence .content b { font: 10px 'Hammersmith One'; text-transform: uppercase; } #silence .detail { background: #252525; border-radius: 100%; flex: none; } #silence .detail::before { width: 100px; height: 100px; [/newclass]