:root{--color-background: hsl(242deg 26% 24%) ;--color-dark: #fff;--color-light: #fff;--color-background-post: rgba(5, 5, 5, .37);--font-body: "Josefin Sans", sans-serif;--font-coursive: "Oooh Baby", cursive;--layout-border-radius: 2px;--image-main-background: url(/bg.jpg)}html,body{margin:0;padding:0;font-size:100%;color:var(--color-light);background:var(--color-background) var(--image-main-background) no-repeat left center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}*{font-family:var(--font-body);-webkit-font-smoothing:subpixel-antialiased}h1{padding:120px 0 64px;margin:0;font-family:var(--font-coursive);font-size:400%;line-height:1;color:var(--color-dark);text-align:center;font-weight:400}ul{padding:0;margin:0}.container{width:640px;max-width:640px;margin:0 auto}.posts{padding-left:0;list-style-type:none;color:var(--color-light)}.posts a,.posts h3{color:var(--color-dark);text-decoration:none}.post{display:flex;margin-bottom:14px;padding:14px;background-color:var(--color-background-post);align-items:center;border-radius:var(--layout-border-radius);box-shadow:0 0 70px #191a1f4d}.post-left{position:relative;display:flex;width:120px;height:120px;min-width:120px;min-height:120px;align-items:center;text-align:center;border:4px solid var(--color-light);border-radius:var(--layout-border-radius);background-color:transparent;background-image:url(/cover.png);background-repeat:no-repeat;background-position:center;background-size:cover;opacity:.65}.post-left:hover{opacity:.75}.post-right{width:100%;padding-left:14px}.post-line{position:absolute}.post-line-title{height:24px}.post-line-normal{height:12px}.post-loading{margin-bottom:14px;padding:14px}.post-loading .post-right{min-height:108px}.post h3{margin:2px 0;font-family:var(--font-coursive);font-size:190%;font-weight:400;line-height:1.5}.post span,.post em{display:block;line-height:1.4}.player{position:relative;width:60px;height:60px;padding:12px;border:0 none;background-color:transparent;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;z-index:1}.player .player-icon{fill:#00000073}.player:hover .player-icon{fill:#000000a6}.player:focus{outline:none}.player-wrapper{margin:0 auto}.player-time{position:absolute;top:0;right:0;padding:3px 3px 2px;font-size:9px;font-family:Arial,sans-serif;font-weight:700;line-height:1;color:var(--color-dark);background-color:#000000a6;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.player-progress{position:absolute;inset:0;width:100%;height:100%;background-color:transparent;overflow:hidden;cursor:pointer;z-index:0}.player-progress-inner{position:relative;display:block;height:100%;background-color:#ffffff80;-webkit-transition:width .2s ease-in;-moz-transition:width .2s ease-in;transition:width .2s ease-in;-webkit-box-shadow:1px 0 0 0 rgba(255,255,255,.7);-moz-box-shadow:1px 0 0 0 rgba(255,255,255,.7);box-shadow:1px 0 #ffffffb3}footer{padding:64px 0;text-align:center;color:var(--color-dark);font-size:85%}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){.container{width:480px;max-width:480px}.post h3{font-size:140%}}@media only screen and (min-device-width: 320px) and (max-device-width: 480px){.container{width:300px;max-width:300px}.post{display:block}.post h3{font-size:160%;margin:14px 0}.post-left{width:264px;height:264px;margin:0 auto}.post-right{display:block;padding-left:0;padding-top:14px;text-align:center}}