body { background-color: #fff; font-family: "Open Sans", Helvetica; margin: 0; padding: 0; } .unibar { padding: 20px; border-bottom: 1px solid #ddd; box-shadow: 2px 2px 5px #9c9c9c; } .unibar .logo { font-size: 200%; } .unibar .userdata { display: inline-block; float: right; padding: 12px; } .wrapper { min-height: 100vh; } .show-promo { display: inline-block; width: 200px; text-align: center; margin: 5px; vertical-align: text-top; } .show-promo .artwork { max-width: 180px; max-height: 260px; } .blocklayout .block { margin: 15px; box-shadow: 2px 2px 5px #9c9c9c; } .blocklayout .block h1 { background-color: #f5f5f5; border: 2px solid #d0d0d0; border-bottom: 0; padding: 8px; margin: 0; word-wrap: break-word; } .blocklayout .block .content { overflow: hidden; border: 2px solid #d0d0d0; padding: 10px; } .blocklayout.columns { position: relative; overflow: hidden; } .blocklayout.columns .column.primary { width: 80%; } .blocklayout.columns .column.smaller { width: 20%; float: right; } section.show-details { position: relative; } .show-details .banner { position: absolute; width: 100%; height: 100%; filter: blur(4px); background-position: center center; background-size: cover; z-index: -1; } .show-details .banner-cover { overflow: auto; } .show-details .artwork { width: 182px; margin: 15px; float: left; } .show-details .details { margin-left: 220px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; display: block; min-height: 260px; overflow: hidden; font-size: 150%; background-color: #dadada38; padding: 10px; } .show-details .details h1 { margin: 0; font-size: 200%; } .show-details .details .description { display: inline-grid; width: 80%; } .show-details .details .data { display: inline-grid; text-align: right; } .show-details .stats .param { color: #a2a2a2; } section.seasons { min-height: 100vh; padding: 25px; } .season-name { padding: 6px; font-size: 180%; background-color: #e8e8e8; } a.episode { padding: 10px; display: block; color: #000; text-decoration: none; background-color: #f7f7f7; } a.episode:nth-child(even) { background-color: #fbfbfb; } @media all and (max-width: 800px) { .logo { font-size: 5vw !important; } .blocklayout.columns .column { position: initial; display: block; } .blocklayout.columns .column.primary { width: initial; } .blocklayout.columns .column.smaller { display: none; } .blocklayout .block { margin: 0; margin-bottom: 10px; border: none; box-shadow: none; } .blocklayout .block .content, .blocklayout .block h1 { border: none; } .blocklayout .block .content .show-promo, .blocklayout .block h1 .show-promo { display: block; margin: 5px auto; } }