.round{position:relative;width:100%;height:auto;text-align:center}.round .round-back{width:100%;height:auto;z-index:1}.round .content{position:absolute;z-index:3;max-width:300px;width:60%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-05);background:radial-gradient(circle,color-mix(in srgb,var(--color-2-9) 80%,transparent 20%) 50%,transparent 80%);font-family:var(--font-menu, sans-serif);font-size:90%}.round.left .round-back{transform:rotate(40deg)}.round.left .content{top:26px;right:40px}.round.right .round-back{transform:rotate(-40deg)}.round.right .content{top:26px;left:40px}:root{--font-title: "Tangerine";--font-body: "Sedan";--font-menu: "Cinzel Decorative";--size-05: 4px;--size-1: 8px;--size-15: 12px;--size-2: 16px;--size-25: 20px;--size-3: 24px;--size-4: 32px;--size-5: 40px;--size-6: 48px;--size-7: 56px;--size-8: 64px;--size-9: 72px;--size-10: 80px;--font-size-xl: var(--size-9);--font-size-l: var(--size-7);--font-size-ml: var(--size-5);--font-size-m: var(--size-3);--font-size-s: var(--size-25);--font-size-xs: var(--size-2);--font-size-xxs: var(--size-1);--font-size-title: var(--font-size-l);--font-size-button: var(--font-size-m);--font-size-button-s: var(--font-size-s);--font-size-button-xs: var(--font-size-xs);--font-size-body: var(--font-size-s);--font-size-menu: var(--font-size-s);--color-1-1: hsl(194, 64%, 5%);--color-1-2: hsl(194, 64%, 15%);--color-1-3: hsl(194, 64%, 25%);--color-1-4: hsl(194, 64%, 35%);--color-1-5: hsl(194, 64%, 45%);--color-1-6: hsl(194, 64%, 55%);--color-1-7: hsl(194, 64%, 65%);--color-1-8: hsl(194, 64%, 75%);--color-1-9: hsl(194, 64%, 85%);--color-1-10: hsl(194, 64%, 95%);--color-2-1: hsl(16, 64%, 5%);--color-2-2: hsl(16, 64%, 15%);--color-2-3: hsl(16, 64%, 25%);--color-2-4: hsl(16, 64%, 35%);--color-2-5: hsl(16, 64%, 45%);--color-2-6: hsl(16, 64%, 55%);--color-2-7: hsl(16, 64%, 65%);--color-2-8: hsl(16, 64%, 75%);--color-2-9: hsl(16, 64%, 85%);--color-2-10: hsl(16, 64%, 95%);--color-3-1: hsl(42, 100%, 5%);--color-3-2: hsl(42, 100%, 15%);--color-3-3: hsl(42, 100%, 25%);--color-3-4: hsl(42, 100%, 35%);--color-3-5: hsl(42, 100%, 45%);--color-3-6: hsl(42, 100%, 55%);--color-3-7: hsl(42, 100%, 65%);--color-3-8: hsl(42, 100%, 75%);--color-3-9: hsl(42, 100%, 85%);--color-3-10: hsl(42, 100%, 95%);--color-4-1: hsl(166, 64%, 5%);--color-4-2: hsl(166, 64%, 15%);--color-4-3: hsl(166, 64%, 25%);--color-4-4: hsl(166, 64%, 35%);--color-4-5: hsl(166, 64%, 45%);--color-4-6: hsl(166, 64%, 55%);--color-4-7: hsl(166, 64%, 65%);--color-4-8: hsl(166, 64%, 75%);--color-4-9: hsl(166, 64%, 85%);--color-4-10: hsl(166, 64%, 95%);--color-primary: var(--color-1-3);--color-primary-variant-1: var(--color-1-5);--color-primary-variant-2: var(--color-1-8);--color-secondary: var(--color-2-3);--color-secondary-variant-1: var(--color-2-5);--color-secondary-variant-2: var(--color-2-8);--color-tertiary: var(--color-4-3);--color-tertiary-variant-1: var(--color-4-5);--color-tertiary-variant-2: var(--color-4-8);--bg: var(--color-3-10);--surface: var(--color-3-10);--on-bg: var(--color-2-1);--on-surface: var(--color-2-1);--on-primary: var(--color-3-9);--on-secondary: var(--color-3-9);--on-tertiary: var(--color-3-9)}body{margin:0;padding:0;font-family:var(--font-body, sans-serif);background-color:var(--bg);color:var(--on-bg)}button,.button{font-family:var(--font-menu, sans-serif);font-size:var(--font-size-button, 16px);background-color:var(--color-primary);color:var(--on-primary);border:none;border-radius:var(--size-05);padding:var(--size-1) var(--size-3);cursor:pointer;transition:background-color .3s;text-decoration:none}button.secondary,.button.secondary{background-color:var(--color-secondary);color:var(--on-secondary)}button.tertiary,.button.tertiary{background-color:var(--color-tertiary);color:var(--on-tertiary)}button.small,.button.small{font-size:var(--font-size-button-xs, 12px)}@media (max-width: 768px){--font-size-body: var(--font-size-xs)}@media (max-width: 480px){--font-size-body: var(--font-size-xxs);button,.button{font-size:var(--font-size-button-s, 12px)}}button:hover,.button:hover{background-color:var(--color-secondary-variant-1)}.logo{font-family:var(--font-title, cursive);font-size:100px;color:var(--color-primary);text-shadow:0 -2px 2px var(--color-2-9),0 -2px 4px var(--color-2-7),0 -8px 10px var(--color-3-8);letter-spacing:-32px;font-weight:700}a{color:var(--color-secondary-variant-1);text-decoration:none}
