* {
box-sizing: border-box;
}
.base-block {
padding: 15px;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 5px #aaa;
display: flex;
flex-direction: column;
}
.main-block {
margin-bottom: 15px;
text-align: center;
align-items: center;
}
.flex-block {
flex-direction: row;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.welcome-title {
font-weight: 600;
font-size: 32px;
display: inline-flex;
align-items: center;
gap: .6rem;
}
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 15px;
}
.sidebar-container {
width: 33.33%;
}
.statistics-block {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
gap: 10px;
align-items:center;
}
.statistics-block * {
width: 100%;
}
.statistics-block img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: left;
}
.statistics-block .right {
text-align: end;
}
.base-block .button {
padding: 4px 14px;
background-color: var(--twitch-purple);
transition: .2s;
border-radius: 2px;
text-align: center!important;
color: #fff;
}
.base-block .button:hover {
background-color: var(--twitch-purple-2);
text-decoration: none;
}
.base-block h2 {
border: 0;
padding: 0;
margin: 0;
font-size: 1.5em;
border-left: 8px solid var(--twitch-purple);
padding-left: 5px;
font-weight: 600;
}
.base-block h2 span {
font-family: sans-serif;
}
.main-container {
flex: 1 1 0;
}