html,body{padding:0;margin:0;width:100%;height:100%;font-family:"Noto Serif",sans-serif;font-weight:400;font-style:normal;scroll-behavior:smooth}h1,h2,h3,h4,h5{margin:0;font-weight:400}.cormorant{font-family:Cormorant Unicase,serif;font-weight:500;font-style:normal}.cormorant.light{font-weight:300}.cormorant.bold{font-weight:700}.cinzel{font-family:Cinzel Decorative,serif;font-weight:400;font-style:normal}.cinzel.bold{font-weight:900}:root{--color-yellow: #e4c100;--color-purple: #681db9;--color-blue: #98dfea;--ease: cubic-bezier(.83, 0, .17, 1)}h2{font-size:60px}h3{font-size:40px}h4{font-size:35px}h5{font-size:25px}p{line-height:1.5}a{text-decoration:none;color:var(--color-purple)}.button{font-size:20px;color:#000;text-decoration:none;border:1px solid var(--color-purple);border-radius:16px;padding:8px 16px;box-shadow:2px 2px 10px #0000004d;background:none;transition:all .15s}.button[disabled]{background:gray;opacity:.5;box-shadow:none}.button:active{box-shadow:none}input{border:1px solid var(--color-purple);border-radius:2px;font-size:25px;padding:5px;outline:var(--color-purple)}.text-pop{font-size:28px;font-weight:900;color:var(--color-purple);line-height:1;text-shadow:-2px 2px 0px var(--color-yellow),-3px 3px 0px rgba(0,0,0,.2)}.grid{display:grid;width:100%;min-height:100%;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,minmax(max-content,1fr));background:var(--color-purple);gap:10px;padding:5px 10px;box-sizing:border-box}.grid>*{display:contents}.grid .to-top{display:none}.grid.long{grid-template-rows:auto}.grid.long .to-top{display:block;position:fixed;bottom:0;left:0;background:#fff;padding:8px 15px;border-radius:0 5px 0 0;cursor:pointer;transform:translateY(100%);transition:transform .2s var(--ease)}.grid.long .to-top.visible{transform:translateY(0)}.grid .box{padding:20px;box-sizing:border-box;border-radius:10px;background:#fff}.grid .box.square{aspect-ratio:1}.grid .box.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.grid .box.center.top{justify-content:flex-start}.grid .box.transition{transform:scaleY(0);animation:box-transition .5s var(--ease) forwards;animation-delay:calc(var(--transition-index, 1) * .2s);position:relative}.grid .box.blue{background:var(--color-blue)}.grid .box.purple{background:var(--color-purple);color:#fff}.grid .box.yellow{background:var(--color-yellow)}.grid .box.clickable{border:2px solid rgba(0,0,0,.2);box-shadow:0 0 2px 1px #000,1px 1px 0 2px #fff inset;background:#fff;background:linear-gradient(139deg,#fff,#ebebeb 80%,#fff)}@media only screen and (max-width:500px){h2,h3{font-size:40px}h4{font-size:35px}h5{font-size:25px}.grid{height:auto;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:auto}.grid .box{height:auto}.grid .box.square{aspect-ratio:auto}}@media only screen and (min-width:500px)and (max-width:1100px){.grid .box.square{aspect-ratio:auto;min-height:100px}}@keyframes box-transition{0%{transform:scaleY(0)}to{transform:scaleY(1)}}