/* # Components */ section.split { display: grid; grid-template-columns: repeat(2, 1fr); } section.split > div { display: flex; align-items: center; flex-direction: column; justify-content: center; } /* # Sections */ /* ## Intro */ section#intro { min-height: 70svh; } /* ### Compass */ section#intro div.compass svg { --size: 50svh; width: var(--size); height: var(--size); position: absolute; } section#intro div.compass svg.points { opacity: .2; animation: spin 10s alternate infinite linear; } @keyframes spin { to { transform: rotate(30deg); } } section#intro div.compass svg:nth-child(2) { --size: calc(var(--size) - 30px); animation-duration: 15s; animation-direction: alternate-reverse; } /* ## Assets */ section#assets { height: 100svh; }