@font-face { font-family: 'workbench'; src: url('../assets/font.woff2') format('woff2'); } body { background-color: #2e2e2e; background-image: linear-gradient(to bottom, #000000, #1a5c008a, #000000 ); background-size: 100% 3px; background-repeat: repeat-y; margin: 0; font-family: 'workbench', sans-serif; } .navbar { background: radial-gradient( farthest-corner at 50% 50%, rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.7) 50%, rgba(40, 40, 40, 0.6) 100% ); background-size: 100% 300px; background-position: 0% 100%; padding: 1rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .logo { font-size: 1.5rem; color: #33ccffca; text-shadow: 0 0 10px #33ccffbe; } .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: #33ccffab; text-decoration: none; transition: color 0.2s ease; text-shadow: 0 0 3px #33ccffaf; pointer-events: initial; } .nav-links a:hover { color: #33ccff; } .ascii-art-container { position: fixed; top: 50%; left: 47% !important; transform: translate(-50%, -50%); font-size: 10vmin; font-family: 'Courier New', monospace; color: #33ccffab; text-shadow: 0 0 3px #33ccffaf; padding: 10px; white-space: pre; pointer-events: none; max-width: 90%; max-height: 90%; overflow: hidden; } @media (max-width: 600px) { .ascii-art-container { top: 60% !important; } .navbar { flex-direction: column; align-items: center; } .nav-links { flex-direction: column; align-items: center; } .nav-links li { margin: 5px 0; } }