*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:none}:root{--accent-color1:#9b9bee;--accent-color2:#8585ec;--accent-color3:#7a7ae4;--accent-color4:#5050da;--secondary-color1:#f52a2a;--body-color-scheme1:#fff;--font-family:system-ui;--icofont:"Material Icons"}body{display:flex;flex-direction:column;font-family:var(--font-family);height:100vh}.content{padding-bottom:100px}.menu-hider{display:none}header{animation:menuPop .5s ease-in forwards;box-shadow:0 2px 4px -1px var(--accent-color2);position:sticky;top:0;z-index:1000}nav{align-items:center;background-color:var(--accent-color1);display:flex;font-size:1em;justify-content:space-around}nav .brand{cursor:pointer;font-weight:700;padding:0 .5em;transition:color .3s ease-in-out;&:hover{color:#fff}}nav .navigation{align-items:center;display:flex;height:100%}nav .navigation a .icon{display:none}nav a{color:#fff;flex:1;font-weight:700;height:inherit;padding:.5em 1em;position:relative;text-decoration:none;transition:background-color .3s ease-in-out;&.active:before,&:before{background-color:#fff;bottom:0;content:"";height:.3em;left:0;position:absolute;transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease-in-out;width:100%}&.active:before{background-color:var(--accent-color4)}&.active,&:hover{background-color:var(--accent-color2);cursor:pointer}&.active:before,&:hover:before{transform:scaleY(1)}}.reach{align-items:center;bottom:1em;display:flex;flex-direction:column-reverse;gap:1em;justify-content:center;position:fixed;right:.5em;z-index:100;span{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:transparent;border:1px solid #f5f5f5;box-shadow:0 0 6px -1px var(--accent-color1);cursor:pointer}span:active{scale:.95;-webkit-user-select:none;user-select:none}&>span.message{background-color:#fff;border-radius:50%;color:var(--accent-color1);font-size:2em;padding:.5em}&>span.message.active{animation:iconAnimate 1s infinite alternate;color:var(--accent-color3);font-family:Material Icons}&>span:not(.message){align-items:center;border-radius:50%;display:flex;height:55px;justify-content:center;padding:.5em;width:55px}&>span:not(.message) img{height:35px;width:35px}&>span:not(.message).hide{opacity:0;transform:translateY(100%) scale(0);transform-origin:bottom;transition:transform .3s ease-in-out,opacity .1s ease-in-out}&>span:not(.message).show{opacity:1;transform:translateY(0) scale(1);transform-origin:bottom;transition:transform .3s ease-in-out,opacity .5s ease-in-out}}.skeleton,.skeleton-text{animation:pulse .5s linear infinite alternate;opacity:.7}@keyframes pulse{0%{background-color:#d9d9d9}to{background-color:#f2f2f2}}@keyframes menuPop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes iconAnimate{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}@media (max-width:460px){header{animation:menuPop .5s ease forwards;bottom:0;display:flex;flex-direction:column;position:fixed!important;top:auto;width:100vw;z-index:100}.menu-hider{align-self:flex-end;background-color:var(--accent-color3);border-radius:.25em .25em 0 0;bottom:0;color:#fff;display:block;font-family:var(--icofont);font-size:2em;font-weight:700;position:sticky;width:max-content}nav{height:5rem;justify-content:center;padding:0;width:inherit}nav .brand{display:none;padding:0}nav .navigation{align-items:center;display:flex;height:100%;justify-content:space-between;width:inherit}nav .navigation a{align-content:center;flex:1;height:inherit;text-align:center}nav .navigation a{display:flex;flex-direction:column;&.active .icon{font-family:var(--icofont)}& .icon{display:block;font-size:2em}&:before{background-color:#fff;bottom:0;left:25%;right:25%;transform:scale(0);transform-origin:center;width:50%}&:hover:before{transform:scale(1)}}.menu-hider.hide,nav.hide{animation:menuHide .1s ease forwards}.reach{animation:reachPop .3s ease forwards;bottom:10em;transform:translateY(0)}.reach.slide{animation:reachSlide .2s ease forwards}@keyframes reachPop{0%{transform:translateY(50%)}to{transform:translateY(0)}}@keyframes reachSlide{0%{transform:translateY(0)}to{transform:translateY(50%)}}@keyframes menuPop{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes menuHide{0%{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(250%)}}}@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait){header{animation:menuPop .5s ease forwards;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:transparent;bottom:0;display:flex;flex-direction:column;position:sticky!important;top:auto;width:100vw;z-index:100}.menu-hider{align-self:flex-end;background-color:var(--accent-color3);border-radius:.25em .25em 0 0;bottom:0;color:#fff;display:block;font-family:var(--icofont);font-size:2em;font-weight:700;position:sticky;width:max-content}nav{height:5rem;justify-content:center;padding:0;width:inherit}nav .brand{display:none;padding:0}nav .navigation{align-items:center;display:flex;height:100%;justify-content:space-between;width:inherit}nav .navigation a{align-content:center;flex:1;height:inherit;text-align:center}nav .navigation a{display:flex;flex-direction:column;& .icon,&.active .icon{font-family:var(--icofont)}& .icon{display:block;font-size:2em}&:before{background-color:#fff;bottom:0;left:25%;right:25%;transform:scale(0);transform-origin:center;width:50%}&:hover:before{transform:scale(1)}}.menu-hider.hide,nav.hide{animation:menuHide .1s ease forwards}.reach{animation:reachPop .3s ease forwards;bottom:10em;transform:translateY(0)}.reach.slide{animation:reachSlide .2s ease forwards}@keyframes reachPop{0%{transform:translateY(50%)}to{transform:translateY(0)}}@keyframes reachSlide{0%{transform:translateY(0)}to{transform:translateY(50%)}}@keyframes menuPop{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes menuHide{0%{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(250%)}}}div.gallery{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center}.search{display:flex;justify-content:center;padding:1em;width:50%;button{background-color:var(--accent-color3);border:none;border-radius:1em 0 0 1em;color:#fff;padding:0 .5em}input{background-color:#f5f5f5;border:1px solid var(--accent-color3);border-left:none;border-radius:0 1em 1em 0;font-size:1em;padding:.5em;width:100%}input:focus{color:var(--accent-color3);outline:none}}.grid-container{animation:slideIn 1s ease forwards;display:grid;gap:1em;gap:10px;grid-auto-flow:dense;grid-template-columns:repeat(3,minmax(250px,1fr));padding:1em;&::-webkit-scrollbar{display:none}}.card{display:flex;flex-direction:column;gap:.5em;height:400px;width:300px;*{border-radius:.5em;cursor:pointer}.img.skeleton{align-items:center;display:flex;height:350px;justify-content:center;width:300px}.sub-container{display:flex;gap:.5em;height:5em;&>*{align-items:center;display:flex;justify-content:center}&>p{flex:2}&>span{flex:1;height:3em}}}@media (max-width:460px){.grid-container{display:grid;gap:2em;grid-auto-flow:dense;grid-template-columns:300px;overflow-y:auto}.search{background-color:var(--accent-color1);position:sticky;top:0;width:100%;z-index:100}.search input{border:none}}@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait){div.gallery{justify-content:flex-start}.grid-container{display:grid;gap:2em;grid-auto-flow:dense;grid-template-columns:repeat(2,300px)}.search{background-color:var(--accent-color1);position:sticky;top:0;width:100%;z-index:100}.search input{width:70%}}div.details{display:flex;flex-direction:column;gap:1em;height:100vh;justify-content:center;justify-self:center;min-width:70vw}.carousel{border-radius:1em;display:grid;grid-auto-columns:100%;grid-auto-flow:column;height:400px;overflow-x:hidden;scroll-snap-type:x mandatory;scroll-marker-group:after;animation:slideIn .5s linear alternate forwards;&::scroll-marker-group{align-items:center;align-self:center;anchor-name:--scroller;display:grid;grid-area:markers;grid-auto-flow:column;height:40px;justify-content:center;margin:1em;padding:0 2rem;width:50%}&::scroll-button(*){border:1px solid var(--accent-color1);border-radius:50%;font-family:Material Icons;height:30px;position:fixed;position-anchor:--scroller;width:30px}&::scroll-button(*):enabled{background-color:var(--accent-color1);color:#fff;font-weight:700}&::scroll-button(right){content:"arrow_forward"/"Next";position-area:center right}&::scroll-button(left){content:"arrow_back"/"Previous";position-area:center left}&>.img{align-items:center;animation:pulse .5s linear infinite alternate;display:flex;justify-content:center;list-style:none;scroll-snap-align:center;>span{color:red}}>li::scroll-marker{aspect-ratio:1/1;background-color:var(--accent-color1);border:1px solid var(--accent-color1);border-radius:50%;content:"";height:1px!important;padding:.8rem;transform:scale(.5)}>li::scroll-marker:target-current{background:canvas;transform:scale(.6);transition:transform .3s ease-in-out}@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}}.text{animation:slideIn 2s ease forwards;display:flex;flex-direction:column;gap:2em;padding:1em}.text>.container{align-items:center;display:flex;flex-direction:column;gap:1em;justify-content:center;width:inherit;&>*{border-radius:.5em}& .title{padding:1em;width:100%}& .price{align-self:flex-end;padding:1em}}.text>.description{display:flex;flex-direction:column;gap:.5em;width:inherit;>*{border-radius:.25em;height:1.5em;width:100%}&>:last-child{width:80%}}@media (max-width:460px){div.details{justify-content:unset;width:100vw}ul.carousel{border-radius:0;&::scroll-button(right){content:"chevron_right"}&::scroll-button(left){content:"chevron_left"}&::scroll-marker-group{align-self:center;width:50%}&::scroll-button(*){background-color:transparent!important;border:none!important;font-size:3rem;font-weight:400!important;height:50px;width:50px}&::scroll-button(*):enabled{background-color:transparent;color:var(--accent-color1)}>li::scroll-marker{padding:.4rem}>li::scroll-marker:target-current{padding:.5rem}}}@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait){div.details{justify-content:unset;width:100vw}ul.carousel{border-radius:0;&::scroll-marker-group{align-self:center;width:50%}&::scroll-button(*){font-size:2rem;height:50px;width:50px}>li::scroll-marker{padding:.4rem}>li::scroll-marker:target-current{padding:.5rem}}}@keyframes slideIn{0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:translateY(0)}}div.home{height:inherit}.cover{align-items:center;animation:slideIn 1s ease forwards;background-color:#fef4f2;display:flex;justify-content:center;width:100%;>img{object-fit:cover}}.welcome{animation:slideIn 1s ease forwards;height:900px;padding:1em}@media (max-width:480px){.cover img,div.home{width:inherit}}