@import "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";body{--vr-red:#a00;--vr-blue:#037;--top-bg:#faf3de;--bottom-bg:#ffe;--heavy-bg:color-mix(in oklab, var(--bottom-bg), #210 15%);--inset:520px;--sans-serif:"Jost", sans-serif;--serif:"Zilla Slab", serif;min-height:100vh;margin:0;font-family:Zilla Slab,serif}h1,h2,h3,h4,h5,h6,.masthead{font-family:Jost,sans-serif}a,a:visited{color:var(--vr-blue)}.masthead{letter-spacing:10%;text-transform:uppercase;font-size:1rem}@keyframes spinOut{0%{transform:scale(.01)rotate(-1800deg)}90%{transform:scale(1.2)rotate(15deg)}to{transform:scale(1)rotate(15deg)}}@keyframes pop{0%{transform:scale(.01)rotate(-10deg)}80%{transform:scale(1.2)rotate(-10deg)}to{transform:scale(1)rotate(-10deg)}}@keyframes linkPop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}html,body{margin:0;padding:0}body{background-color:var(--bottom-bg);--main-logo-size:420px;font-family:Jost,sans-serif;overflow-x:hidden}header{background-image:linear-gradient(to bottom, var(--top-bg) 0, var(--top-bg) calc(3em + 100px), var(--bottom-bg) calc(3em + 100px));min-height:300px;position:relative;& .masthead{text-align:center;margin:0;padding:1rem 0}& .mainLogo{--main-logo-half:calc(var(--main-logo-size) / 2);background-image:var(--crimp-fg), var(--crimp-bg);background-position:calc(50% + 24px) 0;background-repeat:no-repeat;background-size:var(--main-logo-half) var(--main-logo-half), 200% var(--main-logo-half);height:var(--main-logo-half);display:block;position:relative;& img{width:calc(var(--main-logo-size,420px) / 2);height:calc(var(--main-logo-size,420px) / 2);top:0;left:calc(50% - 24px - var(--main-logo-half) / 2);display:block;position:absolute;transform:rotate(-45deg)}}}main{width:max-content;margin:0 auto;position:relative;& .voteFor{text-transform:uppercase;color:var(--vr-red);font-size:2.5rem;font-weight:700;position:absolute;top:-120px;left:calc(50% + 80px)}& .linkList{z-index:1;text-transform:uppercase;letter-spacing:5%;color:var(--vr-blue);background-color:#fff;border:1px solid #eee;width:max-content;margin:0 auto;padding:2em;font-size:1.25rem;font-style:oblique;font-weight:500;line-height:2em;list-style:none;animation:.5s linear spinOut;display:block;position:relative;transform:rotate(15deg);box-shadow:8px 8px 10px #0003;& a{color:inherit;z-index:3;text-decoration:none;transition:transform .2s ease-in-out;display:inline-block;position:relative;transform:scale(1);&:hover,&:focus{transform:scale(1.1)}}& li:last-of-type a{font-weight:800}& li:first-of-type{animation:.5s ease-in-out .4s linkPop}& li:nth-of-type(2){animation:.5s ease-in-out .5s linkPop}& li:nth-of-type(3){animation:.5s ease-in-out .6s linkPop}& li:nth-of-type(4){animation:.5s ease-in-out .7s linkPop}& li:nth-of-type(5){animation:.5s ease-in-out .8s linkPop}& li:nth-of-type(6){animation:.5s ease-in-out .9s linkPop}& li:nth-of-type(7){animation:.5s ease-in-out 1s linkPop}& li:nth-of-type(8){animation:.5s ease-in-out 1.1s linkPop}& li:nth-of-type(9){animation:.5s ease-in-out 1.2s linkPop}& li:nth-of-type(10){animation:.5s ease-in-out 1.3s linkPop}}& a.findOutMore,& a.findOutMore:visited{text-align:center;background-color:var(--vr-red);color:#fff;text-transform:uppercase;padding:.5em 1.5em;font-size:2.5rem;font-weight:800;text-decoration:none;animation:.5s ease-in-out pop;display:block;& .sub{text-transform:none;font-size:.7rem;font-weight:400;display:block}transition:transform .2s ease-in-out;transform:scale(1)rotate(-10deg);&:hover,&:focus{transform:scale(1.1)rotate(-5deg)}}}@media (width<=599.9px){header .masthead{font-size:.75rem}main{& .voteFor{font-size:1.75rem}& .findOutMore{width:min-content;line-height:1.1}}}@media (width>=600px){header{background-image:linear-gradient(to bottom, var(--top-bg) 0, var(--top-bg) calc(3em + 200px), var(--bottom-bg) calc(3em + 200px));& .masthead{padding-bottom:3rem}& .mainLogo{background-image:var(--crimp-fg), var(--crimp-bg);background-position:top;background-repeat:no-repeat;background-size:auto,200% 100%;min-height:370px;position:relative;& img{width:var(--main-logo-size,420px);height:var(--main-logo-size,420px);top:-50px;left:calc(50% - 280px)}}}main{margin-top:5rem}}@media (width>=960px){body{background-image:linear-gradient(to bottom, var(--top-bg) 0, var(--top-bg) calc(50% - var(--main-logo-size) / 2 - 5% + 1rem), var(--bottom-bg) calc(3em + 200px));grid-template-rows:calc(50% - var(--main-logo-size) / 2 - 5%) 3.5rem 1fr;grid-template-columns:1fr 1fr;display:grid}header{--logo-offset:200px;background-image:linear-gradient(to bottom, var(--top-bg) 0, var(--top-bg) calc(3em + 200px), var(--bottom-bg) calc(3em + 200px));grid-area:2/1/4/3;position:relative;& .masthead{width:max-content;padding:1rem 0 1rem calc(2 * var(--logo-offset));margin:0 auto;line-height:1.5rem}& .mainLogo{background-position:calc(50% - var(--logo-offset)) top;background-size:auto,200% 100%;min-height:370px;& img{top:-50px;left:calc(50% - var(--logo-offset) - 280px)}}}main{grid-area:3/2/4/3;margin:0;position:relative;& .voteFor{z-index:2;width:max-content;font-size:2.5rem;position:relative;top:0;left:0}& .linkList{margin-top:-6em;margin-left:6rem}}}
