:root{--text-color-primary:#4e2c69;--text-color-secondary:white;--background-color-primary:#688AB7;--background-color-secondary:white;--breakpoint-tablet:40rem;--breakpoint-laptop:64rem;--breakpoint-desktop:80rem}html{font-size:16px;scroll-behavior:smooth;background-color:var(--background-color-primary)}body{font-family:Helvetica,trebuchet ms,lucida sans unicode,lucida grande,lucida sans,Arial,sans-serif;margin:0;background-color:var(--background-color-primary)}h2{font-size:1.8rem}header{height:12rem;max-width:64rem;margin:0 auto;text-align:center;color:var(--text-color-secondary);display:flex;align-items:center;justify-content:center;span { font-size: clamp(0.8rem, 3vw, 1.6rem); font-weight: 100; font-family: Helvetica, sans-serif; width: 33.3%; text-align: center; } object { height: 8rem; width: 8rem; }}#intro{box-sizing:border-box;background-color:var(--background-color-secondary);min-height:0;margin:2rem auto;@media screen and (width < 64rem){margin-left: 1rem; margin-right: 1rem; padding: 1rem;}border:.3rem double var(--background-color-primary)}main{background-color:var(--background-color-secondary);display:flow-root;text-align:center;section { max-width: 64rem; margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 300px; color: var(--text-color-primary); &.reverse { flex-wrap: wrap-reverse; } div { width: 100%; a { display: inline-block; background-color: var(--text-color-primary); color: var(--text-color-secondary); margin-top: 1rem; padding: 0.5rem 1rem 0.5rem 1rem; text-decoration: none; text-transform: uppercase; } img { display: block; width: 100%; height: 100%; } p { margin-left: 3rem; margin-right: 3rem; } } div:has(h2) { padding-top: 3rem; padding-bottom: 3rem; h2 { text-box-trim: trim-start; text-box-edge: cap text; margin: 0 0 2rem 0; } } @media screen and (width >= 64rem) { div:first-child { width: 50%; } div:nth-child(2) { width: 50%; } } }}footer{display:flex;flex-wrap:wrap-reverse;align-items:center;max-width:64rem;background-color:var(--background-color-primary);margin:0 auto;text-align:center;img { border-radius: 50% 50% 0% 0%; margin: 4rem 0 4rem 0; } div, picture { width: 100%; } div:first-child, picture { @media screen and (width >= 64rem) { width: 40%; } } div:nth-child(2) { @media screen and (width >= 64rem) { width: 60%; } h2 { color: var(--text-color-secondary); } }}#social{background-color:var(--background-color-primary);font-size:1.4em;text-align:center;opacity:.8;margin-top:2.5rem;a { margin: 1rem; color: black; }}