* { padding: 0; margin: 0; } body { min-height: 100vh; background: linear-gradient(#2b1055, #7597de); scroll-behavior: smooth; } header { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 10; padding: 20px 100px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; color: #fff; overflow: hidden; } header #logo { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } header ul { list-style: none; display: flex; justify-content: center; align-items: center; } header ul a { font-weight: 600; margin-left: 15px; transition: all .5s linear; padding: 5px 15px; border-radius: 20px; color:white; } header ul a:hover { background: #fff; color: #2b1055; } header ul a.active { background: #fff; color: #2b1055; } section { position: relative; width: 100%; overflow: hidden; height: 100vh; color: #fff; display: flex; justify-content: center; align-items: center; } section .desc { position: absolute; z-index: 5; font-size: 70px; font-weight: 700; right: -350px; white-space: nowrap; } section .btn { position: absolute; z-index: 5; padding: 10px 20px; font-weight: 600; transform: translateY(80px); background-color: #fff; border-radius: 30px; text-decoration: none; } section::after { content: ''; display: block; position: absolute; width: 100%; height: 100px; bottom: 0; left: 0; background: linear-gradient(to top, #1c0522, transparent); z-index: 7; } section img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; object-fit: cover; pointer-events: none; } .stars { z-index: 1; } .moon { z-index: 2; mix-blend-mode: screen; } .mountains_behind { z-index: 4; } .mountains_front { z-index: 5; } .text { color: #fff; padding: 20px 150px; background-color: #1c0522; } .text h2 { font-size: 30px; font-weight: 600; } .text a { font-size: 30px; font-weight: 600; }