body{margin:0;padding:0;border:0;width:100svw;min-height:100vh;background:url(/imgs/background2.png);background-color:#add8e6;background-size:cover}div{word-break:break-all}header{height:10%;width:100svw;display:flex;justify-content:center;align-items:center;font-size:5vh;background-color:#add8e6b3}label{color:#fff;font-weight:700}#root{width:100svw;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;gap:2vh}.container{min-height:90vh;display:flex;height:90%;width:100vw;justify-content:space-around;align-items:center;flex-wrap:wrap-reverse;position:relative;box-sizing:border-box}.elixir{color:#db7093}.card{height:60vh;width:50vh;background:linear-gradient(#0000,#35187ab3);padding:1vh;border-radius:3%;display:flex;flex-direction:column;font-size:3vh;gap:2vh;border:.5vh solid #ccc;box-sizing:border-box}.rarity-icons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.card-frame{width:200px;height:200px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}.card-image{border-radius:10px;width:170px;height:200px;display:flex;align-items:center;justify-content:center;object-fit:cover;object-position:center;word-break:normal;text-align:center}.cardTop{display:flex}.changeInput{width:100%;background-color:#23549c;padding:2vh;max-height:60vh;border-radius:10px;background-color:#5f9ea080;display:flex;justify-content:space-between;font-size:3vh;color:#fff;font-weight:700;box-sizing:border-box}.select_inputs{width:35%;display:flex;flex-direction:column;gap:3vh}.inputs{gap:5vh;padding:2vh;width:100%;max-height:50vh;overflow-y:scroll;border-radius:10px;background-color:#5f9ea099;box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));justify-items:center}.inputs *{width:100%;font-size:3vh;height:4vh;border:none;border-radius:10px;text-align:center;min-height:fit-content}.inputs input:hover,button:hover,select:hover,input:focus,button:focus,select:focus{background-color:gray;outline:4px auto black;color:#fff}.display{width:100%;padding:1vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.flagBox{display:flex;flex-direction:column;border-radius:10px;background-color:#ccc;width:14vh}.flag{width:80%;background-color:#23549c}.common{background-color:#ccc;border-radius:10px}.rare{background-color:#f93;border-radius:10px}.epic{background-color:#93c;border-radius:10px}.legendary{border-radius:10px;background:linear-gradient(135deg,#fff,#d4d4d4,#b8b8ff,#ffb8ff,#ffd1b8,#fff);box-shadow:0 0 15px #fff9}.champion{background:linear-gradient(135deg,#fffaa0,#fff275,#ffe259,gold,#ffec8b);text-shadow:0 0 4px rgba(255,255,200,.6),0 0 8px rgba(255,230,100,.5);border-radius:10px}.flexCol{display:flex;flex-direction:column;align-items:center;font-weight:700}.flexRow{display:flex;flex-direction:row;gap:2vh}.name{font-size:5vh}.cardBottom{border:5px solid gray;flex:auto;border-radius:10px;background-color:#fff;overflow:auto}.gridBox{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:5px;padding:5px}.stat img{height:50px;width:50px;background-color:gray;border-radius:5px}.stat{box-sizing:border-box;border:2px solid gray;background:#bfbfbf;width:100%;height:60px;padding:5px;display:flex;font-size:large;align-items:center;border-radius:5px;box-shadow:-2px 2px 4px #0000004d}.statValue{display:flex;flex-direction:column}.statValueTop{font-size:1em}.statValueBottom{font-size:calc(1em + 2px);color:#fff;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black}.hover{display:flex;justify-content:center;align-items:center;width:40px;height:40px;font-size:30px;border-radius:50%;background:none;border:none;color:#fff}.hover:hover{background-color:#00000080;cursor:pointer}.card-frame img{width:100%;height:100%;object-fit:cover;object-position:center}.statBox{flex-direction:row;display:flex;flex-wrap:wrap}.inputs img{height:50px;width:50px}.statImg{display:flex;align-items:center;justify-content:space-between;word-break:normal}.inputs-wrapper{box-sizing:border-box;position:relative;width:max(50%,50vh);height:60vh;margin:0;display:flex;align-items:start;justify-content:start;flex-shrink:0}.select_inputs{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transform:translateY(0);transition:opacity .8s ease,transform .8s ease;box-sizing:border-box}.select_inputs.active{opacity:1;pointer-events:auto;transform:translateY(0);margin:0}.name{color:#fff;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;font-size:1.5em}@media (max-width: 600px){.flexRow{flex-wrap:wrap}header{font-size:4vh}}