#lyriccontainer:fullscreen,-webkit-full-screen,-moz-full-screen,-ms-fullscreen { background-color: white; align-items: center; justify-content: center; font-size: 5rem; } #lyriccontainer:fullscreen > #line-last { padding-left: 0rem; } #lyriccontainer:fullscreen > #line-current { padding-left: 0rem; } #lyriccontainer:fullscreen > #line-next { padding-left: 0rem; } #lyriccontainer { background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(202,234,206) 50%, rgba(0,0,0,.1) 100%); font-size: 4rem; display: flex; width: 100%; flex-direction: column; } #lyriccontainer .active { font-weight: bold } #lyriccontainer div { display: flex; flex-direction: column; } #lyriccontainer #line-last { height: 25rem; padding-left: 1rem; } #lyriccontainer #line-current { height: 30rem; padding-left: 4rem; } #lyriccontainer #line-next { height: 25rem; padding-left: 6rem; } #lyricFullscreen { height: 3rem; width: 10rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); background-color: #57a957; border-color: #57a957; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); }