@import url('https://fonts.googleapis.com/css?family=Fira Sans'); @import url('https://fonts.googleapis.com/css?family=PT Mono'); .yukiEevee { background: -webkit-linear-gradient(top, #5e2005 0%, #296d1b 100%); color: #FEF; text-shadow: 1px 1px rgba(20, 0, 20, 0.5); font: 9pt 'Fira Sans', sans-serif; } .yukiEevee-m { background: url('https://i.imgur.com/EHEpjry.png') top left repeat, url('https://i.imgur.com/pzjKvd4.png') top left repeat; min-height: 270px; padding: 25px 275px 25px 25px; overflow: hidden; position: relative; } .yukiEevee-s { background: url('https://i.imgur.com/ouWnG0c.png') bottom right no-repeat; height: 100%; min-height: 500px; width: 280px; right: 0; top: 2px; pointer-events: none; position: absolute; } .yukiEevee-p { background: rgba(100, 80, 100, 0.2); border: 1px solid #757; box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.4), 1px 1px 0px rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 4px; } .yukiEevee-f { padding: 0px 15px; } .yukiEevee .quote, .yukiEevee .code { position: relative; margin: 0px 4px; } .yukiEevee .quote:before { content: '"'; font-size: 20pt; position: absolute; top: -6px; left: 4px; } .yukiEevee .quote:after { content: '"'; font-size: 20pt; position: absolute; bottom: -24px; right: 8px; } .yukiEevee .quote > .box, .yukiEevee .code > .box { background: rgba(100, 80, 100, 0.3); border: 1px solid #757; box-shadow: inset 1px 1px 0px #CAC, 1px 1px 0px #CAC; border-radius: 5px; padding: 20px 4px 3px; color: #FEF; } .yukiEevee .code > .box { font: 9.5pt 'PT Mono', monospace; } .yukiEevee .quote > .boxhead, .yukiEevee .code > .boxhead { position: absolute; top: 0px; left: 18px; background: #757; border: 1px solid #757; box-shadow: inset 1px 1px 0px #CAC, 1px 1px 0px #CAC; border-radius: 0px 0px 5px 5px; padding: 2px 4px 0px; font-size: 7.5pt; color: #FEF; } .yukiEevee .code:before { content: '«'; font-size: 14pt; position: absolute; top: -10px; left: 4px; } .yukiEevee .code:after { content: '»'; font-size: 14pt; position: absolute; bottom: -9px; right: 4px; } .yukiEevee a { font-weight: bold; color: #FA9; transition: color .25s ease; } .yukiEevee a:hover, .yukiEevee a:active { color: #FCB; text-decoration: none; }