@font-face { font-family: "workbench"; src: url("../assets/font.woff2") format("woff2"); } body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: "workbench", sans-serif; overflow: hidden; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #background-video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 101%; width: auto; height: auto; transform: translate(-50%, -50%); z-index: 0; object-fit: cover; object-position: center; } .navbar { background: none; padding: 1rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none; position: relative; /* Added this line */ z-index: 1; /* Added this line */ } .logo { font-size: 1.5rem; color: #db7bdb; text-shadow: 0 0 10px #db7bdb; } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .nav-links li { margin-right: 20px; } .nav-links a { font-size: 1.2rem; color: #db7bdb; text-decoration: none; transition: color 0.2s ease; text-shadow: 0 0 3px #db7bdb; pointer-events: initial; letter-spacing: 1px; } .nav-links a:hover { color: #d6afd6; } .credits { position: absolute; bottom: 0.5%; left: 50%; transform: translateX(-50%); font-size: 1rem; color: rgba(128, 128, 128, 0.5); pointer-events: none; white-space: nowrap; display: none; animation: fadeIn 1.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 600px) { .navbar { flex-direction: column; justify-content: center; align-items: center; } .nav-links { margin-top: 1rem; display: flex; justify-content: center; padding: 0; width: 100%; } .logo { display: none; } .nav-links li { margin: 0 10px; text-align: center; } }