@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap";#root{width:100%}.App{display:flex}.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}@font-face{font-family:Beaufort for lol;font-style:normal;font-weight:400;src:local("Beaufort for lol"),url(./assets/fonts/BeaufortForLol/beaufortforlol-regular.otf) format("opentype")}@font-face{font-family:Beaufort for lol;font-style:italic;font-weight:400;src:local("Beaufort for lol Italic"),url(./assets/fonts/BeaufortForLol/beaufortforlol-italic.otf) format("opentype")}@font-face{font-family:Beaufort for lol;font-style:normal;font-weight:600;src:local("Beaufort for lol Bold"),url(./assets/fonts/BeaufortForLol/beaufortforlol-bold.otf) format("opentype")}@font-face{font-family:Beaufort for lol;font-style:italic;font-weight:600;src:local("Beaufort for lol Bold Italic"),url(./assets/fonts/BeaufortForLol/beaufortforlol-bolditalic.otf) format("opentype")}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{min-width:320px;font-family:Roboto,sans-serif;font-weight:400;font-style:normal;line-height:1.25;font-size:16px;color:#010a13;background-color:#eff0f1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,.h1{font-family:Beaufort for lol;font-weight:600;font-size:32px}h2,.h2{font-family:Beaufort for lol;font-weight:600;font-size:24px}h3,.h3{font-family:Beaufort for lol;font-weight:600;font-size:20px}h4,.h4{font-family:Beaufort for lol;font-weight:600;font-size:18px}p,.text{font-family:Roboto,sans-serif;font-weight:400;font-size:16px}.text-bold{font-family:Roboto,sans-serif;font-weight:600;font-size:16px}.small{font-family:Roboto,sans-serif;font-weight:400;font-size:14px}.small-bold{font-family:Roboto,sans-serif;font-weight:600;font-size:14px}.xsmall{font-family:Roboto,sans-serif;font-weight:400;font-size:10px}.xsmall-bold{font-family:Roboto,sans-serif;font-weight:600;font-size:10px}.sidebar-layout{width:100%;min-height:100vh;display:grid;grid-template-columns:102px 1fr;grid-template-areas:"sidebar content";gap:20px}.sidebar-layout .content{grid-area:content;padding-right:122px}.fullscreen-layout{min-height:100vh}.content-1x1{min-height:100vh;padding-block:6vh;display:flex;gap:20px}.tier-list{max-height:850px;display:grid;grid-template-rows:auto 1fr 1fr 1fr 1fr;row-gap:8px;background-color:#fafafa;box-shadow:0 0 6px -1px #00000021,0 2px 4px -1px #00000017}.tier-list__header{justify-self:center}.tier-list__rank{display:flex;flex-direction:column}.tier-list__rank-label{padding:6px 12px;background-color:#222426;color:#fafafa;text-align:center}.tier-list__rank-list{width:100%;height:100%;padding:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.tier-list__rank-item{list-style:none;position:relative}.tier-list__rank-item__remove{width:19px;height:19px;display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;border:1px solid #fafafa;border-radius:25px;background-color:#ff442e;color:#fafafa;cursor:pointer;visibility:hidden}.tier-list__rank-item__remove:before{content:"";width:7px;height:3px;background-color:#fafafa}.tier-list__rank-item:hover .tier-list__rank-item__remove{visibility:visible}.tier-list__rank-item--empty{text-align:center;line-height:1.1}.tier-list--preview .tier-list__rank-list{max-height:90px;overflow-y:auto}.tier-list--preview .champion-icon{width:clamp(25px,3.25vw,35px);height:clamp(25px,3.25vw,35px)}.search-modal{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;z-index:10;background-color:#010a13bf;overflow:auto}.search-modal__inner{width:max(805px,55%);height:max(600px,55%)}.search-modal--hidden{display:none}.search-modal .champion-search{max-width:initial;max-height:initial}.button{padding:8px;display:inline-flex;gap:8px;background-color:#0a323c;color:#fafafa;text-decoration:none;white-space:nowrap}.input__container{display:flex;flex-direction:column;gap:16px}.input__label sup{color:#ff442e}.input__input{background-color:#0000;border:none;border-bottom:1px solid #010a13;font-size:18px;font-family:Roboto,sans-serif}.input__input:focus{outline:none}.input__helper{color:#bdbdbd}.champion-icon{margin:0;width:clamp(30px,3.75vw,55px);height:clamp(30px,3.75vw,55px);position:relative;border-radius:100%;overflow:hidden}.champion-icon__img{width:100%;height:100%;object-fit:cover}.role-button{padding:7px;display:inline-flex;align-items:center;justify-content:center;border-radius:25px;border:2px solid rgba(0,0,0,0);background-color:#0000;cursor:pointer}.role-button--active{border-color:#a37d2e}.role-button__icon{width:17px;height:17px}.sidebar{height:100vh;grid-area:sidebar;position:fixed;top:0;z-index:9}.sidebar__inner{width:100%;height:100%;padding:12px;display:grid;grid-template-rows:auto 1fr auto;grid-template-areas:"logo" "nav" "settings";background-color:#222426;color:#ead8b3;transition:width .25s ease}.sidebar:hover .sidebar__inner{width:fit-content}.sidebar:hover .sidebar__item{min-width:213px}.sidebar:hover .sidebar__link-label{display:block}.sidebar__nav{grid-area:nav;align-self:center}.sidebar__item:hover{border-right:2px solid #ead8b3}.sidebar__item::marker{content:none}.sidebar__item+.sidebar__item{margin-top:24px}.sidebar__link{display:flex;align-items:center;gap:12px;color:#ead8b3;text-decoration:none}.sidebar__link-figure{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.sidebar__link-label{display:none;white-space:nowrap}.champion-search{max-width:365px;max-height:850px;overflow-y:auto;display:grid;grid-template-rows:auto 1fr;background-color:#fafafa;box-shadow:0 0 6px -1px #00000021,0 2px 4px -1px #00000017}.champion-search--full{width:100%;height:100%}.champion-search__header{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #010a13}.champion-search__header--grid{display:grid;grid-template-columns:1fr auto 1fr}.champion-search__header--grid .champion-search__roles{justify-self:center}.champion-search__header--grid .champion-search__searchbar{max-width:185px;justify-self:flex-end}.champion-search__searchbar{max-width:135px}.champion-search__searchbar-input{width:100%;padding:8px;border:1px solid #010a13;background-color:#0000;color:#010a13}.champion-search__searchbar-input:focus{outline:none}.champion-search__results{padding:12px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px;overflow-y:auto}.champion-pool{flex:1}.champion-pool__header{padding-top:8px;display:flex;gap:8px}.champion-pool__rank-list{width:100%;height:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.matchup:not(.matchup--preview){max-width:365px;width:100%}.matchup--preview .matchup__header h2{font-family:Roboto,sans-serif;font-size:16px;font-weight:600}.matchup__header{padding-top:12px;display:flex;flex-direction:column;align-items:center;gap:16px}.matchup__header figure{max-width:275px;text-align:center}.matchup__rank-label{position:relative}.matchup__rank-label button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;right:12px;transform:translateY(-50%);background-color:#0000;border:none;cursor:pointer}.matchup__rank-label button img{width:16px;height:16px}.matchup__rank-list{width:100%;height:100%;padding-block:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.compositions-preview{width:100%;height:max(750px,75vh);background-color:#fafafa;box-shadow:0 0 6px -1px #00000021,0 2px 4px -1px #00000017;overflow-y:auto}.compositions-preview__list{display:flex;flex-direction:column;row-gap:16px}.compositions-preview__header,.compositions-preview__item{display:grid;grid-template-columns:300px repeat(2,1fr);column-gap:20px}.compositions-preview__header{padding:16px 32px;position:sticky;top:0;z-index:2;background-color:#fafafa}.compositions-preview__item{margin-inline:20px;padding:8px 12px;align-items:center;background-color:#fafafa;box-shadow:0 0 6px -1px #00000021,0 2px 4px -1px #00000017;list-style:none}.compositions-preview__item:last-of-type{margin-bottom:20px}.compositions-preview__bans,.compositions-preview__picks{display:flex;gap:6px}.compositions-preview__title{width:20ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.compositions-preview__warning{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.compositions-preview__warning-desc{max-width:35ch;text-align:center}.compositions-preview__warning-button{margin-top:16px}.unavailable-page{width:100%;height:100vh;padding:6vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}.notfound{width:100%;min-height:100vh;padding:6vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}.home{width:100%;min-height:100vh;padding:6vh}.home__inner{max-width:600px;margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px}.home__title{margin-inline:auto}.home__title span{padding:6px;background-color:#222426;color:#ead8b3}.home__emote{margin-inline:auto}.home__desc{max-width:55ch}.home__button{color:#ead8b3;background-color:#222426}.compositions{min-height:100vh;padding-block:6vh;display:grid;grid-template-rows:auto 1fr;row-gap:26px}.compositions__button{justify-self:flex-end}.new-composition{width:100%;min-height:100vh;padding:8.5vh 9vw;display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:40px}.new-composition__breadcrumb{width:min(950px,85%);padding:8px 20px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;box-shadow:0 0 6px -1px #00000021,0 2px 4px -1px #00000017}.new-composition__breadcrumb-item{display:flex;align-items:center;gap:8px;list-style:none;line-height:1}.new-composition__breadcrumb-item__number{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:25px;background-color:#0a323c;color:#fafafa}.new-composition__breadcrumb-item__content{display:flex;flex-direction:column;color:#0a323c}.new-composition__breadcrumb-separator{width:min(175px,20%);height:2px;list-style:none;background-color:#bdbdbd}.new-composition__inner{display:grid;grid-template-rows:1fr 30px;gap:45px}.new-composition__content{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.new-composition__col{display:flex;flex-direction:column;gap:12px}.new-composition__chose-container{padding:12px;display:flex;flex-direction:column;align-items:center;gap:16px;background-color:#fafafa;box-shadow:0 0 6px -1px #00000021,0 2px 4px -1px #00000017}.new-composition__chose-title{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700}.new-composition__chose-title figcaption{text-transform:capitalize}.new-composition__chose-button{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.new-composition__chose-button img{width:60px;height:60px;border-radius:50%}.new-composition__buttons{display:flex;align-items:center;justify-content:center;gap:16px}.new-composition__buttons-separator{width:1px;height:30px;background-color:#010a13}.new-composition__buttons a,.new-composition__buttons button{background-color:#0000;color:#010a13;text-decoration:none;border:none;font-family:Roboto,sans-serif;font-size:16px;text-transform:capitalize;line-height:30px;cursor:pointer}.new-composition__buttons a:disabled,.new-composition__buttons button:disabled{color:#bdbdbd;cursor:not-allowed}