@import"https://fonts.googleapis.com/css2?family=Roboto+Flex&family=Kanit&family=Lato&display=swap";*{box-sizing:border-box;padding:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.15;font-weight:400;--font1: "Roboto Flex", sans-serif;--font2: "Kanit", sans-serif;--font3: "Lato", sans-serif;background-color:#fcfcfc;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;display:flex;width:100%;height:100%;background-size:cover}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{margin:0 auto;width:100%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}:root{--font1: "Roboto Flex", sans-serif;--font2: "Kanit", sans-serif;--font3: "Lato", sans-serif}main{background-color:#fbfafb;display:flex;margin:auto;padding:40px 80px;height:calc(100% - 100px);position:relative;z-index:10}.cardMargin{background-color:#ffe165;height:640px;width:440px;border-radius:15px;margin:auto}.cardMargin .cardBack{width:410px;height:610px;background-color:#a26aad;margin:15px;border-radius:6px;padding-top:20px;position:relative}.cardMargin .cardBack .titleContainer{display:flex;top:0;width:100%;position:absolute;align-items:center;height:40px}.cardMargin .cardBack .titleContainer .titleCard{font-size:30px;font-family:var(--font1);font-weight:700;padding-top:1px;width:100%;margin-left:76px;color:#161616}.cardMargin .cardBack .titleContainer .cardPS{display:flex;align-items:flex-end;height:40px;margin-bottom:8px;margin-right:2.4px;font-weight:700;font-family:var(--font1)}.cardMargin .cardBack .titleContainer .cardPS .psNumber{font-size:26px;color:#161616}.cardMargin .cardBack .titleContainer .psychic{height:32px;width:44px;border-radius:100px;border:3px solid rgba(255,255,255,.849);margin:0 4px 0 0;padding:0}.cardMargin .cardBack .divImg{height:240px;width:370px;background-color:#ececec;margin:20px auto auto;position:relative;display:flex}.cardMargin .cardBack .divImg div .phase{position:absolute;top:-26px;left:-24px;font-size:14px;font-style:italic;font-family:var(--font2);font-weight:700;width:64px;text-align:center;z-index:80;color:#505350;background:linear-gradient(180deg,#fff,#969696 20%,#fff 35%,#fff 65%,#969696 80%,#fff);padding-top:9px;padding-bottom:9px;border-radius:20px 8px 20px 10px;line-height:0}.cardMargin .cardBack .divImg div .ralts{position:absolute;background-color:#f3f3f3;border:3px solid #b1b2b3;width:58px;image-rendering:crisp-edges;border-radius:20px 6px;left:-22px;top:-8.6px}.cardMargin .cardBack .divImg .kirlia{object-fit:cover;padding:4px;width:100%}.cardMargin .cardBack .divImg .pokeDescript{position:absolute;width:106%;bottom:-14px;left:-13px;font-size:9px;font-family:var(--font1);font-weight:500;text-align:center;z-index:80;background:linear-gradient(180deg,#fff,#bebebedb 18%,#fff 40%,#fff 60%,#bebebedc 82%,#fff);padding:8px 10px;border-top-left-radius:18px;border-bottom-left-radius:12px;border-bottom-right-radius:30px;line-height:.5;border-left:7px solid #8282867a;border-right:7px solid #8282868c}.cardMargin .cardBack .skillContainer{position:absolute;width:90%;height:260px;margin-top:40px;margin-left:20px}.cardMargin .cardBack .skillContainer .skill{margin-top:20px}.cardMargin .cardBack .skillContainer .skill div{display:flex;align-items:center}.cardMargin .cardBack .skillContainer div .psychicSkill{height:22px;width:22px;border:1px solid rgba(255,255,255,.849);border-radius:100px}.cardMargin .cardBack .skillContainer .skill div .skillName{margin-left:98px;font-weight:800;font-family:var(--font1);font-size:18px;cursor:pointer}.cardMargin .cardBack .skillContainer .skillText{margin-top:4px;font-size:14px;font-family:var(--font2);font-weight:400;color:#141414;line-height:1.2}.leftMain{margin:auto auto auto -10px;display:flex;flex-direction:column;font-family:var(--font1);font-size:20px;height:90%;width:550px}.leftMain .top{display:flex;flex-direction:column;justify-content:space-between;height:40%}.leftMain .top span{text-align:justify;width:100%;margin-bottom:20px}.leftMain .top span .insta{height:40px}.checkMenu{width:240px;padding:20px;box-shadow:6px 6px 6px -2px #9cce97}.checkMenu ul{list-style:none;padding:10px;margin-bottom:14px}.checkMenu .category{margin-top:14px;font-weight:600}.checkMenu li{margin-top:3px;font-weight:400}.checkMenu .type{font-weight:600}.cardList{display:flex;flex-direction:column;width:100%;margin:0 auto;padding:10px 20px}.card{width:260px;height:440px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;text-align:center;margin:auto 10px 30px}.cardDesc{margin:2px 0;height:32px;font-weight:600;font-size:14px}.cardPrice{margin:0 0 2px}.cardP{width:240px;border-radius:6px}.cardBtn{width:230px;height:38px;border-radius:3px;cursor:pointer;background:transparent;border:2px solid #a3b3b2;outline:none;transition:.15s ease-in-out;font-weight:600}.cardBtn:hover{transition:.2s ease-in-out;background:#a3b3b2ad}.header{display:flex;box-shadow:0 12px 6px -7px #9cce97;background-color:#f5f5f5;height:100px;width:100%;position:relative;z-index:20}.navbar{display:flex;margin:0 auto;width:80%;box-shadow:0 12px 6px -7px #9cce97}.navbar img{display:flex;align-self:center;height:100px;cursor:pointer}.header .navbar .name{display:flex;align-items:center;margin-left:200px;font-family:var(--font1)}.name h2{font-size:42px;font-weight:600;padding-left:30px;padding-right:30px;font-family:var(--font2)}.header .navbar ul{list-style:none;display:flex;min-width:400px;gap:40px;margin:0 auto;align-items:center;font-size:20px;font-family:var(--font2);font-weight:400}.header .navbar ul li{cursor:pointer;margin:0 40px}li a{text-decoration:none;color:#141414}