@font-face { font-family: 'BGFont'; src: url('./fonts/BGFont.otf') format('truetype'); } body { margin: 0; color: #000; background: #fff; } * { font-family: BGFont; text-decoration: none; font-size: 18px; text-align: justify; } @media (max-device-width: 440px) { audio { zoom: 2; } } @media screen and (-webkit-min-device-pixel-ratio:0) { audio { filter: invert(1); } } @-moz-document url-prefix() { audio { filter: invert(0); } } .clear { clear: both; } .top-block { padding: 50px; background: #f0f0f0 url(FondTopRSS.png) left no-repeat; background-size: auto 100%; display: flex; align-items: flex-start; box-shadow: 0px 5px 20px #00000050; margin-bottom: 60px; border-bottom: 5px solid #000; } .top-block img { outline: 6px solid rgba(0, 0, 0, 0.1); outline-offset: -6px; } .top-description { display: flex; flex-direction: column; } .copyright { font-size: 13px; } .copyright a { font-size: inherit !important; margin: 0 !important; } .top-block a { color: #1f8b4c; margin: 20px 0; margin-right: 50px; font-weight: bold; font-size: 2.5rem; } .description-block { width: 100%; display: flex; justify-content: center; } .description-block .description { max-width: 1280px; width: 100%; position: relative; } .description p a { font-size: inherit; } @media (max-device-width: 440px) { .copyright { font-size: 1.5em; } .description-block { word-break: break-word; } .description-block .description { line-height: 50px; } .description p { font-size: 1.7em; } } .description h3 { text-transform: uppercase; padding: 0px 20px 15px; } ul { padding-top: 20px; } .description h3::after { content: ""; display: block; height: 3px; width: 45px; background: rgb(65, 65, 65); margin: 5px auto 0px; } .episode-list { width: 94%; margin: 0 auto; padding: 0 !important; } .episode-list .episode { overflow: hidden; padding: 0; margin: 0; margin-right: 0; margin-bottom: 50px; max-height: 480px; list-style: none; background: #f0f0f0; } @media (max-device-width: 440px) { .episode-list .episode { max-height: 1000px; } } .episode { display: flex; transition: all 0.3s; } .episode .title { color: #1f8b4c; } @media (max-device-width: 440px) { .episode .title { font-size: 37px; line-height: 50px; } } .title:hover { color: #404040; } .episode article { width: 100%; padding: 25px 40px; } .episode article h4 { margin: 0; } .episode .download { color: #eee; margin: 0 10px 0 auto; } @media (max-device-width: 440px) { .episode .download { font-size: 35px; margin-right: 30px; } } .episode .download:hover { color: #DFDFDF; } .episode-description { height: 180px; overflow: auto; color: #2F2F2F; line-height: 20px; font-size: 16px; white-space:pre-wrap; } .episode-description a { font-size: inherit !important; color: #1f8b4c !important; } .episode-logo { width: 150px; float: left; margin-right: 20px; outline: 6px solid rgba(0, 0, 0, 0.1); outline-offset: -6px; } @media (max-device-width: 440px) { .episode article h4 { height: 100px; } .episode-description { font-size: 1em; line-height: 50px; height: 580px; } .episode-logo { width: 180px; } } .audio-file { align-items: center; } .audio-content { display: flex; align-items: center; flex: 1; background: #141414; } .download { margin-left: 20px; } .licence { color: #5c1c1c; font-size: 12px; text-align: center; } @media (max-device-width: 440px) { .licence { font-size: 30px; } } .date { color: #919191; font-size: 12px; } @media (max-device-width: 440px) { .date { font-size: 35px; } }