:root { --back-color: #00FF44; --main-color: #000000; } .closedBackground{ visibility: collapse; } .openBackground{ position: absolute; visibility: visible; opacity: 1; z-index: -20 } .openBackground#texture{ z-index: -30; } .openBackground#background{ mix-blend-mode: difference; filter: brightness(133%) saturate(33%) grayscale(); transform: rotate(180deg); position: absolute; margin-top: -9%; height: 120%; opacity: .777; } /*======================= Page Statut LOL ouvert ===*/ #lolIsOpen { position: relative; top: 0; left: 0; margin: 0; width: 100vw; height: 100vh; background-color: var(--main-color); #openContainer { padding: 15px; box-sizing: border-box; } .cute-texture, .cute-texture-video { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } } #openContainer{ width:100%; height: 100%; border-radius: 33px; display:flex; flex-direction: column; justify-content: space-around; align-items: center; section{ width: 333px; height: 117px; background-color: var(--back-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 33px; margin-top: -77px; border-radius: 33px; p{ padding: 0; margin: 0; text-transform: none; font-size: 22px; font-family: 'velvelyne'; font-weight: bold; color: var(--main-color); } h3{ width: 277px; height: 50px; background-color: var(--main-color); color: var(--back-color); border-radius: 33px; text-transform: uppercase; text-align: center; font-size: 33px; font-family: 'karrik'; font-weight: normal; padding: 0; margin: 0; padding-top: 7.77px; } } } #lolStatus{ animation: blink 3.33s infinite; }