@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");*{margin:0;padding:0;box-sizing:border-box}:root{--background:#ffffff;--foreground:#171717;--nav-tile-gap:10px;--middle-box-size:60px;--button-size:90px}::-webkit-scrollbar{display:none}.main{height:300vh}section.middle-wrap{width:100vw;height:100vh;position:fixed;top:0;left:0;display:grid;place-items:center}div.middle{color:white;inset:0;border:1px solid #0061fe;display:flex;flex-direction:column;margin:0 auto}div.middle .middle-text-cont{position:relative;width:min(500px,min(100vw,100vh) - 64px);height:100%;display:flex;flex-direction:column;justify-content:end;align-items:start;padding:15px}div.middle-text-cont .middle-text-one,div.middle-text-cont .middle-text-two{position:absolute;top:0;left:0;font-size:38px;font-weight:700;font-family:Work Sans,sans-serif;font-optical-sizing:auto;font-style:normal;padding:20px;line-height:120%}div.middle .middle-text-two{opacity:0;font-size:29px}div.middle .middle-logo{display:grid;place-items:center;height:var(--middle-box-size);width:var(--middle-box-size)}div.middle .middle-logo svg{width:100%;height:100%}.scroll-main{height:300vh}.cards-cont{display:grid;position:fixed;width:100%;height:100%}.cards-cont>div{display:grid;padding:15px 20px;position:absolute;font-family:Public Sans,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal;font-size:min(2.75vw - 6px,1.375vw + 15px)}.cards-cont div:first-child{width:calc(20% - var(--nav-tile-gap) * 2);height:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap));left:var(--nav-tile-gap);top:var(--nav-tile-gap);transform-origin:100% 100%;border-radius:8px 0 0 0;grid-area:a;background-color:#283750;color:#b4c8e1}.cards-cont div:nth-child(2){height:calc(50% - var(--button-size) / 2 - var(--nav-tile-gap) * 2);width:calc(30% + var(--button-size) / 2);left:20%;top:var(--nav-tile-gap);transform-origin:100% 100%;grid-area:b;background-color:#fad24b;color:#684505}.cards-cont div:nth-child(3){width:calc(30% - var(--button-size) / 2 - var(--nav-tile-gap));height:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap));top:var(--nav-tile-gap);transform-origin:0 100%;right:20%;background-color:#3dd3ee;color:#055463;grid-area:c}.cards-cont div:nth-child(4){top:var(--nav-tile-gap);right:var(--nav-tile-gap);transform-origin:0 100%;border-radius:0 8px 0 0;background-color:#fa551e;color:#4e0119;grid-area:d}.cards-cont div:nth-child(4),.cards-cont div:nth-child(5){height:calc(50% - var(--button-size) / 2 - var(--nav-tile-gap) * 2);width:calc(20% - var(--nav-tile-gap) * 2)}.cards-cont div:nth-child(5){left:var(--nav-tile-gap);bottom:var(--nav-tile-gap);transform-origin:100% 0;border-bottom-left-radius:8px;position:absolute;background-color:#b4dc19;color:#175641;border-radius:0 0 0 8px;grid-area:h}.cards-cont div:nth-child(6){width:calc(30% - var(--button-size) / 2 - var(--nav-tile-gap));height:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap));left:20%;bottom:var(--nav-tile-gap);transform-origin:100% 0;background-color:#ff8c19;color:#6d2e09;grid-area:e}.cards-cont div:nth-child(7){height:calc(50% - var(--button-size) / 2 - var(--nav-tile-gap) * 2);width:calc(30% + var(--button-size) / 2);right:20%;bottom:var(--nav-tile-gap);transform-origin:0 0;background-color:#892055;color:#ffafa5;grid-area:i}.cards-cont div:nth-child(8){height:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap));width:calc(20% - var(--nav-tile-gap) * 2);bottom:var(--nav-tile-gap);right:var(--nav-tile-gap);transform-origin:0 0;border-bottom-right-radius:8px;border-radius:0 0 8px 0;background-color:#c8aff0;color:#682760;grid-area:g}.cards-cont.done>div:hover{background:#000;color:white;transition:.4s}@media screen and (max-width:991px){:root{--nav-tile-gap:5px;--middle-box-size: }div.middle-text-cont .middle-text-one,div.middle-text-cont .middle-text-two{font-size:24px}div.middle .middle-logo{height:var(--middle-box-size);width:var(--middle-box-size);transition:initial;color:white;background:var(--accent--tab);width:calc(min(500px, calc(min(100vw, 100vh) - 64px)) - calc(1 * calc(min(500px, calc(min(100vw, 100vh) - 64px)) - var(--middle-box-size))));height:calc(min(500px, calc(min(100vw, 100vh) - 64px)) - calc(1 * calc(min(500px, calc(min(100vw, 100vh) - 64px)) - var(--middle-box-size))));border:1px solid transparent}.cards-cont div{font-size:20px}.cards-cont div:first-child{height:calc(25% - var(--nav-tile-gap) * 2);width:calc(50% - var(--button-size) / 2 - var(--nav-tile-gap) * 2);transform-origin:100% 100%}.cards-cont div:nth-child(2){top:var(--nav-tile-gap);left:auto;width:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap));height:calc(25% - var(--nav-tile-gap) * 2);right:var(--nav-tile-gap);transform-origin:0 100%;border-radius:0 8px 0 0}.cards-cont div:nth-child(3){height:calc(25% - var(--button-size) / 2 - var(--nav-tile-gap));width:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap));top:25%;right:auto;left:var(--nav-tile-gap);transform-origin:100% 100%;border-radius:0 0 0 0}.cards-cont div:nth-child(4){left:auto;transform-origin:0 100%;top:25%}.cards-cont div:nth-child(4),.cards-cont div:nth-child(5){height:calc(25% + var(--button-size) / 2);width:calc(50% - var(--button-size) / 2 - var(--nav-tile-gap) * 2);border-radius:0 0 0 0}.cards-cont div:nth-child(5){top:auto;transform-origin:100% 0;bottom:25%}.cards-cont div:nth-child(6){left:auto;right:var(--nav-tile-gap);height:calc(25% - var(--button-size) / 2 - var(--nav-tile-gap));transform-origin:0 0;bottom:25%;border-radius:0 0 0 0}.cards-cont div:nth-child(6),.cards-cont div:nth-child(7){width:calc(50% + var(--button-size) / 2 - var(--nav-tile-gap))}.cards-cont div:nth-child(7){right:auto;left:var(--nav-tile-gap);height:calc(25% - var(--nav-tile-gap) * 2);transform-origin:100% 0;border-bottom-left-radius:8px;border-radius:0 0 0 8px}.cards-cont div:nth-child(8){height:calc(25% - var(--nav-tile-gap) * 2);width:calc(50% - var(--button-size) / 2 - var(--nav-tile-gap) * 2);border-radius:0 0 8px 0}div.middle .middle-text-cont{padding:10px}}@media screen and (max-width:479px){.cards-cont div{padding:8px}}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba015fad6dcf6784-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/569ce4b8f30dc480-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Geist Fallback;src:local("Arial");ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.00%;size-adjust:104.76%}.__className_4d318d{font-family:Geist,Geist Fallback;font-style:normal}.__variable_4d318d{--font-geist-sans:"Geist","Geist Fallback"}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/747892c23ea88013-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/93f479601ee12b01-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Geist Mono Fallback;src:local("Arial");ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.00%;size-adjust:134.59%}.__className_ea5f4b{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.__variable_ea5f4b{--font-geist-mono:"Geist Mono","Geist Mono Fallback"}