.close-button{margin-left:calc(100% - 3rem)!important;margin-bottom:15px;top:1rem;width:3rem;height:3rem;background:rgba(120,120,120,.25);border-radius:3rem;cursor:pointer;position:relative;color:#fff}.close-button span{transform:translate(-50%,-50%);left:50%;top:50%;position:absolute;font-weight:800;user-select:none;color:#fff}.trait-type{font-size:1.2rem;font-weight:700;color:gray}.trait-type .trait.big{padding:.75rem}.trait-type .trait.big p.trait-count,.trait-type .trait.big p.trait-rarity{font-size:1rem;margin:.25rem 0;color:#787878}.trait-type .trait.big p.trait-value{margin:.75rem 0}.trait-type .trait.big.on-use p{color:#fff}.trait-type .trait.big.on-use p.trait-count,.trait-type .trait.big.on-use p.trait-rarity{color:#f0f0f0}.trait-value{font-size:1.5rem;font-weight:400;color:#c8c8c8}.details-window{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#1e1e1e;z-index:10000;overflow-y:auto}.details-window .detail-image{width:100%;overflow:hidden;border-radius:1rem;background:#e6faf5;height:25rem;padding:2rem 2rem 2rem 27rem;background:rgba(10,10,10,.5);border:1px solid rgba(255,255,255,.25)}.details-window .detail-image>p{color:#fff;text-align:start;line-height:initial;font-size:1.2rem}.details-window .detail-image>p.rank{font-weight:700;font-size:1.2rem}.details-window .detail-image .elem-picture{position:absolute;top:0;left:0;width:25rem;height:25rem;image-rendering:pixelated}button{border:none;background:rgba(120,120,120,.25);padding:.5rem 2rem;border-radius:.75rem;cursor:pointer}input{-moz-appearance:textfield;appearance:textfield;border:1px solid rgba(255,255,255,.15);width:100%;background:#0f0f0f;color:#c8c8c8;box-sizing:border-box;transition:.15s;border-radius:.75rem}input:disabled{color:gray;border:1px solid gray;background:#323232!important;box-shadow:0 0 #000}input:disabled:hover{color:gray;background:#1e1e1e!important;border:1px solid gray}.background-white{position:fixed;left:0;top:0;right:0;bottom:0;background:white}.buttons{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,auto);grid-template-areas:"f f f f f f" "a a a b b b" "i i i i i i";gap:.25rem}.buttons>.filter-button{grid-area:f}.buttons>.short-button.a{grid-area:a}.buttons>.short-button.b{grid-area:b}.buttons>.short-button.c{grid-area:c}.buttons>.index-container{grid-area:i;background:transparent;padding:.75rem 0}.buttons>.index-container>*{text-align:left}input{height:3rem;font-size:1.5rem;padding:0 2rem}.filter-menu{position:fixed;top:0;width:100vw;height:100vh;overflow-y:scroll;z-index:10000;background:#1e1e1e}.container{max-width:55rem;margin-inline:auto;padding:3rem 0}.container>*{position:relative}.pagination{display:grid;grid-template-columns:10rem auto 10rem;justify-items:stretch}.attributes{position:relative;display:grid;gap:.5rem;grid-template-rows:auto;padding:3em}.attributes>*{text-align:start}.attributes .trait{padding:.75rem;background:rgba(120,120,120,.15);border-radius:.75rem;margin:.25rem;display:inline-block;user-select:none;cursor:pointer}.attributes .trait.on-use{background:gray}.attributes .trait.on-use span{color:#fff}.selected-attributes{display:grid}.rarities{display:grid;padding:0;grid-template-columns:repeat(4,1fr);gap:1rem}.rarities>*{position:relative}div.rarity-card{background:rgba(120,120,120,.25);border-radius:.75rem;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(0,0,0,.15)}div.rarity-card>img{width:100%}div.rarity-card>div{padding:.5rem;display:flex;flex-direction:column}@media (max-width: 1024px){.rarities{grid-template-columns:repeat(3,1fr);gap:.75rem}}@media (max-width: 860px){.rarities{grid-template-columns:repeat(2,1fr);gap:.75rem}.container{margin-inline:auto;padding:.75rem}.details-window .detail-image{width:100%;padding:100vw 2rem 2rem 2rem;height:auto}.details-window .detail-image img.elem-picture{width:100%;top:0;height:calc(100vw - 1.5rem)}}*,*:before,*:after{margin:0;box-sizing:border-box}#app{width:100vw;height:100vh}section{height:100%}h1,h2,h3,h4,h5{margin:1rem 0 0;text-align:start}h1,h2,h3{font-size:4.5rem;line-height:4.75rem}h5{font-size:2.5rem;line-height:2.75rem;margin:0}p{font-size:1rem;line-height:1.2rem;margin:1rem 0;text-align:justify;max-width:55rem;margin-inline:auto}button{z-index:10000;cursor:pointer}@media (max-width: 1024px){h1{font-size:3.5rem;line-height:4rem;margin:.7rem 0}}*{margin:0;padding:0}body{overflow-x:hidden;background:#1e1e1e}.app-background{position:fixed;width:105vw;height:105vh;bottom:-2.5vh;left:-2.5vw;background-origin:bottom center;background-size:cover;background-image:url(./assets/water_background.jpg)}.app-background .parrots{position:fixed;width:75vw;height:75vh;bottom:0;left:5vw;background-position:bottom left;background-size:contain;background-repeat:no-repeat;background-image:url("./assets/PERIQUITOS EN BARCO.png")}section{height:800px;border:1px red solid}@font-face{font-family:rubik;src:url(/assets/rubik-regular.ba2d0c94.woff2) format("woff2"),url(/assets/rubik-regular.f4731352.woff) format("woff");font-weight:700;font-style:normal}.big-stuff{font-size:2rem!important}.rubik{font-family:rubik!important}.column{display:flex;flex-direction:column;justify-content:start;align-items:flex-start}.row{display:flex;flex-direction:row;justify-content:start;align-items:flex-start}.row,.column{gap:.25rem}.row.thin,.column.thin{gap:0}.row.stretched,.column.stretched{align-items:stretch}body{background-size:contain}*{font-family:rubik;margin:0;padding:0;box-sizing:border-box}span{text-align:left}button,h1,h2,h3,span{color:#c8c8c8}h1,h2,h3,h4,h5{color:#e1e1e1}label{color:gray}.important{color:#fff;font-weight:700}.gray{color:#646464}.gold{color:#ff69b4;font-size:25px;font-weight:700}.orange{color:orange}.green{color:#6bd5ae}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}p{text-align:justify;color:#fff;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;font-size:25px}button>span{text-transform:uppercase}span{font-size:16px;text-align:initial}button{font-weight:700}@media screen and (max-width: 992px){p{font-size:18px}span{font-size:24px}}@media screen and (max-width: 600px){p,span{font-size:16px}}