:root{--bg:#111;--text:#fff}html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif}body{background:var(--bg);color:var(--text);flex-direction:column;transition:background .6s;display:flex;overflow-x:hidden}.container{flex:1;position:relative}header{text-transform:uppercase;letter-spacing:.02em;justify-content:space-between;align-items:center;padding:1.5rem 2rem;font-size:1rem;display:flex}nav ul{gap:1.5rem;margin:0;padding:0;list-style:none;display:flex}a{color:var(--text);text-decoration:none}.index{margin:0;padding:0;line-height:1.2;list-style:none;position:absolute;top:120px;left:22px}.index li{cursor:pointer;opacity:.2;-webkit-user-select:none;user-select:none;font-size:2.6rem;font-weight:700;transition:opacity .3s}.index li.active{opacity:1}main{max-width:960px;margin:160px auto 0;padding:0 1rem 6rem;transition:opacity .4s}main.fade-out{opacity:0}h1{margin:0 0 1rem;font-size:3rem;font-weight:700;line-height:1.2}p{max-width:60ch;margin:0 0 1.25rem;font-size:1.25rem}.fab{cursor:pointer;background:#fff;border-radius:50%;width:64px;height:64px;position:fixed;bottom:32px;right:32px;box-shadow:0 4px 16px #0000004d}.fab:after{content:"";border-bottom:3px solid #000;border-right:3px solid #000;width:14px;height:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}footer{text-align:center;opacity:.6;padding:2rem 1rem;font-size:.85rem}