@font-face{font-family:font-1;src:url(/assets/Dongle-Regular-CSZaLWVc.ttf)}@font-face{font-family:font-2;src:url(/assets/Dongle-Light-4lxZmLtH.ttf)}*{margin:0;padding:0;box-sizing:border-box;font-family:font-1,sans-serif}body{background:#212040;color:#eee}li{list-style:none}.result{display:flex;flex-wrap:wrap;justify-content:center}.user-list-page>h2{text-align:center;font-size:1.9rem;letter-spacing:1px}.user-list-page>h2 span{font-size:1rem}.header h1{font-size:3.3rem;text-shadow:2px 3px 0px #546fe4;text-align:center;letter-spacing:2px}.header nav{position:absolute;top:16px;left:16px;font-size:1.3rem}.header nav ul{display:flex;width:180px;justify-content:space-between}.header nav ul a{text-decoration:none;color:#eee;border-radius:10px;width:102px;text-align:center;margin-right:5px;padding:4px 8px}.header nav ul a:visited{text-decoration:none;color:#eee}.header nav ul a:hover{background:#060d2c}.header nav ul a.nav-active{background:#546fe4}.header nav ul a.nav-active:hover{background:#060d2c}.form-component .form-container{text-align:center}.form-component form{width:300px;margin:0 auto}.form-component form input[type=text]{padding:1px 10px;border-radius:10px 10px 0 0;border:none;font-size:1.5rem;display:block;margin:0 auto;width:220px;outline:none;text-align:center}.form-component form input[type=submit]{padding:1px 10px;width:220px;border-radius:0 0 10px 10px;border:none;background:#546fe4;color:#eee;font-size:1.5rem;cursor:pointer;z-index:10;position:relative}.form-component form input[type=submit]:hover{background:#060d2c}.form-component .btn-sort-container{margin:8px auto;width:220px;display:flex;justify-content:space-around;cursor:pointer}.form-component .btn-sort-container #goodToBad{border-radius:10px 0 0 10px}.form-component .btn-sort-container #badToGood{border-radius:0 10px 10px 0}.form-component .btn-sort-container #goodToBad,.form-component .btn-sort-container #badToGood{background:#546fe4;width:110px;transition:.3s;position:relative}.form-component .btn-sort-container #goodToBad:hover,.form-component .btn-sort-container #badToGood:hover{background:#060d2c}.form-component .btn-sort-container #goodToBad span{transform:translateY(-50%) rotate(-90deg);right:18px}.form-component .btn-sort-container #badToGood span{transform:translateY(-50%) rotate(90deg);left:16px}.form-component .btn-sort-container #goodToBad span,.form-component .btn-sort-container #badToGood span{position:absolute;top:50%}.card{flex:1 0 25%;min-width:260px;max-width:280px;height:620px;background:#060d2c;border-radius:35px;margin:5px;padding:26px 15px 30px;position:relative;overflow:hidden}.card:after{content:"";position:absolute;height:90px;width:100%;background:linear-gradient(180deg,#c3222200,#060d2c 55%);left:50%;transform:translate(-50%);bottom:0;border-radius:0 0 30px 30px}.card img{width:80%;height:254px;object-fit:cover;object-position:top;display:block;margin:0 auto;border-radius:50px;box-shadow:0 8px 1px #ffffff1a,0 16px 1px #ffffff0d}.card h2{margin:24px 0 0;letter-spacing:1px;line-height:20px}.card h5{color:#646464;letter-spacing:1px;font-size:1.2rem;font-weight:300}.card h4{letter-spacing:1px;font-size:1.2rem;margin-top:-4px}.card h4 span{font-size:.7rem}.card ul{margin:6px 0;display:flex;flex-wrap:wrap}.card li{background:#212040;border-radius:18px;padding:0 7px;margin:0 4px 4px 0;font-size:1.1rem}.card li:first-child{margin-left:-4px}.card h3{letter-spacing:1px;font-size:1.4rem;margin-top:10px}.card p{color:#646464;font-size:1.3rem;line-height:20px;height:160px;overflow-y:scroll}.card p::-webkit-scrollbar{display:none}.card .btn{background:#546fe4;position:absolute;bottom:16px;left:50%;transform:translate(-50%);padding:14px 0;width:150px;text-align:center;border-radius:15px;cursor:pointer;transition:.2s;z-index:50;font-size:1rem}.card .btn:hover{background:#212040;box-shadow:0 0 10px #546ee4d2;font-size:1.025rem}