@font-face{font-family:LOLtitles;src:url(/fonts/LOLtitles.otf)}@font-face{font-family:LOLnormal;src:url(/fonts/LOLnormal.otf)}@font-face{font-family:LOLlore;src:url(/fonts/LOLlore.otf)}#root{font-family:LOLtitles,Acme,Roboto,sans-serif;color:#fff;padding:0;text-align:center;width:100%}@media only screen and (min-width: 1200px){select{font-size:25px}.single-spell-description{font-size:20px}h4{font-size:35px}}html{padding:0;max-width:100vw}body{background-image:url(/backgrounds/1.jpg);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;padding:0;width:100%;margin:0}button{background-color:#081335;color:#fff;padding:5px 20px;border-radius:5px;font-weight:800;width:fit-content}h2{width:fit-content;padding:0 100px;margin:10px auto;border-radius:10px;color:#000}.header-container{background-color:#081335;width:100%;padding:0;margin:0;height:100px}.side-menu-hidden{display:none}.back-to-champs{background-color:#000;color:#fff;padding:5px;border-radius:5px;position:relative;bottom:50px}.hamburger-react{display:none}button:hover{background-color:#fff;color:#000}a{text-decoration:none}a:visited{color:inherit}h1{margin:0 auto}.loader{width:100%;height:500px;margin:100px auto}.divider{width:50%;margin:10px auto;padding:0;border-bottom:solid black 1px}.navbar{position:fixed;top:0;left:0;height:100%;width:100px;background-color:#081335;color:#ddbf6d;transition:all .3s ease;z-index:5}nav{display:flex;flex-direction:column;justify-content:space-around;height:500px}a:visited,a{text-decoration:none}.nav-link{color:#aaa;padding:20px 0}.nav-link:hover{color:#000;background-color:azure;transition:background-color 1s ease}.navbar:hover{width:300px;transition:all .5s ease;font-size:25px}.menu-logo{height:60px;margin:0 auto}.logo-header{height:100px}.home-screen{background-color:#ffffff8a;color:#000;width:60%;margin:50px auto;padding:20px;border-radius:20px}.home-h2{margin:100px auto 50px}.home-message{font-size:25px}.random-champ-button{padding:30px 60px;background-color:#081335;font-size:25px}.sortby-form{display:flex;flex-direction:row;width:10%;margin:10px auto;justify-content:space-between}.champ-list{display:flex;flex-direction:row;flex-wrap:wrap;list-style:none;justify-content:space-between;width:90%;margin:0 auto;animation-name:slide-up;transition:.5s ease-in-out;animation-duration:1s}@keyframes slide-up{0%{translate:0px 150px;opacity:0}to{translate:0 0;opacity:100}}.champ-card{margin:10px 20px;border:solid black 1px;border-radius:10px;width:200px;height:200px;filter:grayscale(0);transition:.5s ease-in-out;box-shadow:#00000012 0 1px 1px,#00000012 0 2px 2px,#00000012 0 4px 4px,#00000012 0 8px 8px,#00000012 0 16px 16px}.champ-card:hover .champ-img{filter:grayscale(1) brightness(.4);transition:.5s ease-in-out}.champ-card:hover .champ-title{opacity:100;transition:.5s ease-in-out}.champ-name{position:absolute;border-radius:10px;width:200px;margin:0 auto;padding:0;color:#fff;z-index:5;background-color:#0000008f}.champ-img{width:100%;height:200px;transition:.5s ease-in-out;border-radius:10px}.champ-title{position:absolute;text-align:center;color:#fff;width:100px;margin:30px auto;padding:50px;opacity:0;transition:.5s ease-in-out;z-index:5}.carousel-container{width:1000px;margin:10px auto 0}.skin-image-container{width:100%;margin:0 auto}.back-to-champs{margin:-30px auto 0 0;display:flex;align-items:flex-start}.single-champ-name{font-size:50px;width:60%;padding:10px;border-radius:10px;margin:10px auto;color:#000;background-color:#ffffff46}.single-champ-lore{margin:0 auto 10px;width:60%;color:#ddbf6d;background-color:#081335b7;border-radius:10px;padding:10px;font-size:25px}.type-imgs{display:flex;background-color:#08133562;border-radius:10px;padding:10px 0}.type-img{height:120px;margin:auto}.stats-container{width:fit-content;margin:10px auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;background-color:#08133562;border-radius:10px;padding:10px 40px}.attack-container,.defense-container,.magic-container,.difficulty-container{display:flex;flex-direction:column;width:160px}.class-stats{display:flex;flex-direction:row;justify-content:space-between;width:50%;margin:auto}.champ-spells{margin:40px auto;width:60%;display:flex;flex-direction:row;justify-content:space-between}.single-spell{box-shadow:#00000012 0 1px 1px,#00000012 0 2px 2px,#00000012 0 4px 4px,#00000012 0 8px 8px,#00000012 0 16px 16px;width:150px;background-color:#f5f5f586;color:#000}.spell-img{height:100px;width:100px}.single-spell-description{width:80%;margin:0 auto 50px;background-color:#f5f5f586;color:#000;font-weight:200;font-size:20;border-radius:10px;padding:10px;box-shadow:0 0 20px 1px #00000023}.item-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;list-style:none;width:80%;margin:20px auto;animation-name:slide-up;transition:.5s ease-in-out;animation-duration:1s;border-radius:10px;overflow:hidden}.item-card{width:150px;height:170px;margin:10px 30px;border-radius:10px;box-shadow:#00000012 0 1px 1px,#00000012 0 2px 2px,#00000012 0 4px 4px,#00000012 0 8px 8px,#00000012 0 16px 16px}.item-name{font-size:20px;position:absolute;text-align:center;width:150px;max-height:80px;margin:0;background-color:#00000071;border-radius:10px;overflow:hidden}.sortby-label{font-size:25px;text-align:center;color:#000}.sortby-section{display:flex;flex-direction:row;justify-content:space-between;width:400px;margin:auto}.item-img{width:150px;height:150px;border-top-left-radius:10px;border-top-right-radius:10px}.item-cost-container{margin:0;color:#000;background-color:#ffffff9f;position:relative;padding:0;bottom:5px;width:150px;font-size:16px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;display:flex;flex-direction:row;justify-content:center}.item-cost{padding:0;margin:0}.coin-icon{height:20px}.button-container{margin-top:10px}.item-sort{margin-left:10px}select{border-radius:10px;width:250px}@media only screen and (max-width: 1200px){.navbar{display:none}#root{font-family:Roboto,sans-serif;color:#fff;margin:0;padding:0;text-align:center;width:100%}h2{margin-top:-30px;padding:5px 20px}.home-h2{margin:20px auto 10px}.random-champ-button{padding:10px}.logo-header{height:100px}.home-screen{margin-top:0;width:80%}.sortby{z-index:1}.sidebar{display:block;position:absolute;top:0;left:0;width:100%;height:100%}.sidebar-menu{display:block;position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#081335;animation-name:slide;animation-duration:.5s}.side-menu-show{animation-name:slidein;animation-duration:.5s;display:block;position:fixed;top:0;left:0;width:100%;height:100vh;color:#ddbf6d;background-color:#081335;z-index:5}.side-menu-hidden{translate:-100% 0;animation-name:slideout;animation-duration:.5s;display:block;position:absolute;top:0;left:0;width:100%;height:100vh;background-color:#081335;z-index:5}@keyframes slidein{0%{translate:-100% 0;opacity:0}to{translate:0 0;opacity:100}}@keyframes slideout{0%{translate:0 0;opacity:100}to{translate:-100% 0;opacity:0}}.hamburger-react{display:block;z-index:6;position:fixed;bottom:80px}.champ-list{display:flex;flex-direction:row;flex-wrap:wrap;list-style:none;justify-content:space-around;width:100%;margin:0 auto;padding:0;animation-name:slide-up;transition:.5s ease-in-out;animation-duration:1s}.champ-card{margin:10px;border:solid black 1px;width:100px;height:100px;filter:grayscale(0);transition:.5s ease-in-out;box-shadow:#00000012 0 1px 1px,#00000012 0 2px 2px,#00000012 0 4px 4px,#00000012 0 8px 8px,#00000012 0 16px 16px}.champ-title{display:none}.champ-name{position:absolute;font-size:15px;width:100px;margin:0 auto;padding:0;color:#fff;z-index:5;background-color:#0000008f}.champ-img{width:100%;height:100px;transition:.5s ease-in-out}.carousel-container{width:100%;margin:0}.single-champ-lore{width:90vw;font-family:LOLlore}.back-to-champs{display:none}.class-stats{display:flex;flex-direction:column;width:90%;margin:0 auto}.stats-container{width:70%}.type-imgs{width:100%}.sortby-form{display:flex;flex-direction:column;align-items:center;width:60%;margin:10px auto;justify-content:space-between}select{width:100%;font-size:22px;text-align:center;border-radius:5px;background-color:#fff}.champ-spells{display:flex;flex-direction:column;width:40%;min-width:300px}.spell-name{align-self:flex-start;width:100%;font-size:16px}.single-spell{display:flex;flex-direction:row;justify-content:space-between;column-gap:20px;width:100%;margin-bottom:10px;border-radius:5px}.spell-img{height:100px;width:100px}h4{color:#000;font-size:28px;margin:0;padding:0}.item-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;list-style:none;width:90%;margin:20px auto;animation-name:slide-up;transition:.5s ease-in-out;animation-duration:1s;border-radius:10px;padding:0}.item-card{width:100px;height:100px;margin:20px 0;box-shadow:#00000012 0 1px 1px,#00000012 0 2px 2px,#00000012 0 4px 4px,#00000012 0 8px 8px,#00000012 0 16px 16px}.item-name{font-size:16px;position:absolute;text-align:center;width:100px;max-height:40px;margin:0;background-color:#00000071;border-radius:10px;color:#fff}.item-cost-container{width:100px}.item-img{width:100px;height:100px}.sortby-section{width:300px}.sortby-content{background-color:#00000042;padding:10px 0;width:95%;margin:auto;border-radius:10px}.item-sort-form{display:flex;flex-direction:column;justify-content:center}.item-sort{width:70%}.item-sortby-header{margin:10px auto;color:#fff}.item-sort-submit{margin:0 auto;width:30%}}@property --p{syntax: "<number>"; inherits: true; initial-value: 0;}.pie{--p: 20;--b: 22px;--c: darkred;--w: 150px;width:var(--w);aspect-ratio:1;position:relative;display:inline-grid;margin:5px;place-content:center;font-size:25px;font-weight:700;font-family:sans-serif}.pie:before,.pie:after{content:"";position:absolute;border-radius:50%}.pie:before{top:0;right:0;bottom:0;left:0;background:radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,conic-gradient(var(--c) calc(var(--p) * 1%),#0000 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)))}.pie:after{inset:calc(50% - var(--b) / 2);background:var(--c);transform:rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2))}.animate{animation:p 1s .5s both}.no-round:before{background-size:0 0,auto}.no-round:after{content:none}@keyframes p{0%{--p: 0}}.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:""}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translateZ(0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px #000000e6;background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,.9);color:#fff}.carousel:hover .slide .legend{opacity:1}