@font-face { font-family: 'Noto Sans'; src: local('Noto Sans'), url(notosans.woff2) format('woff2'); } a { text-decoration: none; color: inherit; } body { font-family: 'Noto Sans'; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #111111; overflow: hidden; } #bg-video { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; filter: brightness(0.6); } #mute-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 10; background: rgba(0, 0, 0, 0.5); color: #ff6600; border: 1px solid #ff6600; padding: 10px 15px; cursor: pointer; border-radius: 5px; font-family: inherit; backdrop-filter: blur(5px); transition: all 0.3s ease; } #mute-toggle:hover { background: #ff6600; color: #fff; } .menu { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; gap: 5vmin; z-index: 1; } .menu-item { display: flex; text-align: center; align-items: center; } .menu-item svg { width: 18vmin; height: 18vmin; fill: #ff6600; padding-top: 1vh; filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.8)); transition: all 0.3s ease; } .menu-item span { display: block; margin-top: 1vh; font-size: 5vmin; color: #ff6600; text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9); transition: all 0.3s ease; } .menu-item a:hover svg { fill: #ffffff; filter: drop-shadow(0px 0px 20px rgba(255, 102, 0, 0.5)); } .menu-item a:hover span { color: #ffffff; }