@import"https://fonts.googleapis.com/css2?family=Roboto&display=swap";:root{--klei: "BelisaPlumilla";--secondaryFont: "Roboto";--primaryColor: hsl(0, 0%, 30%);--primaryGradient: linear-gradient(90deg, black 5%, var(--primaryColor) 50%, black 95%);--secondaryColor: white;--tertiaryColor: #daa520;--quarternaryColor: #008080;--tertiaryGradient: linear-gradient(150deg, #956b00 5%, #daa520 50%, #956b00 95%);background:var(--secondaryColor);width:100%;padding:0}html,body{margin:0;padding:0;width:100%;height:100%}@font-face{font-family:BelisaPlumilla;src:url(/assets/belisa_plumilla-UYpOTRHx.ttf) format("truetype");font-weight:400;font-style:normal}.page-header{background:var(--primaryGradient);width:100%;height:15vh;border-bottom:4px solid var(--secondaryColor);box-shadow:5px 5px 30px #000;display:flex;justify-content:center;align-items:center;gap:3vw}.page-header .header-title{color:var(--secondaryColor);font-family:var(--klei);font-size:2.5vw}.page-header .header-link svg{color:var(--tertiaryColor);min-width:5vw;min-height:5vh;max-height:5vh;max-width:5vw;transition:color .2s}.page-header .header-link:hover svg{color:gold}.page-header .active-link svg{filter:drop-shadow(0 0 2px rgb(255,255,255))}.page-body{background:var(--tertiaryGradient);width:100%;height:85vh}.tooltip-wrapper{position:relative;display:inline-block;cursor:pointer}.tooltip{visibility:hidden;position:absolute;bottom:125%;left:50%;transform:translate(-50%);color:#fff;padding:6px 10px;border-radius:4px;white-space:nowrap;font-size:.85rem;pointer-events:none;z-index:10;opacity:0;transition:all .3s ease;background-color:transparent}.tooltip-wrapper:hover .tooltip{visibility:visible;background-color:#222222d9;border-radius:10px;opacity:1}.snackbar-contents{position:fixed;top:calc(15vh + 20px);left:20px;width:fit-content;min-height:10vh;background-color:var(--quarternaryColor);color:#fff;border-radius:10px;box-shadow:0 0 5px var(--primaryColor);font-family:var(--klei);display:flex;flex-direction:column;align-items:center;justify-content:center}.snackbar-contents .snackbar-message{display:flex;align-items:center;justify-content:space-between;text-align:center;width:100%;height:auto;padding:1vh 1vw;gap:10px;font-size:2vw}.snackbar-contents .snackbar-message .snackbar-icon{width:50px;height:50px;margin-left:10px}.snackbar-contents .snackbar-message .snackbar-hide-button{cursor:pointer;margin-right:10px;transition:all .2s ease}.snackbar-contents .snackbar-message .snackbar-hide-button:hover{transform:scale(1.11);color:var(--tertiaryColor);filter:drop-shadow(0 0 4px rgb(0,0,0))}.snackbar-contents .snackbar-body{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:10px;width:20vw}.snackbar-contents .snackbar-body .snackbar-icon-section{height:100%;width:100px;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.snackbar-contents .snackbar-body .snackbar-buttons{display:flex;justify-content:space-around;align-items:center;height:100%;width:100%}.snackbar-contents .snackbar-body .snackbar-buttons .snackbar-button{background-color:var(--tertiaryColor);font-family:var(--klei);font-size:32px;display:flex;justify-content:center;align-items:center;width:5vw;height:5vh;padding:10px 20px;border-radius:5px;color:#fff;cursor:pointer;transition:all .2s ease}.snackbar-contents .snackbar-body .snackbar-buttons .snackbar-button:hover{color:#000;filter:drop-shadow(0 0 4px rgb(255,255,255))}.snackbar-progress{height:4px;background:linear-gradient(90deg,#4caf50,#8bc34a);animation:progressbarShrink var(--duration) linear forwards;border-radius:2px 2px 0 0;margin-bottom:5px}@keyframes progressbarShrink{0%{width:100%;background:linear-gradient(90deg,#4caf50,#8bc34a)}50%{width:50%;background:linear-gradient(90deg,#ffeb3b,#ffc107)}to{width:0%;background:linear-gradient(90deg,#f44336,#e91e63)}}@keyframes fadeSlideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeSlideInRight{0%{opacity:0;transform:translate(30px) scaleX(-1)}to{opacity:1;transform:translate(0) scaleX(-1)}}.home-page-body{width:100%;height:80vh;display:flex;flex-direction:column;align-items:center}.home-header{width:fit-content;height:fit-content;padding-top:20px;margin-bottom:20px;gap:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}.home-header .home-header-title{color:var(--secondaryColor);font-family:var(--klei);-webkit-user-select:none;user-select:none;font-size:54px;border-bottom:2px solid var(--secondaryColor)}.home-header .home-header-label{display:flex;align-items:end;justify-content:center;color:#000;font-family:var(--klei);-webkit-user-select:none;user-select:none;font-size:24px;cursor:pointer;transition:all .2s ease}.home-header .home-header-label:hover{color:var(--secondaryColor);scale:1.05}.home-header .home-header-label .home-header-label-img{height:48px;-webkit-user-drag:none;pointer-events:none}.home-main{height:100%;width:100%;display:flex;justify-content:space-around;align-items:center;gap:30px;flex-wrap:wrap;overflow:auto;scrollbar-width:none}.home-main .home-info-thumbnail{width:30vw;height:50vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;animation:fadeSlideIn 1s ease-out forwards}.home-main .home-info-thumbnail .home-info-header{color:var(--secondaryColor);font-family:var(--klei);-webkit-user-select:none;user-select:none;font-size:3vw}.home-main .home-info-thumbnail .home-info-images{display:flex;justify-content:space-around;align-items:center;height:30vh;padding-bottom:20px}.home-main .home-info-thumbnail .home-info-images .home-info-img{height:30vh;-webkit-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none}.home-main .home-info-thumbnail .home-info-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:2vw;font-family:var(--klei);padding:1vw 4vh 1vw 4vh;height:2.5vh;width:6vw;background-color:var(--quarternaryColor);color:var(--secondaryColor);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .25s ease}.home-main .home-info-thumbnail .home-info-button:hover{background-color:var(--secondaryColor);color:var(--quarternaryColor);border:2px solid var(--quarternaryColor)}.home-intro-item{width:max(35vw,500px);height:max(62vh,400px);display:flex;flex-wrap:wrap;text-align:center;align-items:center;justify-content:center;gap:10px}.home-intro-item .intro-label{font-family:var(--klei);font-size:33px;-webkit-user-select:none;user-select:none;animation:fadeSlideIn 1s ease-out forwards}.home-intro-item .intro-imgs{width:100%;height:200px;display:flex;justify-content:space-around;align-items:center}.home-intro-item .intro-imgs .intro-img-left{max-height:100%;animation:fadeSlideIn 1s ease-out forwards;-webkit-user-select:none;user-select:none}.home-intro-item .intro-imgs .intro-img-right{max-height:100%;animation:fadeSlideInRight 1s ease-out forwards;-webkit-user-select:none;user-select:none}.home-tutorial-item{width:max(25vw,300px);height:max(60vh,400px);display:flex;flex-wrap:wrap;text-align:center;align-items:center;justify-content:center;gap:10px}.home-tutorial-item .tutorial-header{color:var(--secondaryColor);font-family:var(--klei);font-size:max(36px,3.5vmax);-webkit-user-select:none;user-select:none;height:fit-content;width:100%}.home-tutorial-item .tutorial-label{font-size:max(24px,2.2vmax);font-family:var(--klei);padding:10px;-webkit-user-select:none;user-select:none;height:fit-content}.home-tutorial-item .tutorial-imgs{width:100%;height:150px;display:flex;justify-content:space-around;align-items:center;font-family:var(--klei)}.home-tutorial-item .tutorial-imgs .tutorial-img{max-height:100%;cursor:pointer;animation:fadeSlideIn 1s ease-out forwards}.redirect-text{transition:all .2s ease;cursor:pointer}.redirect-text:hover{color:var(--primaryColor)}.stats-page-body{width:100%;height:75vh;display:flex;flex-direction:row;justify-content:space-between}.match-history-section{height:100%;width:45vw;display:flex;flex-direction:column;align-items:center;padding-top:5vh;padding-bottom:5vh;padding-left:2.5vw;gap:2.5vh;gap:10px}.match-history-section .match-history-container{height:fit-content;width:40vw;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;color:#fff;background-color:var(--quarternaryColor);display:flex;flex-direction:column;align-items:center;overflow-y:scroll;-ms-overflow-style:none;scrollbar-color:var(--tertiaryColor) var(--quarternaryColor)}.match-history-section .match-history-container .match-history-item{width:100%;height:80px;background:var(--quarternaryColor);border-bottom:3px solid black;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.match-history-section .match-history-container .match-history-item .player-segment-container{width:80%;height:100%;flex-shrink:0;color:#000;display:flex;align-items:center;justify-content:space-evenly}.match-history-section .match-history-container .match-history-item .player-segment-container .player-segment{display:flex;flex-direction:column;align-items:center}.match-history-section .match-history-container .match-history-item .player-segment-container .player-segment .character-icon{background:transparent;cursor:pointer;transition:all .2s ease;-webkit-user-drag:none}.match-history-section .match-history-container .match-history-item .player-segment-container .player-segment .character-icon:hover{transform:scale(1.1) rotate(10deg)}.match-history-section .match-history-container .match-history-item .player-segment-container .player-segment .winner{filter:drop-shadow(0 0 8px rgb(221,255,110))}.match-history-section .match-history-container .match-history-item .match-history-item-extras{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.match-history-section .match-history-container .match-history-item .match-history-item-extras .examine-match-button{transform:rotate(-90deg);cursor:pointer;color:var(--primaryColor);transition:all .2s ease}.match-history-section .match-history-container .match-history-item .match-history-item-extras .examine-match-button:hover{color:var(--tertiaryColor);transform:rotate(0) scale(1.05)}.match-history-section .match-history-container .match-history-item .match-history-item-extras .examine-match-button.selected{color:var(--tertiaryColor);filter:drop-shadow(0 0 5px rgba(255,153,0,.603))}.match-history-section .match-history-header{font-family:var(--klei);font-weight:300;font-size:3.5rem;color:var(--secondaryColor);-webkit-user-select:none;user-select:none;width:100%;display:flex;justify-content:center;gap:40px;align-items:center}.char-data-section{height:100%;width:45vw;padding-top:5vh;padding-bottom:5vh;display:flex;flex-direction:column;align-items:center;gap:5vh}.char-data-section .char-selection-section{height:25vh;width:45vw;overflow:none;padding:10px;margin-top:5vh;margin-right:2.5vw;display:flex;flex-direction:row;justify-content:space-between;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;background:var(--quarternaryColor)}.char-data-section .char-selection-section .char-portrait{max-height:25vh;max-width:30%;filter:drop-shadow(0 0 8px rgb(201,108,255));transition:all .5s ease}.char-data-section .char-selection-section .char-portrait:hover{filter:drop-shadow(0 0 25px rgb(119,71,144))}.char-data-section .char-selection-section .char-info-wrapper{width:min(40vw,80%);display:flex;flex-direction:column;justify-content:space-between}.char-data-section .char-selection-section .char-icon-container{display:flex;align-items:center;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--primaryColor) var(--quarternaryColor);gap:10px;height:70px;margin-right:10px;margin-left:10px}.char-data-section .char-selection-section .char-icon-container .char-icon{max-height:50px;max-width:50px;scroll-snap-align:start;-webkit-user-drag:none;cursor:pointer;opacity:50%;transition:all .2s ease}.char-data-section .char-selection-section .char-icon-container .char-icon:hover{transform:scale(1.1) rotate(-10deg);opacity:100%}.char-data-section .char-selection-section .char-icon-container .selected{opacity:100%;filter:drop-shadow(0 0 8px rgb(201,108,255))}.char-data-section .char-selection-section .char-basic-descriptions{height:15vh}.char-data-section .char-selection-section .char-basic-descriptions .char-name{font-family:var(--klei);color:#fff;font-size:2.5rem;text-align:center;width:100%;padding-bottom:15px}.char-data-section .char-selection-section .char-basic-descriptions .char-basic-data{font-family:var(--secondaryFont);display:flex;justify-content:space-between}.char-data-section .char-selection-section .char-basic-descriptions .char-basic-data .char-data-item{display:flex;flex-direction:column;text-align:center}.char-data-section .char-data-display{height:40vh;margin-right:2.5vw;padding:10px;width:45vw;gap:10px;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;background:var(--quarternaryColor);display:flex;justify-content:center;align-items:center;flex-direction:row}.char-data-section .char-data-display .line-chart-container{height:max(200px,35vh);width:max(300px,25vw);display:flex;flex-direction:column;justify-content:center;align-items:center}.char-data-section .char-data-display .line-chart-container .line-chart-title{font-family:var(--klei);font-size:2.5rem;color:var(--secondaryColor);border-bottom:2px solid white;margin-bottom:5px}.char-data-section .char-data-display .line-chart-container .line-chart-tooltip{border:2px solid var(--primaryColor);border-radius:6px;background-color:#6b6b6b4f;padding:10px;margin-left:5vw;margin-top:5vh}.char-data-section .char-data-display .line-chart-container .line-chart-tooltip .line-chart-tooltip-label{font-weight:700;text-align:center;font-size:16px}.char-data-section .char-data-display .line-chart-container .line-chart-tooltip .line-chart-tooltip-character-icon{width:40px;margin-right:6px;filter:drop-shadow(0 0 8px var(--tertiaryColor))}.char-data-section .char-data-display .line-chart-container .line-chart-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;padding-top:1rem}.char-data-section .char-data-display .line-chart-container .line-chart-legend .line-chart-legend-label{font-size:16px;font-weight:700}.char-data-section .char-data-display .char-data-filters-section{height:100%;width:17.5vw}.char-data-section .char-data-display .char-data-filters-section .char-data-filter-title{text-align:center;font-size:3rem;font-family:var(--klei);color:#fff}.leaderboard-section{height:100%;width:45vw;display:flex;flex-direction:column;align-items:center;padding-top:5vh;padding-bottom:5vh;padding-left:2.5vw;gap:2.5vh;gap:10px}.leaderboard-section .leaderboard-header{font-family:var(--klei);font-weight:300;font-size:3.5rem;color:var(--secondaryColor);-webkit-user-select:none;user-select:none;width:100%;display:flex;justify-content:center;align-items:center;gap:40px}.leaderboard-section .leaderboard-players-container{height:fit-content;width:40vw;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;color:#fff;background-color:var(--quarternaryColor);display:flex;flex-direction:column;align-items:center;overflow-x:hidden;overflow-y:auto;-ms-overflow-style:none;scrollbar-color:var(--tertiaryColor) var(--quarternaryColor)}.leaderboard-section .leaderboard-players-container .leaderboard-player{background-clip:padding-box;width:100%;min-height:80px;color:var(--secondaryColor);font-family:var(--klei);display:flex;justify-content:space-around;align-items:end}.leaderboard-section .leaderboard-players-container .leaderboard-player .leaderboard-elo{width:100px;height:100%;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;gap:10px;color:var(--tertiaryColor);font-weight:800;font-size:36px}.leaderboard-section .leaderboard-players-container .leaderboard-player .leaderboard-elo .leaderboard-rank-icon{width:50px;height:50px;-webkit-user-select:none;user-select:none}.leaderboard-section .leaderboard-players-container .leaderboard-player .leaderboard-username{font-size:44px;width:150px;height:100%;text-overflow:ellipsis;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.leaderboard-section .leaderboard-players-container .leaderboard-player .leaderboard-stats{display:flex;justify-content:space-around;align-items:center;height:100%;width:220px;font-size:36px;-webkit-user-select:none;user-select:none}.header-button{color:var(--tertiaryColor);stroke:#000;stroke-width:4px;cursor:pointer;transition:all .2s ease}.header-button:hover{color:var(--secondaryColor);stroke:var(--tertiaryColor);filter:drop-shadow(0 0 4px rgb(255,255,255))}@keyframes pulse{0%,to{transform:scale(1) rotate(var(--rotate))}25%{transform:scale(1.05) rotate(calc(var(--rotate) - 3deg))}50%{transform:scale(1.1) rotate(var(--rotate))}75%{transform:scale(1.05) rotate(calc(var(--rotate) + 3deg))}}@keyframes glow{0%,to{filter:brightness(1) drop-shadow(0 0 0px white) drop-shadow(0 0 0px white) drop-shadow(0 0 0px white)}50%{filter:brightness(1.1) drop-shadow(0 0 10px rgb(255,185,119)) drop-shadow(0 0 20px rgb(255,156,63)) drop-shadow(0 0 30px rgb(255,123,0))}}@keyframes portalGlow{0%,to{filter:drop-shadow(0 0 8px rgb(190,110,255))}50%{filter:drop-shadow(0 0 16px rgb(110,233,255))}}.queue-page-body{width:100%;height:85vh;display:flex;flex-direction:column;align-items:center;overflow:hidden}.queue-page-body .queue-page-header{height:20vh;width:100%;color:#fff;font-family:var(--klei);font-size:3vmax;display:flex;justify-content:center;align-items:center;position:relative;gap:20vw}.queue-page-body .queue-page-header .queue-page-title{position:absolute;left:50%;transform:translate(-50%);text-align:center}.queue-page-body .queue-page-header .queue-page-header-image{max-height:10vh;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;--rotate: 0deg}.queue-page-body .queue-page-header .queue-page-header-image.pulsing{animation:pulse 3s infinite ease-in-out}.queue-page-body .queue-page-header .queue-page-header-image.pulsing-faster{animation:pulse 2s infinite ease-in-out}.queue-page-body .queue-page-main{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.queue-page-body .queue-page-main .queue-button-section{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:25vh;width:15vw;overflow:none;padding:10px;margin-top:5vh;margin-right:2.5vw;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;background:var(--quarternaryColor)}.queue-page-body .queue-page-main .queue-button-section .queue-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:2vw;font-family:var(--klei);padding:1vw 4vh 1vw 4vh;height:2.5vh;width:6vw;background-color:var(--tertiaryColor);color:var(--secondaryColor);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .25s ease}.queue-page-body .queue-page-main .queue-button-section .queue-button:hover{background-color:var(--secondaryColor);color:var(--tertiaryColor);border:2px solid var(--tertiaryColor)}.queue-page-body .queue-page-main .queue-button-section .queue-pending-label{color:#fff;font-family:var(--klei);font-size:2vw;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.queue-page-body .queue-page-main .queue-button-section .queue-pending-label .queue-pending-image{max-height:12vh;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;animation:glow 5s infinite ease-in-out}.queue-page-body .queue-page-no-secret{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;gap:50px;padding:40px;font-family:var(--klei)}.queue-page-body .queue-page-no-secret .queue-page-no-secret-header{text-align:center}.queue-page-body .queue-page-no-secret .queue-page-no-secret-header .queue-page-no-secret-header-title{font-size:64px;color:var(--secondaryColor)}.queue-page-body .queue-page-no-secret .queue-page-no-secret-header .queue-page-no-secret-header-label{font-size:32px;color:var(--primaryColor)}.queue-page-body .queue-page-no-secret .queue-page-no-secret-tutorial{gap:10px;display:flex;flex-direction:column;align-items:center}.queue-page-body .queue-page-no-secret .queue-page-no-secret-tutorial .queue-page-no-secret-tutorial-label{font-size:36px}.queue-page-body .queue-page-no-secret .queue-page-no-secret-tutorial .queue-page-secret-redirect-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:28px;padding:15px 30px;width:fit-content;height:24px;color:var(--secondaryColor);background-color:var(--quarternaryColor);cursor:pointer;transition:all .2s ease}.queue-page-body .queue-page-no-secret .queue-page-no-secret-tutorial .queue-page-secret-redirect-button:hover{color:var(--quarternaryColor);background-color:var(--secondaryColor);border:2px solid var(--quarternaryColor)}.queue-page-body .queue-page-no-secret .queue-page-no-secret-images{width:100vw;height:10vh;position:relative;overflow:visible}.queue-page-body .queue-page-no-secret .queue-page-no-secret-images .queue-page-no-secret-image{height:max(400px,70vh);position:absolute;bottom:0;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.draft-section{width:85vw;height:80vh;border:2px solid black;display:flex;align-items:center;justify-content:space-around;font-family:var(--klei);color:#fff;font-size:48px}.draft-section .draft-players{height:60vh;width:20vw;border:2px solid black}.draft-section .draft-players .draft-players-header{width:100%;height:10vh;border-bottom:2px solid black;display:flex;align-items:center;justify-content:center;gap:20px}.draft-section .draft-players .draft-players-section{display:flex;flex-direction:column;width:100%}.draft-section .draft-players .draft-players-section .draft-player{max-width:100%;padding:10px;font-size:24px;display:flex;flex-direction:row;align-items:center;gap:20px;background-color:green;border-bottom:2px solid black}.draft-section .draft-players .draft-players-section .draft-player .draft-player-icon{height:40px}.draft-section .draft-characters{height:60vh;width:45vw;border:2px solid black}.draft-section .draft-characters .draft-characters-header{width:100%;height:10vh;border-bottom:2px solid black;display:flex;align-items:center;justify-content:center}.draft-section .draft-characters .draft-characters-section{height:50vh;display:flex;justify-content:center;align-items:center}.draft-section .draft-characters .draft-characters-section .draft-characters-container{width:70%;max-height:50vh;border-right:2px solid black;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;overflow-y:auto;gap:2vw;padding:2vmax}.draft-section .draft-characters .draft-characters-section .draft-characters-container .draft-characters-icon{min-height:50px;min-width:50px}.draft-section .draft-characters .draft-characters-section .draft-characters-container .banned{filter:sepia(1) hue-rotate(-50deg) saturate(5);opacity:.5}.draft-section .draft-characters .draft-characters-section .draft-characters-container .picked{opacity:.5}.draft-section .draft-characters .draft-characters-section .draft-characters-container .draft-characters-icon-pickable{height:50px;width:50px;cursor:pointer;transition:all .2s ease}.draft-section .draft-characters .draft-characters-section .draft-characters-container .draft-characters-icon-pickable:hover{scale:1.05;filter:drop-shadow(0 0 3px rgb(85,255,0))}.draft-section .draft-characters .draft-characters-section .draft-characters-info{width:30%;height:100%;display:flex;flex-direction:column}.draft-section .draft-characters .draft-characters-section .draft-characters-info .draft-characters-portrait-section{width:100%;height:75%;border-bottom:2px solid black;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.draft-section .draft-characters .draft-characters-section .draft-characters-info .draft-characters-portrait-section .draft-characters-portrait{width:10vw}.draft-section .draft-characters .draft-characters-section .draft-characters-info .draft-selected-character-portrait{font-size:3vw}.draft-section .draft-characters .draft-characters-section .draft-characters-info .draft-characters-button{display:flex;justify-content:center;align-items:center;margin-top:10%;margin-left:5px;margin-right:5px;border-radius:10px;border:2px solid transparent;background-color:var(--quarternaryColor);font-size:36px;padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}.draft-section .draft-characters .draft-characters-section .draft-characters-info .draft-characters-button:hover{color:#000;box-shadow:0 0 8px #0009}.draft-section .draft-characters .draft-characters-section .draft-complete{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.draft-section .draft-characters .draft-characters-section .draft-complete .draft-complete-label{font-size:36px}.draft-section .draft-characters .draft-characters-section .match-complete-section{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center}.draft-section .draft-characters .draft-characters-section .match-complete-section .match-complete-header{width:100%;height:30%;display:flex;justify-content:space-around}.draft-section .draft-characters .draft-characters-section .match-complete-section .draft-exit-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:2vw;font-family:var(--klei);padding:10px;height:fit-content;background-color:var(--quarternaryColor);color:var(--secondaryColor);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .25s ease}.draft-section .draft-characters .draft-characters-section .match-complete-section .draft-exit-button:hover{background-color:var(--secondaryColor);color:var(--quarternaryColor);border:2px solid var(--quarternaryColor)}.queue-character{max-height:50vh;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;transition:transform 1s ease-in-out,opacity 1s ease-in-out}.queue-character.left{transform:translate(-43vw) scaleX(-1);opacity:0}.queue-character.right{transform:translate(43vw);opacity:0}.match-found .queue-character.left{transform:translate(-10vw) scaleX(-1);opacity:1}.match-found .queue-character.right{transform:translate(10vw);opacity:1}.no-account-page{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:30px}.no-account-page .no-account-header{font-family:var(--klei);color:var(--secondaryColor);font-size:48px}.no-account-page .no-account-main .no-account-image-main{max-height:50vh;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:pointer;transition:all .2s ease}.no-account-page .no-account-main .no-account-image-main:hover{scale:1.05;animation:portalGlow 4s infinite ease-in-out}.profile-page-body{width:100%;height:80vh;display:flex;justify-content:center;align-items:center}.login-section{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:fit-content;width:25vw;overflow:none;padding:20px;margin-top:5vh;margin-right:2.5vw;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;background:var(--quarternaryColor)}.login-section .login-label{font-family:var(--secondaryFont);color:var(--secondaryColor);font-size:18px}.login-section .login-input{width:20vw;height:2.5vh;padding:10px 12px;border:2px solid var(--primaryColor);border-radius:6px;font-size:16px;font-family:var(--secondaryFont);text-align:center;outline:none;transition:border-color .2s ease}.login-section .login-input:focus{border-color:var(--tertiaryColor);box-shadow:0 0 5px var(--tertiaryColor)}.login-section .login-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:20px;padding:10px 40px;margin:20px;background-color:var(--tertiaryColor);cursor:pointer}.login-section .login-help-section{display:flex;justify-content:space-around;margin-top:10px;margin-bottom:10px;width:75%}.login-section .login-create{color:#000;font-family:var(--secondaryFont);cursor:pointer;transition:all .2s ease}.login-section .login-create:hover{color:var(--secondaryColor);transform:scale(1.01)}.create-account-section{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:fit-content;width:25vw;overflow:none;padding:10px;margin-top:5vh;margin-right:2.5vw;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;background:var(--quarternaryColor)}.create-account-section .create-account-label{font-family:var(--secondaryFont);color:var(--secondaryColor);font-size:24px}.create-account-section .create-account-input{width:75%;padding:10px 12px;border:2px solid var(--secondaryColor);border-radius:6px;font-size:16px;font-family:var(--secondaryFont);text-align:center;outline:none;transition:border-color .2s ease}.create-account-section .create-account-input:focus{border-color:var(--primaryColor);box-shadow:0 0 5px var(--primaryColor)}.create-account-section .create-account-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:20px;padding:10px 40px;margin:20px;background-color:var(--tertiaryColor);cursor:pointer}.create-account-section .create-account-login{color:#000;font-family:var(--secondaryFont);cursor:pointer;transition:all .2s ease}.create-account-section .create-account-login:hover{color:var(--secondaryColor);transform:scale(1.01)}.account-section{display:flex;flex-direction:column;gap:10px;height:100%;width:100%}.account-section .account-section-header{width:100%;height:20vh;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--klei)}.account-section .account-section-header .account-section-title{color:#fff;font-size:4vmax}.account-section .account-section-header .account-section-label{font-size:1.5vmax;margin-top:5px}.account-section .account-section-header .clickable{cursor:pointer;transition:all .2s ease}.account-section .account-section-header .clickable:hover{color:var(--secondaryColor);scale:1.05}.account-section .account-section-main{height:100%;width:100%;display:flex;justify-content:space-around;align-items:start;overflow-x:hidden}.account-section .account-section-main .account-stats-section{width:55vw;height:70vh;padding:20px;display:flex;justify-content:space-between}.account-section .account-section-main .account-stats-section .account-match-history{width:60%;height:100%;border:3px solid black;box-shadow:-2px 5px 10px #0000004d;border-radius:5px;background-color:var(--tertiaryColor);overflow-x:hidden;overflow-y:hidden}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-header{-webkit-user-select:none;user-select:none;font-family:var(--klei);color:var(--secondaryColor);font-size:64px;padding:10px 10px 0;width:100%;text-align:center;border-bottom:2px solid black}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-main{height:100%;overflow-y:auto;scrollbar-width:none}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-main .account-match-history-empty{width:100%;height:80%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-main .account-match-history-empty .account-match-history-empty-image{height:40vh;cursor:pointer;transition:all .2s ease}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-main .account-match-history-empty .account-match-history-empty-image:hover{scale:1.05;filter:drop-shadow(0 0 8px rgb(255,245,110))}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-main .account-match-history-empty .account-match-history-empty-label{font-family:var(--klei);font-size:36px;text-align:center}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item{height:85px;width:max(100%,500px);border-bottom:2px solid black;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item .account-match-history-players{width:100%;display:flex;justify-content:space-around}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item .account-match-history-players .account-match-history-player{width:100px;display:flex;flex-direction:column;align-items:center}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item .account-match-history-players .account-match-history-player .account-match-history-player-top{width:100%;display:flex;justify-content:center;align-items:center;gap:10px}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item .account-match-history-players .account-match-history-player .account-match-history-player-top .account-match-history-player-points{margin-top:10px;font-family:var(--klei);font-size:24px;font-weight:600;-webkit-user-select:none;user-select:none}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item .account-match-history-players .account-match-history-player .account-match-history-player-icon{-webkit-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none;width:48px}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-item .account-match-history-players .account-match-history-player .account-match-history-player-name{font-family:var(--secondaryFont);font-weight:500;-webkit-user-select:none;user-select:none}.account-section .account-section-main .account-stats-section .account-match-history .account-match-history-elo-update{color:#fff;font-family:var(--klei);font-size:40px;font-weight:700;-webkit-user-select:none;user-select:none;width:50px;height:50px;padding:10px;margin-right:10px;display:flex;justify-content:center;align-items:end;border-radius:100px}.account-section .account-section-main .account-stats-section .account-stats{width:35%;height:100%;border:3px solid black;box-shadow:2px 5px 10px #0000004d;border-radius:5px;background-color:var(--tertiaryColor);display:flex;flex-direction:column}.account-section .account-section-main .account-stats-section .account-stats .account-basic-stats{height:60vh;scrollbar-width:none;overflow:auto}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section{height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:20px;border-top:2px solid black;overflow:visible;scrollbar-width:none}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section .account-character-stats-empty{font-family:var(--klei);color:var(--secondaryColor);font-size:24px;text-align:center;text-wrap:balance;display:flex;flex-direction:column;justify-content:space-around;padding:30px}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section .account-character-stats-empty-image{width:70%;-webkit-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section .account-character-stats-header{color:var(--secondaryColor);font-family:var(--klei);font-size:3vmax;text-align:center;-webkit-user-select:none;user-select:none;margin-top:15px;width:100%;cursor:pointer;transition:all .2s ease}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section .account-character-stats-header:hover{color:#686868;scale:1.05}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section .account-character-stats-label{color:var(--primaryColor);font-family:var(--klei);font-size:18px;font-weight:800;-webkit-user-select:none;user-select:none}.account-section .account-section-main .account-stats-section .account-stats .account-character-stats-section .account-character-stats-main{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px}.account-section .account-section-main .account-stats-section .account-stats .account-basic-stats-header{color:var(--secondaryColor);font-family:var(--klei);font-size:3vmax;text-align:center;margin-top:15px;width:100%}.account-section .account-section-main .account-stats-section .account-stats .account-basic-stats-info{color:#000;font-family:var(--klei);font-size:24px;text-align:center;margin:10px}.account-section .account-section-main .account-stats-section .account-stats .account-favorite-character-item{display:flex;justify-content:center;align-items:center;gap:15px}.account-section .account-section-main .account-stats-section .account-stats .account-favorite-character-item .account-favorite-character-image{-webkit-user-drag:none;pointer-events:none;-webkit-user-select:none;user-select:none}.account-section .account-section-main .account-stats-section .account-stats .account-favorite-character-item .account-favorite-character-label{color:#000;-webkit-user-select:none;user-select:none;font-family:var(--secondaryFont)}.account-section .account-section-main .account-personal-section{width:30vw;height:70vh;padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.account-section .account-section-main .account-personal-section .account-secret-section{width:30vw;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-top:2px solid var(--secondaryColor)}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-header{font-family:var(--klei);color:var(--secondaryColor);font-size:4vmax;display:flex;justify-content:center;align-items:end;gap:2vmax;padding-bottom:1vmax}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-header .account-secret-image{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;height:12vh;transition:.2s all ease}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-header .account-secret-image:hover{transform:scale(1.1);filter:drop-shadow(0 0 4px rgb(255,255,255))}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-label{color:#e6e6e6;font-family:var(--secondaryFont);font-size:1.25vmax;margin-bottom:20px}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-field{border:2px solid black;background-color:var(--quarternaryColor);height:24px;padding:10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-field:hover{box-shadow:2px 5px 10px #0000004d;scale:1.01}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-field .account-secret-input{background:transparent;border:none;outline:none;cursor:pointer;font-size:1vmax;font-family:var(--secondaryFont);color:#fff}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-field .account-secret-input:focus{border:none}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-field .account-secret-field-button{color:#fff;background:transparent;border:none;cursor:pointer}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-field .account-secret-field-button:hover{color:var(--tertiaryColor)}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:1.25vmax;padding:2vh 2vw 2vh 2vw;width:fit-content;height:24px;color:var(--secondaryColor);background-color:var(--quarternaryColor);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s ease}.account-section .account-section-main .account-personal-section .account-secret-section .account-secret-button:hover{color:var(--quarternaryColor);background-color:var(--secondaryColor);border:2px solid var(--quarternaryColor)}.account-section .account-section-main .account-personal-section .account-logout-button{border:2px solid var(--secondaryColor);border-radius:6px;font-size:1.25vmax;padding:2vh 3vw;margin:20px;width:fit-content;color:var(--secondaryColor);background-color:var(--quarternaryColor);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s ease}.account-section .account-section-main .account-personal-section .account-logout-button:hover{color:var(--quarternaryColor);background-color:var(--secondaryColor);border:2px solid var(--quarternaryColor)}