#root{display:grid;row-gap:var(--size-6);--_container-sm: 24rem;--_container-lg: 32rem;--_spacing-0: .125rem;--_spacing-1: .25rem;--_spacing-2: .5rem;--_spacing-3: .75rem;--_spacing-4: 1rem;--_spacing-5: 1.25rem;--_rounded-md: calc(var(--_spacing-0) * 3);--_rounded-xl: calc(var(--_spacing-0) * 6);--_rounded-full: calc(infinity * 1px);--_border-2: 2px;--_translate-x: calc(-1 * var(--_spacing-0));--_translate-y: var(--_translate-x);a.contact{position:relative;width:fit-content;border-radius:var(--_rounded-xl);border-width:var(--_border-2);border-color:#000;background-color:#fff;padding-block:var(--_spacing-3);padding-inline:var(--_spacing-5);font-weight:var(--font-weight-semi-bold);color:#000;&:after{content:"\1f4e7";position:absolute;top:-30%;left:calc(-1 * var(--_spacing-3));font-size:var(--font-size-2)}&:hover{text-decoration:none}}>header{display:grid;row-gap:var(--size-6);justify-items:center;overflow-x:hidden;>img{max-width:120%;@media(width>=640px){max-width:100%}}>nav{display:flex;column-gap:var(--size-3);align-items:center;>a[href="#rules"]{max-width:fit-content;background-color:#000;border-radius:var(--_rounded-md);&:hover{text-decoration:none}>span{display:block;translate:var(--_translate-x) var(--_translate-y);padding-block:var(--_spacing-2);padding-inline:var(--_spacing-4);border-radius:var(--_rounded-md);border-width:var(--_border-2);border-color:#000;background-color:var(--rose-300);color:#000;font-size:var(--font-size-0);font-weight:var(--font-weight-bold);&:is(a:hover>span){background-color:var(--rose-400)}}}>a[href="#discord"]{--_size: 2.5rem;width:var(--_size);height:var(--_size);background-color:#000;border-radius:var(--_rounded-full);>span{width:var(--_size);translate:var(--_translate-x) var(--_translate-y);height:var(--_size);display:grid;place-items:center;border-radius:var(--_rounded-full);border-width:var(--_border-2);border-color:#000;background-color:var(--discord);>img{width:calc(var(--_size) * .5);height:auto}}}}}>main{display:grid;row-gap:var(--size-6);max-width:512px;margin-inline:auto;padding-inline:var(--size-2);>#about{display:grid;row-gap:var(--size-3);>h2{text-wrap:balance;font-size:var(--font-size-2);font-weight:var(--font-weight-bold)}>a{&:has(>img){padding-block:var(--size-2);img{margin-inline:auto;max-width:144px}}&.contact{margin-inline:auto}}}>#discord{display:grid;row-gap:var(--size-3);>h2{text-wrap:balance;font-size:var(--font-size-2);font-weight:var(--font-weight-bold)}>a{justify-self:center;max-width:fit-content;background-color:#000;border-radius:var(--_rounded-md);>span{translate:var(--_translate-x) var(--_translate-y);display:flex;padding-block:var(--_spacing-2);padding-inline:var(--_spacing-4);align-items:center;column-gap:var(--_spacing-3);border-radius:var(--_rounded-md);border-width:var(--_border-2);font-weight:var(--font-weight-bold);border-color:#000;color:var(--discord-on);background-color:var(--discord);>img{margin-inline:auto;max-width:20px}}}}>#rules{display:grid;row-gap:var(--size-3);>h2{text-wrap:balance;font-size:var(--font-size-2);font-weight:var(--font-weight-bold)}>h3{text-wrap:balance;font-size:var(--font-size-1);font-weight:var(--font-weight-bold)}>ol{padding-inline-start:var(--_spacing-5);>li{list-style:disc}}}>#newsletter{>form{max-width:var(--_container-sm);margin-inline:auto;>fieldset{display:flex;column-gap:var(--_spacing-3);>legend{text-wrap:balance;font-size:var(--font-size-1);margin-bottom:var(--size-3);text-align:center;font-weight:var(--font-weight-semi-bold)}>input[type=email]{width:100%;background-color:#fff;border-radius:var(--_rounded-md);border-width:var(--_border-2);border-color:#000;padding-block:var(--_spacing-1);padding-inline:var(--_spacing-2)}>button[type=submit]{width:fit-content;background-color:#000;border-radius:var(--_rounded-md);cursor:pointer;>span{display:block;font-size:var(--font-size--1);translate:var(--_translate-x) var(--_translate-y);padding-block:calc(var(--_spacing-3) * .5);padding-inline:var(--_spacing-2);width:12ch;align-items:center;border-radius:var(--_rounded-md);border-width:var(--_border-2);font-weight:var(--font-weight-bold);border-color:#000;background-color:var(--cyan-300);color:#000;&:is(button:hover>span){background-color:var(--cyan-400)}>svg{width:1.5rem;height:auto}}}}>p{margin-top:var(--_spacing-1);color:var(--red-700);&.success{color:var(--green-700)}}}}>#events{border-radius:var(--border-radius-5);border-width:var(--_border-2);border-color:#000;background-color:#fff;>header{padding-inline:var(--size-3);padding-block:var(--size-1);border-bottom-width:var(--_border-2);border-color:#000;>h2{font-size:var(--font-size-2);font-weight:var(--font-weight-bold)}>p{font-size:var(--font-size--1);color:var(--gray-700)}}>ol{display:grid;row-gap:var(--size-3);padding-inline:var(--size-3);padding-block:var(--size-1);>li{>h3{font-size:var(--font-size-1);font-weight:var(--font-weight-bold)}>a{font-size:var(--font-size--1);&[aria-disabled]{color:var(--gray-700);pointer-events:none}}>form{>fieldset{display:grid;margin-top:var(--size-1);row-gap:var(--_spacing-2);>input{width:100%;background-color:#fff;border-radius:var(--_rounded-md);border-width:var(--_border-2);border-color:#000;padding-block:var(--_spacing-1);padding-inline:var(--_spacing-2)}>p{margin-top:var(--_spacing-1);color:var(--red-700);&.success{color:var(--green-700)}}>button[type=submit]{justify-self:end;width:fit-content;background-color:#000;border-radius:var(--_rounded-md);cursor:pointer;>span{display:block;font-size:var(--font-size--1);translate:var(--_translate-x) var(--_translate-y);padding-block:calc(var(--_spacing-3) * .5);padding-inline:var(--_spacing-2);width:12ch;align-items:center;border-radius:var(--_rounded-md);border-width:var(--_border-2);font-weight:var(--font-weight-bold);border-color:#000;background-color:var(--cyan-300);color:#000;&:is(button:hover>span){background-color:var(--cyan-400)}>svg{width:1.5rem;height:auto}}}}}}}}}>footer{display:grid;row-gap:var(--size-6);justify-items:center;overflow-x:hidden;>p{text-align:center;text-wrap:balance;font-size:var(--font-size-3);font-weight:var(--font-weight-bold)}>img{max-width:180%;@media(width>=640px){max-width:100%}}}}