body { margin: 0; padding: 0; background: black; color: green; font-family: 'Courier New', Courier, monospace; overflow: hidden; } .matrix { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://media1.tenor.com/m/J-w5FUWA17sAAAAC/hacker.gif') no-repeat center center/cover; opacity: 0.05; z-index: 0; } .content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .box { border: 3px solid green; padding: 20px; text-align: center; box-shadow: 0 0 20px green; background: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; } .box h1 { font-size: 5rem; color: #FF00FF; text-shadow: 0 0 15px #FF00FF, 0 0 25px #FF00FF, 0 0 35px #FF00FF; display: flex; } .box h1 span { color: #FF00FF; } .box h2 { font-size: 2rem; margin: 10px 0; text-shadow: 0 0 10px yellow, 0 0 20px orange; color: #00BFFF; display: flex; flex-direction: column; align-items: center; } .box h2 span:first-child { color: white; margin-bottom: 5px; } .box img { width: 250px; margin: 20px 0; } .box p { font-size: 1.2rem; margin: 5px 0; } .footer { position: absolute; bottom: 20px; width: 100%; text-align: center; color: green; font-size: 1.2rem; z-index: 1; } .btn { background-color: #00BFFF; color: white; padding: 15px 30px; font-size: 1.2rem; border: none; border-radius: 5px; cursor: pointer; text-align: center; margin-top: 20px; box-shadow: 0 0 10px #00BFFF; transition: all 0.3s; } .btn:hover { background-color: #1E90FF; box-shadow: 0 0 20px #1E90FF; }