@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&display=swap');
body { font-family: 'Baloo 2', cursive; background: url(../images/background.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; }
.hero-category { margin-bottom: 10px; border-bottom: 1px solid #333; padding: 20px 20px; }
.hero-wrap { display: flex; align-items: center; margin: 10px; }
.hero-avatar { width: 64px; height: 64px; }
.hero-title { font-size: 32px; font-weight: 700; margin-left: 15px; color: white; }
.winrates-box { width: 80px; display: flex; flex-direction: column; }
.winrates-title { text-align: center; font-size: 10px; color: #eee; margin-top: 10px; }
.winrates-winrate { color: grey; text-align: center; }
.winrates-ratio { color: grey; font-size: 12px; text-align: center; }
.winrates-box { border-right: 1px solid rgb(51, 51, 51); border-bottom: 1px solid rgb(51, 51, 51); box-shadow: rgb(56, 56, 56) 0 0 5px; margin: 10px; }
.winrates-wrap { display: flex; flex-direction: row; flex-wrap: wrap; }

.page-center-center { display: flex; justify-content: center; align-items: center; height: 100vh; }
.search-submit { width: 100px; height: 64px; color: white; background: #222; line-height: 64px; text-align: center; }
.search-wrap { display: flex; align-items: center; }