:root{--primary-color: var(--color-black);--secondary-color: var(--color-white)}canvas{position:absolute;top:0;left:0;z-index:-1}@media(width >= 50rem){main{padding-bottom:160px}}main section{padding:2rem;background-color:var(--color-white);color:var(--color-black)}main section h1{margin:0;padding:0;color:var(--color-black);font-size:2rem;text-transform:uppercase}@media(width >= 65.5rem){main section h1{margin:1rem 0;font-size:8.75rem;line-height:6.25rem}}main section h2{margin:0 0 1rem;padding:0;color:var(--color-black);font-size:1.75rem;text-transform:uppercase}@media(width >= 65.5rem){main section h2{font-size:6.25rem;line-height:6.25rem}}main .wrapped{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:2rem}main .wrapped div[class^=box]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;padding:1rem;flex-shrink:1;flex-grow:1;aspect-ratio:1/1;width:400px;max-width:400px;min-width:320px;height:auto;color:var(--color-black);--color-highlight: oklch(var(--color-white-oklch) / 60%)}main .wrapped div[class^=box]::before{content:attr(data-year);padding:0 1rem 0 0;position:absolute;top:0;right:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;background-size:cover;background-repeat:no-repeat;background-position:0 0;background-blend-mode:multiply;mix-blend-mode:multiply;color:var(--color-white);font-size:100px}@media(hover: hover){main .wrapped div[class^=box]:hover{--gradient-one: var(--color-white);--gradient-two: var(--color-white);--gradient-three: var(--color-white)}}main .wrapped div[class^=box] h3{padding:0 4px;background-color:var(--color-highlight);color:currentColor;font-size:2rem;font-weight:normal;z-index:101}main .wrapped div[class^=box] h4{padding:0 4px;background-color:var(--color-highlight);color:currentColor;font-size:2rem;font-weight:normal;z-index:101}main .wrapped div[class^=box] h5{margin-top:1rem;padding:0 4px;background-color:var(--color-highlight);color:currentColor;font-size:1.5rem;font-weight:normal;z-index:101}main .wrapped div[class^=box] span{margin:0;display:inline-block;z-index:101}main .wrapped div[class^=box] span mark{padding:0 4px;background-color:var(--color-highlight);color:currentColor;font-size:1.125rem}main .source{counter-reset:year;margin:2rem 0}@media(width >= 65.5rem){main .source{column-count:3}}main .source a{display:inline-block;color:currentcolor;font-size:1rem;font-weight:400;text-decoration:none;text-underline-offset:25%;text-decoration-thickness:14%}main .source a:hover,main .source a.active{text-decoration-line:underline}main .source a::before{counter-increment:year;content:counter(year) ". ";display:inline}.wrapped div.box-total{--box-border: #5d84c6;--gradient-one: #5d84c6;--gradient-two: #31538c;--gradient-three: #a8bde1;border:10px solid var(--box-border);background:linear-gradient(145deg, var(--gradient-one) 10%, var(--gradient-two) 10.5% 19%, rgba(0, 0, 0, 0) 19.5% 80.5%, var(--gradient-two) 81% 89.5%, var(--gradient-three) 90%),linear-gradient(145deg, var(--gradient-one) 10%, var(--gradient-two) 10.5% 19%, rgba(0, 0, 0, 0) 19.5% 80.5%, var(--gradient-two) 81% 89.5%, var(--gradient-three) 90%) 100px 200px,linear-gradient(35deg, var(--gradient-one) 10%, var(--gradient-two) 10.5% 19%, rgba(0, 0, 0, 0) 19.5% 80.5%, var(--gradient-two) 81% 89.5%, var(--gradient-three) 90%),linear-gradient(35deg, var(--gradient-one) 10%, var(--gradient-two) 10.5% 19%, rgba(0, 0, 0, 0) 19.5% 80.5%, var(--gradient-two) 81% 89.5%, var(--gradient-three) 90%) 100px 200px,conic-gradient(from -90deg at 37.5% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 25px 0,conic-gradient(from -90deg at 37.5% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-three) 0) 100px 0,linear-gradient(90deg, var(--gradient-three) 38%, var(--gradient-one) 0 50%, var(--gradient-three) 0 62%, var(--gradient-one) 0);background-size:200px 133.3333333333px}.wrapped div.box-2024{--box-border: #3134dc;--gradient-one: #3134dc;--gradient-two: #63ff60;border:10px solid var(--box-border);background:radial-gradient(circle, transparent 20%, var(--gradient-one) 20%, var(--gradient-one) 80%, transparent 80%, transparent) 0% 0%/200px 200px,radial-gradient(circle, transparent 20%, var(--gradient-one) 20%, var(--gradient-one) 80%, transparent 80%, transparent) 100px 100px/200px 200px,linear-gradient(var(--gradient-two) 10px, transparent 10px) 0px -5px/100px 100px,linear-gradient(90deg, var(--gradient-two) 10px, var(--gradient-one) 10px) -5px 0px/100px 100px var(--gradient-one);background-size:200px 200px,200px 200px,100px 100px,100px 100px;background-color:var(--gradient-one)}.wrapped div.box-2024::before{background-image:url(/public/image/wrapped/2024.webp)}.wrapped div.box-2023{--box-border: #5eb190;--gradient-one: #5eb190;--gradient-two: #5cd137;--gradient-three: 94, 177, 144;border:10px solid var(--box-border);background:radial-gradient(at bottom right, var(--gradient-one) 0, var(--gradient-one) 25px, rgba(var(--gradient-three), 0.2) 25px, rgba(var(--gradient-three), 0.2) 50px, rgba(var(--gradient-three), 0.75) 50px, rgba(var(--gradient-three), 0.75) 75px, rgba(var(--gradient-three), 0.25) 75px, rgba(var(--gradient-three), 0.25) 100px, rgba(var(--gradient-three), 0.3) 100px, rgba(var(--gradient-three), 0.3) 125px, rgba(var(--gradient-three), 0.75) 125px, rgba(var(--gradient-three), 0.75) 150px, rgba(var(--gradient-three), 0.2) 150px, rgba(var(--gradient-three), 0.2) 175px, transparent 175px, transparent 200px),radial-gradient(at top left, transparent 0, transparent 25px, rgba(var(--gradient-three), 0.2) 25px, rgba(var(--gradient-three), 0.2) 50px, rgba(var(--gradient-three), 0.75) 50px, rgba(var(--gradient-three), 0.75) 75px, rgba(var(--gradient-three), 0.3) 75px, rgba(var(--gradient-three), 0.3) 100px, rgba(var(--gradient-three), 0.25) 100px, rgba(var(--gradient-three), 0.25) 125px, rgba(var(--gradient-three), 0.75) 125px, rgba(var(--gradient-three), 0.75) 150px, rgba(var(--gradient-three), 0.2) 150px, rgba(var(--gradient-three), 0.2) 175px, var(--gradient-one) 175px, var(--gradient-one) 200px, transparent 200px, transparent 500px);background-blend-mode:multiply;background-size:200px 200px,200px 200px;background-color:var(--gradient-two)}.wrapped div.box-2023::before{background-image:url(/public/image/wrapped/2023.webp)}.wrapped div.box-2022{--box-border: #f45781;--gradient-one: #f45781;--gradient-two: #8393d3;border:10px solid var(--box-border);background:radial-gradient(var(--gradient-one) 49%, rgba(0, 0, 0, 0) 50%) -50px 50px,repeating-conic-gradient(from 45deg, var(--gradient-two) 0 25%, rgba(0, 0, 0, 0) 0 50%) 50px 50px,radial-gradient(var(--gradient-one) 49%, rgba(0, 0, 0, 0) 50%),radial-gradient(var(--gradient-one) 49%, rgba(0, 0, 0, 0) 50%) 100px 100px var(--gradient-two);background-size:200px 200px}.wrapped div.box-2022::before{background-image:url(/public/image/wrapped/2022.webp)}.wrapped div.box-2021{--box-border: #3b32e7;--gradient-one: #3b32e7;--gradient-two: #e43387;border:10px solid var(--box-border);background-image:radial-gradient(ellipse farthest-corner at 100px 100px, var(--gradient-one), var(--gradient-one) 50%, var(--gradient-two) 50%);background-size:100px 100px;background-color:var(--gradient-two)}.wrapped div.box-2021::before{background-image:url(/public/image/wrapped/2021.webp)}.wrapped div.box-2020{--box-border: #8162b5;--gradient-one: #8162b5;--gradient-two: #e65661;border:10px solid var(--box-border);background:conic-gradient(var(--gradient-one) 25%, rgba(0, 0, 0, 0) 0) 0 0/200px 10.5263157895px,conic-gradient(var(--gradient-one) 25%, rgba(0, 0, 0, 0) 0) 0 0/10.5263157895px 200px,repeating-conic-gradient(rgba(0, 0, 0, 0) 0 25%, var(--gradient-one) 0 50%) 100px 0/200px 200px,radial-gradient(50% 50%, var(--gradient-two) 98%, var(--gradient-one)) 0 0/100px 100px}.wrapped div.box-2020::before{background-image:url(/public/image/wrapped/2020.webp)}.wrapped div.box-2019{--box-border: #34215d;--gradient-one: #34215d;--gradient-two: #67fd8a;border:10px solid var(--box-border);background:conic-gradient(at 10% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0),conic-gradient(at 10% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 100px 300px,conic-gradient(at 10% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 200px 100px,conic-gradient(at 10% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 300px 400px,conic-gradient(at 10% 50%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 400px 200px,conic-gradient(at 50% 10%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 0 400px,conic-gradient(at 50% 10%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 100px 200px,conic-gradient(at 50% 10%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 200px 0,conic-gradient(at 50% 10%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 300px 300px,conic-gradient(at 50% 10%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 400px 100px,var(--gradient-two);background-size:500px 500px}.wrapped div.box-2019::before{background-image:url(/public/image/wrapped/2019.webp)}.wrapped div.box-2018{--box-border: #fae2ea;--gradient-one: #fae2ea;--gradient-two: #3c468a;border:10px solid var(--box-border);background:linear-gradient(135deg, rgba(0, 0, 0, 0) 18.75%, var(--gradient-one) 0 31.25%, rgba(0, 0, 0, 0) 0),repeating-linear-gradient(45deg, var(--gradient-one) -6.25% 6.25%, var(--gradient-two) 0 18.75%);background-size:200px 200px}.wrapped div.box-2018::before{background-image:url(/public/image/wrapped/2018.webp)}.wrapped div.box-2017{--box-border: #dd2907;--gradient-one: #dd2907;--gradient-two: #2b292e;border:10px solid var(--box-border);background:radial-gradient(100px at calc(100% + 86.6px) 50%, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) 0 -250px,radial-gradient(100px at calc(100% + 86.6px) 50%, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) -173.2px 50px,radial-gradient(100px at 100% 50%, var(--gradient-two) 99%, rgba(0, 0, 0, 0) 101%) 0 -200px,radial-gradient(100px, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) 86.6px -250px,radial-gradient(100px, var(--gradient-two) 99%, rgba(0, 0, 0, 0) 101%) 86.6px 250px,radial-gradient(100px at 100% 100%, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) 0 -100px,radial-gradient(100px at 0% 50%, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) 0 -400px,radial-gradient(100px, var(--gradient-two) 99%, rgba(0, 0, 0, 0) 101%) -86.6px -350px,radial-gradient(100px, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) -86.6px -250px,radial-gradient(100px at 100% 50%, var(--gradient-two) 99%, rgba(0, 0, 0, 0) 101%) -173.2px 100px,radial-gradient(100px, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) -86.6px 50px,radial-gradient(100px, var(--gradient-two) 99%, rgba(0, 0, 0, 0) 101%) -86.6px -50px,radial-gradient(100px, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) 0 -100px,radial-gradient(100px, var(--gradient-two) 99%, rgba(0, 0, 0, 0) 101%) 86.6px -50px,radial-gradient(100px, var(--gradient-one) 99%, rgba(0, 0, 0, 0) 101%) 86.6px 50px var(--gradient-two);background-size:346.4px 600px}.wrapped div.box-2017::before{background-image:url(/public/image/wrapped/2017.webp)}.wrapped div.box-2016{--box-border: #788795;--gradient-one: #788795;--gradient-two: #26a099;--gradient-three: #49545e;border:10px solid var(--box-border);background:radial-gradient(146.75px at left 50% bottom -80px, var(--gradient-one) calc(100% - 37.5px), var(--gradient-two) calc(101% - 37.5px) 100%, rgba(0, 0, 0, 0) 101%) 200px -187.5px,radial-gradient(146.75px at left 50% bottom -80px, var(--gradient-three) calc(100% - 37.5px), var(--gradient-two) calc(101% - 37.5px) 100%, rgba(0, 0, 0, 0) 101%) -100px -93.75px,radial-gradient(146.75px at left 50% top -80px, var(--gradient-three) calc(100% - 37.5px), var(--gradient-two) calc(101% - 37.5px) 100%, rgba(0, 0, 0, 0) 101%) 0 187.5px,radial-gradient(146.75px at left 50% top -80px, var(--gradient-one) calc(100% - 37.5px), var(--gradient-two) calc(101% - 37.5px) 100%, rgba(0, 0, 0, 0) 101%) 100px 93.75px,linear-gradient(var(--gradient-one) 50%, var(--gradient-three) 0);background-size:400px 187.5px}.wrapped div.box-2016::before{background-image:url(/public/image/wrapped/2016.webp)}.wrapped div.box-2015{--box-border: #ba90d9;--gradient-one: #ba90d9;--gradient-two: #090e79;--gradient-three: #02031a;border:10px solid var(--box-border);background:conic-gradient(at 50% 25%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0),conic-gradient(at 50% 25%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 100px 100px,conic-gradient(at 50% 25%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 200px 200px,conic-gradient(at 50% 25%, rgba(0, 0, 0, 0) 75%, var(--gradient-one) 0) 300px 300px,repeating-linear-gradient(135deg, var(--gradient-two) 0 12.5%, var(--gradient-three) 0 25%);background-size:400px 400px}.wrapped div.box-2015::before{background-image:url(/public/image/wrapped/2015.webp)}.wrapped div.box-2014{--box-border: #4e8f8f;--gradient-one: #4e8f8f;--gradient-two: #115210;border:10px solid var(--box-border);background:radial-gradient(100% 100% at 100% 100%, rgba(0, 0, 0, 0) 46%, var(--gradient-one) 47% 53%, rgba(0, 0, 0, 0) 54%) 100px 100px,radial-gradient(100% 100% at 0 0, rgba(0, 0, 0, 0) 46%, var(--gradient-one) 47% 53%, rgba(0, 0, 0, 0) 54%) 100px 100px,radial-gradient(100% 100%, rgba(0, 0, 0, 0) 22%, var(--gradient-one) 23% 29%, rgba(0, 0, 0, 0) 30% 34%, var(--gradient-one) 35% 41%, rgba(0, 0, 0, 0) 42%) var(--gradient-two);background-size:200px 200px}.wrapped div.box-2014::before{background-image:url(/public/image/wrapped/2014.webp)}.wrapped div.box-2013{--box-border: #8a1d87;--gradient-one: #8a1d87;--gradient-two: #5037e4;border:10px solid var(--box-border);background:radial-gradient(farthest-side at -33.33% 50%, rgba(0, 0, 0, 0) 52%, var(--gradient-one) 54% 57%, rgba(0, 0, 0, 0) 59%) 0 200px,radial-gradient(farthest-side at 50% 133.33%, rgba(0, 0, 0, 0) 52%, var(--gradient-one) 54% 57%, rgba(0, 0, 0, 0) 59%) 200px 0,radial-gradient(farthest-side at 133.33% 50%, rgba(0, 0, 0, 0) 52%, var(--gradient-one) 54% 57%, rgba(0, 0, 0, 0) 59%),radial-gradient(farthest-side at 50% -33.33%, rgba(0, 0, 0, 0) 52%, var(--gradient-one) 54% 57%, rgba(0, 0, 0, 0) 59%),var(--gradient-two);background-size:85.7081637026px 400px,400px 85.7081637026px}.wrapped div.box-2013::before{background-image:url(/public/image/wrapped/2013.webp)}
