@font-face { font-family: 'workbench'; src: url('../assets/font.woff2') format('woff2'); } body { background-color: #333; background-image: linear-gradient(to bottom, #000000, #22770156, #221100 ); 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.6) 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: #33ccffda; } .contact-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #33ccffab; text-shadow: 0 0 3px #33ccffaf; padding: 10px; pointer-events: none; } .contact-container h1 { font-size: 2rem; margin-bottom: 1rem; } .contact-container p { font-size: 1.2rem; margin: 0.5rem 0; } .contact-container a { color: #33ccffab; text-decoration: none; transition: color 0.2s ease; pointer-events: stroke; } .contact-container a:hover { color: #33ccffda; } @media (max-width: 600px) { .navbar { flex-direction: column; align-items: center; } .nav-links { flex-direction: column; align-items: center; } .nav-links li { margin: 5px 0; } }