*,*::before,*::after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:pretty}html{--black:#242424;--white:#f2f2f2;--white2:#efefef;--red:#ff5d00;--green:#60b157;--blue:#0668c9;--yellow:#fdc238;--dark-green:#42823B}@font-face{font-family:DGO;src:url(/fonts/dgo.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:PM;src:url(/fonts/ibmpm.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block}@font-face{font-family:PM;src:url(/fonts/ibmpm-i.woff2)format("woff2");font-weight:400;font-style:italic;font-display:block}@font-face{font-family:PM;src:url(/fonts/ibmpm-b.woff2)format("woff2");font-weight:700;font-style:normal;font-display:block}@font-face{font-family:PM;src:url(/fonts/ibmpm-bi.woff2)format("woff2");font-weight:700;font-style:italic;font-display:block}body{background-color:var(--yellow);background-repeat:no-repeat;background-position:50% 100px;font-family:PM;font-size:14px}@media screen and (width >=500px){body{background-image:url(/img/dots-bg.d4965f8bc9deb3774ec51e5d96bae099620729a096d2b462e2bfcea644386135.avif)}}body{min-height:100dvh}header{max-width:1200px;margin:0 auto}header ul{list-style:none}nav.full{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between;max-width:1200px;&>a { min-width: 134px; } &>p { min-width: 30px; } button { background: transparent; border: none; display: block; padding: 5px; &:hover { cursor: pointer; } svg { width: 20px; height: 20px; } } &>ul { display: none; }}#nav-c{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;max-width:unset;max-height:unset;margin:0;padding:10px;border:none;overflow-x:hidden;visibility:hidden;pointer-events:none;user-select:none;background:var(--yellow);opacity:0;transition:all 400ms ease;font-size:12px;line-height:1.4;section { text-align: left; } &::backdrop { background: none; } &[open] { opacity: 1; visibility: visible; pointer-events: unset; user-select: text; } a { text-decoration: none; color: var(--black); } strong { display: block; font: normal 18px/1 DGO; letter-spacing: 0.1px; margin-bottom: 8px; } em { font-style: normal; } &>div { padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; button { display: block; padding: 5px; background: transparent; border: 0; &:hover { cursor: pointer; } } } section { display: flex; padding: 15px; border: 2px solid var(--black); border-bottom-width: 4px; margin: 0; border-radius: 10px; width: 100%; background: var(--white); flex-wrap: wrap; gap: 15px; flex-direction: row-reverse; justify-content: center; transition: transform 200ms ease; transform: translateX(100vw); } &[open] section { transform: translateX(0); } section>a { flex-basis: 255px; align-self: flex-start; flex-grow: 1; border: 2px solid var(--black); border-radius: 10px; border-bottom-width: 4px; overflow: hidden; span { display: block; padding: 10px; } svg { margin-top: 10px; } img { margin: 0; padding: 0; width: 100%; height: 255px; overflow: hidden; object-fit: cover; } } ul { flex-grow: 100; flex-basis: 285px; padding: 0; li { margin-bottom: 15px; } li:last-child { margin-bottom: 0; } a { display: flex; align-items: center; } a img { width: 60px; height: 60px; background-color: var(--yellow); border: 2px solid var(--black); border-radius: 8px; margin-right: 12px; padding: 13px; } }}@media screen and (max-width:400px){#nav-c{section { padding: 10px; } strong { font-size: 17px; margin-bottom: 5px; } ul { font-size: 12px; } ul a { align-items: flex-start; } ul a img { width: 40px; height: 40px; padding: 8px; margin-right: 8px; }}}@media screen and (min-width:900px){header{padding-top:15px}nav.full{a { text-decoration: none; color: var(--black); } &>ul>li>a, &>ul>li>span { font-size: 14px; font-family: DGO; line-height: 1; } &>a { flex-grow: 1; } &>p { display: none; } &>ul { display: flex; gap: 15px; &>li { &>a, &>span { display: block; padding: 0 15px; height: 100%; display: flex; align-items: center; } span { &:hover { cursor: pointer; } &>svg { display: inline-block; margin-left: 7px; transition: transform 200ms ease; } &:has(+ .open)>svg { transform: rotate(180deg); } } } } .btn { background-color: var(--yellow); font: 600 14px/1 PM; padding: 9px 20px; }}#nav-m{position:absolute;left:0;top:70px;z-index:100;width:100%;opacity:0;visibility:hidden;padding:20px;transition:visibility 200ms linear,opacity 200ms ease;font-size:12px;&.open { visibility: visible; opacity: 1; } strong { display: block; font: normal 16px/1 DGO; letter-spacing: 0.1px; margin-bottom: 6px; } em { font-style: normal; line-height: 1.3; } ul { max-width: 1200px; display: grid; align-items: center; grid-template-columns: 265px 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; column-gap: 20px; row-gap: 0; padding: 15px; margin: 0 auto; border: 2px solid var(--black); border-radius: 10px; border-bottom-width: 4px; background-color: var(--white); } li:first-child { grid-column: 1 / 2; grid-row: 1 / 5; border: 2px solid var(--black); border-radius: 10px; border-bottom-width: 4px; overflow: hidden; span { display: block; padding: 10px; } svg { margin-top: 10px; } img { margin: 0; padding: 0; width: 100%; height: 255px; overflow: hidden; object-fit: cover; } } li:not(:first-child) a { display: flex; align-items: center; img { width: 60px; height: 60px; margin-right: 12px; padding: 13px; background-color: var(--yellow); border: 2px solid var(--black); border-radius: 8px; } }}}nav.ch{padding:20px 20px 0;display:flex;gap:20px;justify-content:space-between;ul { margin: 0; padding: 0; display: flex; gap: 20px; flex-grow: 1; justify-content: flex-end; align-items: flex-end; text-align: center; color: rgb(0 0 0 / 0.6); transform: translateY(2px); a { font-weight: bold; font-family: PM; text-decoration: none; color: var(--black); &:hover { text-decoration: underline; } } }}main nav.ch{max-width:1200px;margin:25px auto 0;padding-bottom:50px}footer{margin-top:50px;padding:50px 15px 30px;font-size:12px;text-transform:uppercase;text-align:center;border-top:2px solid var(--black);&>a { display: inline-block; img { width: 150px; transition: transform 50ms ease; } &:hover img { transform: scale(1.04); } } p { margin: 15px auto; max-width: 600px; } ul { list-style: none; display: flex; margin: 40px 0; padding: 0; gap: 30px; flex-wrap: wrap; justify-content: center; } li a { display: flex; width: 50px; height: 50px; justify-content: center; align-items: center; border: 2px solid var(--black); border-radius: 12px; background: var(--white); box-shadow: 8px 8px 1px -3px rgb(0 0 0 / 0.2), 3px 3px 0 -1px var(--black); transform: rotate(-4deg); transition: transform 100ms ease; img { width: auto; height: 21px; } } li:nth-child(2n) a { transform: rotate(4deg); } li a:hover { transform: scale(1.1); }}.btn{display:inline-block;padding:10px 17px;border:2px solid var(--black);border-bottom-width:4px;border-radius:7px;letter-spacing:1.25px;text-transform:uppercase;text-decoration:none;background:var(--white);transition:all 100ms ease-in-out;box-shadow:4px 4px rgb(0 0 0/.15),inset 4px 4px rgb(255 255 255/.15);text-wrap:nowrap;color:var(--black);font-weight:700;&:hover { color:var(--white); background-color:var(--black); }}.btn-ok{background:var(--dark-green);max-width:400px;color:#fff}.btn-cancel{background:var(--red)}button.text{background:0 0;border:none;color:var(--blue);text-decoration:underline;padding:0;display:inline-block;&:hover { cursor:pointer; }}.btn.img{display:flex;align-items:center;justify-content:center;padding:8px clamp(5px,10%,20px);&:hover { background-color:var(--white); } img { width:100%; height:auto; }}.btn.popping{transition:transform 100ms ease;&:hover { transform:scale(1.03); }}.btn.left-skewed{transform:rotate(-2deg)}.btn.right-skewed{transform:rotate(2deg)}.btn.left-skewed.popping:hover{transform:rotate(-2deg)scale(1.03)}.btn.right-skewed.popping:hover{transform:rotate(2deg)scale(1.03)}@media(hover:hover){.btn:hover{background:var(--black);color:var(--white);cursor:pointer}}input[type=checkbox]{appearance:none;position:relative;display:inline-block;vertical-align:middle;background:#ccc;width:60px;height:34px;border-radius:34px;box-shadow:0 1px 3px #0003 inset;transition:200ms ease background;margin-right:5px;&::before { content:''; display:block; width:26px; height:26px; position:absolute; left:4px; bottom:4px; background:#fff; box-shadow:0px 1px 3px #0003; border-radius:50%; transform:translateX(0rem); transition:200ms ease transform; } &:checked { background:var(--blue); } &:checked::before { transform:translateX(26px); } &:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }}h1,h2,h3,h4{font-family:DGO;font-weight:400}img,video{height:auto}main{h1, h2, h3, h4 { line-height: 1.2; } h1 { font-size: 38px; text-align: center; margin: 90px 20px 50px; } .subh { text-align: center; } h1:has(+ .subh) { margin-bottom: 0; } h2 { font-size: 24px; } p { margin: 15px 0; } ul { list-style: none; padding: 0; } section { p:last-child { margin-bottom: 0; } }}@media screen and (min-width:710px){main{h1:has(+ .subh) { margin-bottom:25px; }}}body.std main{margin:0 15px}a.hi-viz{font-weight:700}.sr-only{border:0;clip-path:inset(50%);height:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.box{border-radius:12px;background:var(--white);border:2px solid var(--black);box-shadow:5px 5px rgb(0 0 0/.15),3px 3px inset rgba(255,255,255,.5)}.box.fat{border-radius:18px;background:var(--white);border:2px solid var(--black);box-shadow:8px 8px 1px -3px rgb(0 0 0/.2),3px 3px 0 -1px var(--black),3px 3px inset rgba(255,255,255,.5)}.box.small{border-radius:8px}.box.heavy{border-bottom-width:4px}.box.padded{padding:25px}.box.plain{box-shadow:none}.box.text{max-width:700px;margin:0 auto}.box.textured{background-image:url(/img/card-bg.fe44bb4b31d9d054be3f66a70ab5723acee5eecadd5ec323b7a7db0744873069.avif);background-size:contain}.box.flat{box-shadow:5px 5px rgb(0 0 0/.15)}.box.fat.flat{box-shadow:8px 8px 1px -3px rgb(0 0 0/.2),3px 3px 0 -1px var(--black)}.box.tilted{transform:rotate(-.75deg);&:nth-child(even) { transform:rotate(0.75deg); }}a.box{display:block;color:var(--black);text-decoration:none}.pop{transition:transform 150ms ease;&:hover { transform:scale(1.01); }}.b-list{max-width:1e3px;margin:20px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px;align-items:stretch}.b-list.wider{max-width:1200px;grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}.back-fwd-ctrl{display:flex;margin:15px 0;justify-content:center;gap:20px;list-style:none;padding:0;button { border-radius: 50%; padding: 12px; border: 2px solid var(--black); background: var(--white); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px 0px; transition: transform 100ms ease; &.prev svg { position: relative; left: -1px; } &.next svg { position: relative; right: -1px; } &:hover { cursor: pointer; transform: scale(1.05); } &:active { transform: scale(0.9); } }}.swipelist{display:flex;gap:10px;align-items:stretch;overflow:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:0 15px;&>* { scroll-snap-align: center; overflow: hidden; margin-bottom: 5px; }}.popover{position:fixed;inset:0;margin:auto;height:fit-content;width:fit-content;max-height:100dvh;overflow:scroll;overscroll-behavior:contain;border:0;padding:0;background:0 0;--duration:150ms;--start-opacity:0.5;--start-scale:scale(0.8);opacity:0;transform:scale(1);transition:opacity var(--duration)ease-out,transform var(--duration)cubic-bezier(0,0,.2,1),overlay var(--duration)allow-discrete,display var(--duration)allow-discrete;&::backdrop { background:rgb(0 0 0/0.25); opacity:0; transition:opacity var(--duration),overlay var(--duration) allow-discrete,display var(--duration) allow-discrete; } &:popover-open { opacity:1; transform:scale(1); @starting-style { opacity:var(--start-opacity); transform:var(--start-scale); } } &:popover-open::backdrop { background:rgb(0 0 0/0.25); opacity:1; } &>div { position:relative; font-size:13px; padding:15px; margin:5px; } button.close { position:absolute; margin:0; background:none; border:none; svg { width:20px; height:20px; display:block; } &:hover { cursor:pointer; } }}@starting-style{.popover:popover-open::backdrop {
        opacity: 0;
    }
}.geoblocked{display:flex;justify-content:center;align-items:center;overflow:hidden scroll;background-repeat:no-repeat;background-position:50%;&::after { content:''; position:fixed; top:50%; left:50%; width:900px; height:900px; transform:translate(-50%,-50%); background:url('/img/hege-uk.991e6a87b4103198c457364e5255fc8d99f226a31c5e34fd88c6eeec961aa2aa.avif'); background-size:900px 900px; border-radius:40px; } div { padding:20px 25px; max-width:500px; z-index:1; gg h1 { margin:0 0 20px; line-height:1; font-size:36px; } p { margin:15px 0; } h1+p { font-weight:bold; } ul { padding-left:25px; } }}@media screen and (width < 900px),screen and (height < 900px){.geoblocked{overflow:scroll;background-image:url(/img/hege-uk.991e6a87b4103198c457364e5255fc8d99f226a31c5e34fd88c6eeec961aa2aa.avif);background-size:900px 900px;background-repeat:no-repeat;background-position:50%;&::after { content:none; }}}@media screen and (width < 510px){.geoblocked div{padding:12px 15px 18px;max-width:calc(100vw - 10px)}}body.home{section { margin: 60px 15px 0; text-align: center; h2 { line-height: 1.3; } ul, ol { list-style: none; padding: 0; } .btn { padding: 8px 25px; } }}@media screen and (width >=900px){body.home{section>h2 { font-size: 40px; margin: 0 auto; }}}.home #intro{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;.text { flex-basis: 480px; flex-grow: 3; div { margin: 20px auto 0; display: flex; flex-wrap: wrap; gap: 20px; flex-direction: row-reverse; justify-content: center; max-width: 400px; &>a { align-self: center; } } } h1 { text-transform: uppercase; margin: 35px 0 20px; color: var(--red); text-shadow: 4px 5px 1px #00000012, 0 4px 0px #303030; font-size: 36px; border: 1px #000; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: rgb(0 0 0 /0.8); strong { color: var(--white); font-weight: normal; display: block; } } .img { max-width: 500px; flex-basis: 360px; flex-grow: 1.5; margin: 0 auto; padding: 10px 0 0 40px; } ul { display: flex; gap: 20px; justify-content: center; li:nth-child(2n) a { transform: rotate(4deg); } li a:hover { transform: scale(1.1); } a { display: flex; width: 50px; height: 50px; justify-content: center; align-items: center; border: 2px solid var(--black); border-radius: 12px; background: var(--white); box-shadow: 8px 8px 1px -3px rgb(0 0 0 / 0.2), 3px 3px 0 -1px var(--black); transform: rotate(-4deg); transition: transform 100ms ease; img { width: auto; height: 24px; } } } .btn { font-size: 15px; } #peekaboo { position: absolute; width: 35%; max-width: 180px; left: 0; top: 500px; }}@media screen and (width >=900px){.home #intro{margin-top:100px;text-align:left;align-items:flex-start;h1 { text-align: left; font-size: 56px; margin-top: 70px; line-height: 1.1; font-weight: bold; } .text { z-index: 2; font-size: 18px; div { max-width: unset; justify-content: flex-end; margin: 20px 0 0; } .btn { margin-top: 4px; } } .img { padding: 0; } #peekaboo { top: 140px; }}}#story{margin:60px 0 0;font-size:13px;text-align:left;h2 { max-width: 800px; } .swipelist { &>div { display: flex; flex-direction: column; justify-content: space-between; min-width: 90dvw; h2, p { margin: 15px; } video { max-height: 400px; object-fit: cover; flex-grow: 1; border: 2px solid var(--black); border-width: 2px 0 0 0; background: var(--yellow); } } }}@media screen and (width >=700px){#story{font-size:14px;.swipelist { max-width: 900px; margin: 0 auto; &>div { flex-direction: row; min-width: calc(100% - 20px); h2 { font-size: 28px; margin-bottom: 20px; } div { margin: 15px; flex-basis: 300px; flex-grow: 1; } video { flex-basis: 300px; border-width: 0 0 0 2px; max-width: min(50%, 400px); max-height: unset; } } }}}@keyframes zoom-it{0%,20%{transform:scale(1)}50%,70%{transform:scale(1.2)}100%{transform:scale(1)}}#characters{max-width:1200px;margin:60px auto 0;&>p { margin: 15px 20px; } ul { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 20px 15px 0; } li { display: flex; flex-direction: column; text-align: left; overflow: clip; &>p { overflow: clip; } img { width: 100%; height: auto; object-fit: contain; animation: zoom-it linear; animation-timeline: view(); overflow: clip; } div { flex-grow: 1; background: rgb(0 0 0 / 0.9); color: var(--white); padding: 17px 12px 12px; } h3 { text-transform: uppercase; border-left: 5px solid var(--yellow); padding-left: 7px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; font-size: 20px; margin-bottom: 15px; line-height: 1; letter-spacing: 0.5px; } p { margin: 0; } }}@media screen and (width >=600px){#characters{ul { grid-template-columns: 1fr 1fr; }}}@media screen and (width >=900px){#characters{ul { grid-template-columns: 1fr 1fr 1fr 1fr; }}}#trailer{margin:60px auto 0;max-width:1e3px;video { margin: 30px 0 0; max-width: 100%; }}#chapters{margin:60px 0 0;padding:40px 15px 60px;background:#fff;h2 { max-width: 1000px; margin: 0 auto; } p { max-width: 1000px; margin: 25px auto 35px; } ul { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; } li { display: flex; flex-direction: column; gap: 20px; font-size: 16px; align-items: center; } img { display: none; } h3 { text-transform: uppercase; font: 16px/1 PM; letter-spacing: 3px; } span { font: 40px/1 DGO; } a { margin-top: 5px; background: var(--yellow); width: 100%; &:hover { background: var(--black); } }}@media screen and (width >=550px){#chapters{ul { grid-template-columns: 1fr 1fr; } img { display: block; max-width: 100px; }}}@media screen and (width >=850px){#chapters{ul { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }}}#buy{margin-top:45px;h2 { font-size: 40px; margin-bottom: 30px; } .ca { background: transparent; display: flex; width: fit-content; max-width: calc(100vw - 30px); margin: 0 auto; align-items: center; justify-content: center; padding: 12px 15px 12px 20px; gap: 10px; font-size: 16px; strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn { padding: 7px 14px; font-size: 14px; background: transparent; &:hover { background: var(--black); } } } &>ul { margin: 25px 20px; display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 16px; list-style: none; padding: 0; a { text-decoration: none; text-transform: uppercase; color: var(--black); } .toggle { display: inline-block; border-radius: 14px; background: white; border: 2px solid var(--black); width: 60px; height: 30px; position: relative; &:hover { cursor: pointer; } } .toggle::after { position: absolute; top: 3px; content: ''; display: block; border-radius: 50%; width: 20px; height: 20px; background: var(--yellow); border: 2px solid var(--black); transition: transform 150ms ease; } } &.dex ul { #buy-dex-link { font-weight: bold; } .toggle::after { transform: translateX(3px); } } &.cex ul { #buy-cex-link { font-weight: bold; } .toggle::after { transform: translateX(32px); } }}#buy-cex,#buy-dex{max-width:800px;margin:0 auto;transition:all 150ms linear;transition-behavior:allow-discrete}#buy.dex #buy-cex,#buy.cex #buy-dex{opacity:0;display:none}#buy-dex{ol { counter-reset: item; li { position: relative; max-width: 400px; margin: 25px auto 25px 0; padding: 75px 35px 35px; counter-increment: item; &:nth-child(even) { margin: 25px 0 25px auto; transform: rotate(0.75deg); } } li:before { content: counter(item); font: bold 100px/1 DGO; color: rgb(0 0 0 / 0.08); position: absolute; top: 5px; left: 0; right: 0; } img { display: none; } } h4 { font-size: 32px; text-wrap: balance; margin-bottom: 20px; } p { text-align: left; margin: 15px 0 0; }}@media screen and (width >=600px){#buy-dex{ol { img { display: block; position: absolute; left: 420px; bottom: 0; transform: scaleX(-1); width: calc(100vw - 500px); max-width: 250px; } li:nth-child(even) img { transform: none; right: 420px; left: unset; } }}}#buy-cex{display:flex;flex-wrap:wrap;gap:20px;&>div { flex-basis: 300px; flex-grow: 1; &:last-child { flex-grow: 1; } } h3 { font-size: 24px; line-height: 1.3; } h4 { font: bold 16px PM; text-transform: uppercase; margin-top: 25px; } p { text-align: left; } ul { display: flex; flex-wrap: wrap; gap: 30px; margin: 35px 0 15px; align-items: center; justify-content: center; } li a { img { max-width: min(100%, 200px); margin: 0 auto; } }}@media screen and (width >=734px){#buy-cex{h3 { text-align: left; } &>div:last-child { border: 2px solid var(--black); border-radius: 12px; }}}#nfts{margin:60px auto 0;padding:30px 15px;background:var(--white);img { height: auto; } &>div { max-width: 1000px; margin: 0 auto; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; &>a, &>div { flex-basis: 350px; flex-grow: 1; } &>div { &>a { img { width: 500px; max-width: 90%; display: inline-block; } } a+p { max-width: 600px; margin: 10px auto 15px; } } &>a { img { margin: 0 auto; width: 500px; } } } .nft-prices { margin: 35px 0; display: flex; flex-wrap: wrap; gap: 15px; p { flex-basis: 150px; flex-grow: 1; margin: 0; padding: 8px; background: var(--yellow); font-style: italic; strong { font-style: normal; display: block; font: 18px DGO; } } } .nft-prices+p { margin-bottom: 10px; }}@media screen and (width >=750px){#nfts{text-align:left;padding-top:40px;h2 { font-size: 38px; } a+p { font-size: 16px; } .nft-prices { text-align: center; }}}#memes{margin:60px 0 0;div { margin: 40px auto 15px; ul { li { min-width: 300px; max-width: 300px; img { height: 300px; object-fit: cover; border-radius: 12px; } &:first-child { margin-left: 10px; } &:last-child { margin-right: 10px; } } } } &>p { margin-top: 20px; }}#faq{margin:60px 10px 0;div { max-width: 800px; margin: 25px auto; padding: 10px 10px; text-align: left; } summary { position: relative; padding: 5px 33px 5px 8px; border-radius: 5px; font-size: 16px; font-weight: bold; &:hover { cursor: pointer; background: rgb(0 0 0 / 0.1); } &::marker { content: ''; } &::before, &::after { content: ''; border-block-start: 3px solid var(--black); height: 0; width: 16px; inset-block-start: 15px; inset-inline-end: 8px; position: absolute; position-area: top end; transition: transform 200ms ease; } &::after { transform: rotate(-90deg); transform-origin: 50%; } } details[open] summary::after { transform: rotate(0); } p { margin: 8px 8px 15px 8px; }}@media screen and (width >=600px){#faq{p { margin-right: 35px; }}}#tokenomics{margin:60px 10px 0;div { max-width: 800px; margin: 25px auto; padding: 20px; text-align: left; img { width: 100%; max-width: 500px; height: auto; margin: 0 auto; } p { margin: 20px 0; } } ul { font-weight: bold; list-style-type: initial; padding-left: 25px; li { margin: 5px 0; } }}@media screen and (width >=600px){#tokenomics{font-size:16px;div { p { margin: 30px 0; } } ul { column-count: 2; column-gap: 15px; }}}#join{max-width:1e3px;margin:60px auto 0;padding:15px;&>div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 35px; &>:first-child { flex-basis: 300px; flex-grow: 1; } &>:last-child { flex-basis: 300px; flex-grow: 1; } } &>video { height: auto; width: 600px; max-width: 100%; margin: 0 auto 30px; transform: translateX(-3%); } p { margin: 25px 0 0; } p:has(.btn) { margin-top: 30px; }}@media screen and (width >=500px){#join{h2 { font-size: 32px; }}}@media screen and (width >=670px){#join{font-size:16px}}#tg-live{height:500px;overflow-y:scroll;overflow-x:hidden;font-size:12px;text-align:left;padding:20px;display:none;&.filled { display: block; } &>div { display: grid; grid-template-columns: 45px 1fr; margin-top: 20px; &:first-child { margin-top: 0; } &>div:first-child { img, span { border-radius: 50%; width: 32px; height: 32px; margin: 0; } span { background: #ccc; display: block; text-align: center; line-height: 32px; } } &>div:last-child { div { display: flex; justify-content: space-between; date { color: rgb(0 0 0 / 0.4); } } p { margin: 5px 0 0; } } }}body.p-hegends{footer { margin-top: 0; border: none; }}body.p-hegends main{h1 { font-size: 18px; margin-bottom: 20px; line-height: 1.3; } #nfts-intro { padding: 0 20px; max-width: 600px; margin: 20px auto 40px; text-align: center; &>img { margin: 0 auto; height: auto; } ul { display: flex; flex-wrap: wrap; gap: 15px; align-items: stretch; margin: 40px auto; max-width: 420px; li { width: 130px; flex-grow: 1; a { height: 100%; } } } } #nfts-rewards { padding: 30px 20px; background: var(--white); font-size: 13px; &>div { max-width: 600px; margin: 0 auto; } img { width: 100%; height: auto; margin: 30px auto; } h2 { font-size: 32px; } h3 { font-size: 24px; margin-top: 25px; } ul { list-style-type: disc; padding: 0 25px; } li { margin: 15px 0; } table { margin: 20px 0 15px; border-spacing: 0; width: 100%; text-align: left; } table.small { text-align: center; } td, th { padding: 5px 7px; border-right: 1px solid var(--black); } thead th { border-bottom: 1px solid var(--black); } td:last-child, th:last-child { border-right: none; } }}.p-about main{section { padding: clamp(15px, 3%, 25px); max-width: 680px; margin: 25px auto; } ul { li { margin-top: 30px; } img { border: 2px solid var(--black); border-radius: 12px; height: auto; max-width: 500px; width: 100%; margin: 0 0 0 auto; } li:nth-child(odd) img { margin: 0 auto 0 0; } p { margin-bottom: 10px; font-weight: bold; text-align: center; } }}@media screen and (min-width:710px){.p-about main{section { margin: 50px auto; } h2 { font-size: 28px; }}}.p-tm main{section { margin: 60px 10px 0; } h2 { text-align: center; } #tm-tms { margin: 60px auto 0; max-width: 1200px; div ul { margin: 20px 0 5px 0; display: flex; gap: 10px; overflow: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; align-items: center; li { scroll-snap-align: center; min-width: 90dvw; background: var(--white); background-image: url('/img/quote-open.20019029d0b946c6d3a04c1e3bba97469daf599e7ac77b00e494425bfce54f6e.svg'); background-repeat: no-repeat; background-position: 15px 15px; background-size: 38px 30px; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 5px; padding: 58px 15px 15px 15px; font-size: 12px; p { margin: 0; } p:last-child { margin-top: 15px; display: flex; gap: 15px; align-items: center; } img { border-radius: 50%; } span { font-weight: bold; } } li:first-child { margin-left: 10px; } li:last-child { margin-right: 10px; } } .back-fwd-ctrl { margin-top: 0; } } #tm-yt, #tm-news { .box { padding: 10px; width: 100%; } iframe, img:first-child { border-radius: 8px; width: 100%; height: auto; max-width: 100%; display: block; } } #tm-yt { iframe { aspect-ratio: 16/9; } } #tm-news { img:first-child { aspect-ratio: 5/3; } h3 { margin: 8px 0 8px 1px; line-height: 1.4; } img:last-child { max-width: 140px; height: auto; } }}@media screen and (width <=400px){.p-tm main{ #tm-yt, #tm-news { ul { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }}}@media screen and (min-width:600px){.p-tm main{margin:0 15px; #tm-tms { div ul { column-count: 2; column-gap: 15px; display: block; width: 100%; li { display: inline-block; margin-bottom: 15px; min-width: unset; &:first-child { margin-left: 0; } } } .back-fwd-ctrl { display: none; } }}}@media screen and (min-width:800px){.p-tm main #tm-tms div ul{column-count:3}}@media screen and (min-width:1000px){.p-tm main #tm-tms div ul{column-count:4}}.p-loh{ #loh-intro { margin: 18px auto 25px; &>img { box-shadow: 0 10px 0 rgb(0 0 0 / 0.15); height: auto; } &>p { margin: 40px 15px 30px; text-align: center; } } .loh-info-popover { max-width: 600px; padding: clamp(10px, 3%, 25px); img { margin: 0 auto; } strong { font-size: 14px; } p:last-child { margin-bottom: 0; } .close { right: 8px; top: 12px; } }}#loh-list{padding:0 10px}.loh-list{a { width: 100%; padding: 10px; text-align: center; } img { width: 100%; height: auto; border-radius: 8px; } h2 { margin: 4px 0 0; font-size: 22px; } time { margin: 5px 0 0; font-size: 13px; display: block; }}.loh-hegend{max-width:1025px;display:flex;flex-wrap:wrap;gap:15px;img { flex-basis: 400px; flex-grow: 1; border-radius: 8px; } .info { flex-basis: 350px; flex-grow: 1; } p { margin: 10px 0; } h2 { margin: 0 0 15px; line-height: 1; font-size: 28px; } dl { margin: 15px 0 0; dt { font: bold 14px/1.4 PM; } dd { margin: 0 0 10px 0; &:last-child { margin-bottom: 0; } } } button.close { right: 3px; top: 3px; background: var(--white); padding: 10px; border-radius: 8px; }}.blog-f{text-align:center;text-transform:uppercase;margin:50px auto;font-size:13px;p { margin: 0; } a { color: var(--black); }}#blog-articles{padding:0 10px;margin-top:30px;font-size:12px;line-height:1.4;article { a { padding: 10px; overflow: hidden; } img { aspect-ratio: 1; object-fit: cover; border-radius: 6px; width: 100%; height: auto; overflow: hidden; } h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; } p { margin: 8px 0; } p:last-child { margin-bottom: 0; font-weight: bold; } .meta { text-transform: uppercase; flex-flow: row; margin-top: 10px; margin-bottom: 8px; font-size: 11px; line-height: 1; display: flex; span { text-align: right; flex: 1; margin-top: 0; margin-bottom: 0; } } }}.blog-article{.h { max-width: 670px; margin: 100px auto 30px; padding: 0 15px; } .byline-w { padding: 8px 0 7px 0; background: white; box-shadow: 0 -3px 15px rgb(0 0 0 / 0.1); border-top: 1px solid rgb(0 0 0 / 0.3); border-bottom: 1px solid rgb(0 0 0 / 0.2); color: #666; } .byline { max-width: 670px; margin: 0 auto; padding: 0 15px; } .c-w { background: var(--white); margin: 0; } .c { max-width: 670px; padding: 15px; margin: 0 auto; font-size: 13px; }}.blog-entry-f{background:var(--white);margin:0 auto;padding:20px 0 60px}body:has(#blog-entry) footer{margin-top:0}.blog-article .h{h1 { font-size: 38px; line-height: 1.4; margin: 0 0 20px; text-align: left; } p { font-style: italic; line-height: 1.5; }}.blog-article .byline{display:flex;gap:15px;justify-content:space-between;text-transform:uppercase;font-size:12px;&>* { margin: 0; } em { text-transform: lowercase; }}.blog-article .c{padding-top:25px;background:var(--white);&>*:first-child { margin-top: 0; } h2, h3, h4 { font-size: 22px; margin: 25px 0 15px; line-height: 1.4; } h3 { margin-top: 30px; font-size: 18px; } h4 { font-size: 15px; margin: 25px 0 8px; } p { margin: 0 0 15px 0; line-height: 1.6; } ul { margin: 15px 0; padding: 0 25px; list-style-type: disc; li { margin: 0 0 10px; padding-left: 5px; &:last-child { margin-bottom: 0; } } } ol { margin: 20px 30px 20px 0; } blockquote { margin: 15px 0; padding: 10px 20px; border-left: 5px solid #e2e2e2; font-size: 13px; font-style: italic; >*:last-child { margin-bottom: 0; } } figure.image, figure.yt { margin-top: 20px; margin-bottom: 20px; width: 100%; max-width: 100%; padding: 15px; background: white; margin-left: -15px; margin-right: auto; box-sizing: content-box; img { width: 100%; height: auto; } iframe { width: 100%; display: block; } figcaption { font-size: 11px; line-height: 1.4; color: #666; display: block; margin: 10px 0 0; font-style: italic; margin-bottom: -5px; text-align: center; } }}