#talesof_wrapper { lleft: var(--drupal-displace-offset-left, 60px); }
#talesof {  position: relative; font-size: 2.5rem; max-width: 80vw; z-index: 3; line-height: 5.9rem; color: White; left: 60px; margin: 0; margin-bottom: 0px; transition: padding 0.2s linear; overfloww: hidden; transition: left 0.3s; }
body.menu #talesof { left: 0px; }
#talesof::before { content: ''; position: absolute; bottom: 1px; left: -60px; width: 60px; height: 200%; background: #333; transition: width 0.2s linear; }
#talesof span { background-color: Crimson; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 16px 20px 15px 20px; min-height: 59px; }

#talesof a { text-decoration: none; font-family: 'LibertinusB'; color: inherit; }
#talesof a:hover, #talesof a:focus { text-decoration: underline; text-decoration-style: wavy; }

@media (max-width: 600px) {
  .talesof { max-width: 80vw; }
}