.services li .item { padding: 4px; font-size: 20px; width: 300px; border-color: transparent; margin-right: auto !important; display: block; text-align: left; border-left-width: 3px; border-left-style: solid; border-color: transparent; } .services { position: fixed; left: 0; bottom: 0; right: 0; top: 150px; padding-top: 50px; } .services li { color: transparent; margin-top: 5px; margin-bottom: 5px; } .services li .item a { color: white !important; text-decoration: none; transition: color 200ms; } .services li.selected .item a { text-decoration: none; } .services:not(.services-settings) li.selected .item { background-color: rgba(0, 255, 153, 0.25); backdrop-filter: blur(10px); border-radius: 10px; animation-direction: alternate-reverse; position: relative; z-index: 9999999999; animation-duration: 3s; animation-name: border-overlay; animation-fill-mode: both; animation-iteration-count: infinite; } .services.services-settings li.selected .item { border-color: #00ff99; background-color: rgba(0, 255, 153, 0.25); animation-direction: alternate-reverse; animation-duration: 3s; animation-name: border-overlay2; animation-fill-mode: both; animation-iteration-count: infinite; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } @keyframes border-overlay { 0% { background-color: rgba(0, 255, 102, 0.25); } 100% { background-color: rgba(0, 204, 255, 0.25); } } @keyframes border-overlay2 { 0% { border-color: #00ff66; background-color: rgba(0, 255, 102, 0.25); } 100% { border-color: #00ccff; background-color: rgba(0, 204, 255, 0.25); } } .services li .item { margin-left: 12.5px; transition: margin-left 200ms, background-color 200ms, border 200ms; } .services li .help { color: white; margin-left: 5px; display: inline-block; font-size: 12px; position: relative; top: -2.5px; opacity: 0; transition: opacity 200ms; } .services li .help.exit { color: #ff6969; } .services li.selected .help { opacity: 1; } #copyright { color: rgba(255, 255, 255, .5); position: fixed; bottom: 30px; right: 30px; text-align: right; font-size: 12px; } .setting-status { float: right; } #notice { color: white; position: fixed; top: 20px; right: 20px; width: 180px; text-align: right; font-size: 14px; } #scroll { display: block; text-align: center; color: white; padding-top: 100vh; padding-bottom: 100vh; } .cred-title { color: yellow; } .cred-content { color: white; } .technical { color: cyan; } .item-icon { filter: invert(1); vertical-align: middle; } div.services.home { top: 115px; padding: 0; display: flex; align-items: center; bottom: 70px; z-index: 9999; } div.services.home > div.items > ul > li > span.item { width: 216px; border-radius: 0; } div.services.home > div.items > ul > li > span.item > a { margin-left: 10px; margin-right: 10px; width: 100%; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } div.services.home > div.items { width: 256px; } div.services.home > div.items > ul { padding: 0; } div.services.home > div.items > ul > li { list-style: none; } div.services.home > div.items > ul > li > span.item { margin-left: 10vw; transition: none; } img[alt="full-logo"] { margin-left: calc(10vw + 37.5px) !important; margin-top: 55px !important; height: 56px !important; z-index: 99999; position: fixed; } span#copyright { bottom: 46px; left: 10vw; z-index: 9999; color: rgba(255, 255, 255, 0.75); right: unset; width: 227px; text-align: center; } #services-background { position: fixed; top: 0; bottom: 0; width: 227px; z-index: 9; backdrop-filter: blur(10px); background: rgba(0, 0, 0, 0.5); left: 10vw; }