:root{--primary-color: hsl(225deg, 25%, 15%);--white-color: rgb(255, 255, 255);--translucent-color: rgba(255, 255, 255, 0.9);--code-color: rgba(255, 255, 255, .2);--accent-color: hsl(265deg, 65%, 50%);--shadow-color: rgba(0, 0, 0, 0.3);--serif: -apple-system-ui-serif, ui-serif, Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--sans-serif: -apple-system, ui-sans-serif, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--monospace: ui-monospace, SFMono-Regular, Monaco, "Andale Mono", "Ubuntu Mono", monospace}*{margin:0;padding:0;font-family:var(--sans-serif);color:var(--white-color);outline:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}body{background:var(--accent-color)}header{position:fixed;top:0;left:50%;height:64px;width:720px;background:var(--accent-color);z-index:3;transform:translate(-50%, 0)}header h1{padding:0 20px;font-size:24px;line-height:64px}header h1 a{text-decoration:none}header nav{position:absolute;top:50%;right:20px;font-size:0;transform:translate(0, -50%)}header nav a{display:inline-block;margin-left:20px;font-size:14px;line-height:16px;padding:8px 0;font-weight:600;text-decoration:none}header nav a:first-of-type{margin-left:0}header nav a:hover{text-decoration:underline;text-underline-offset:.15em}header nav a.action{padding:6px 10px;font-weight:700;background:var(--accent-color);border:2px solid var(--white-color);border-radius:5px}header nav a.action:hover{text-decoration:none;color:var(--accent-color);background:var(--white-color)}main{width:720px;margin:64px auto;padding:0 20px}main section{padding-top:64px}main section h2{font-size:30px;line-height:32px;font-weight:700;letter-spacing:-0.01em;text-wrap:balance}main section p{margin:19px auto 0;font-size:19px;line-height:28px;color:var(--translucent-color);font-family:var(--serif);text-wrap:pretty}main section p a{font-family:var(--serif)}main section p code{padding:1.5px 3px;font-size:16px;font-family:var(--monospace);background:var(--code-color);border-radius:4px}main section p img{display:block;width:100%}main section p.carousel{position:relative}main section p.carousel img{position:absolute;top:0;left:0;opacity:0}main section p.carousel img.current{position:static;z-index:1;opacity:1;filter:drop-shadow(0 8px 10px var(--shadow-color))}main section p.carousel img.next{z-index:2;opacity:1;transition:1000ms}main section small{display:block;margin:18px auto 0;font-size:14px;line-height:18px}main section .action{display:inline-block;position:relative;margin-top:24px;padding:12px 48px 12px 16px;font-size:24px;line-height:24px;font-weight:700;color:var(--accent-color);text-decoration:none;background:var(--translucent-color);border-radius:5px}main section .action:hover,main section .action:active{background:var(--white-color)}main section .action:before{content:"";position:absolute;top:50%;right:20px;height:4px;width:19px;background:var(--accent-color);transform:translate(0, -50%)}main section .action:after{content:"";position:absolute;top:50%;right:20px;height:12px;width:12px;border-top:4px solid var(--accent-color);border-right:4px solid var(--accent-color);transform:translate(0, -50%) rotate(45deg)}footer{padding:40px 0;background:var(--primary-color)}footer nav{margin-bottom:16px;font-size:16px;line-height:16px;color:var(--white-color);text-align:center}footer nav a{color:var(--white-color)}footer p{font-size:16px;line-height:16px;color:var(--white-color);text-align:center}@media(max-width: 719px){header{width:100%}header h1{font-size:16px}header nav a{margin-left:10px}main{width:100%}}@media(max-width: 329px){header nav a:first-of-type{display:none}}