@import "fonts/fonts.css";

body {margin:0; font-family: 'Rubik','Roboto',sans-serif;}
div {box-sizing: border-box;}
a {color: inherit; text-decoration: none;}

.text-center {text-align: center;}
.width-50 {width: 50%;}
.width-75 {width: 75%;}

.ui-logo {margin: 10px 0 15px 0;}
.ui-motd {margin: 0 auto 30px auto; width: 75%;}
.ui-title { font-size: 30px; font-weight: bold; margin-bottom: 20px;}
.ui-title-hint { font-weight: normal; color: #bababa; font-size: 10px;}
.ui-wrapper {width: 500px; margin: 0 auto; padding: 10px 0;/* background:rgba(0,0,0,0.05);*/ position: relative;}
.ui-button {display: inline-block; padding: 5px 20px; border: 2px solid #000; border-radius: 8px; }
.ui-button:hover {color:#fff;}
.ui-button.ui-button-blue {border-color: #f04000; color: #f04000;}
.ui-button.ui-button-blue:hover {background-color: #f04000; color:#fff;}
.ui-button.ui-button-discord {border-color: #f04000; color: #f04000;}
.ui-button.ui-button-discord:hover {background-color: #f04000; color:#fff;}
.ui-button.ui-button-green {border-color: #00be00; color: #00be00;}

.ui-grid-box {display: grid; grid-gap: 10px; margin: 20px 0;}
.ui-grid-box.ui-grid-box-gap-5 { grid-gap: 5px;}
.box-title {font-size: 12px; color: #bababa; font-style: italic; margin-bottom: -10px;}
.player-item {width:100%;     position: relative;padding: 10px 20px; background: #fff; box-shadow: 0 0 12px 4px rgba(0,0,0,0.05);
    height: 70px;    display: flex;
    align-items: center; border-radius: 5px;    border: 1px solid rgba(0,0,0,0.05);}
.player-avatar {    box-shadow: 0 0 12px 4px rgba(0,0,0,0.1);
    float: left;
    position: absolute;
    left: 10px;}
.player-name {display:inline-block; text-align: center; width: 100%;}
.player-rank {font-size: 12px; font-style: italic; color: #bababa;}
.player-live {
display: inline-block;
    background: #ff0000;
    border-radius: 100px;
    color: #fff;
    position: absolute;
    right: 20px;
    box-shadow: 0 0 12px 4px rgba(0,0,0,0.05);
    padding: 2px 8px;
    font-size: 12px;text-align: center;}

.player-lastjoin {
    display: inline-block;
    color: #bababa;
    position: absolute;
    right: 10px;
    padding: 2px 8px;
    font-size: 12px;text-align: center;}

.command-item {width: 100%; margin: 0 auto; text-align: center; font-size: 20px;padding: 10px 20px; background: #fff; box-shadow: 0 0 12px 4px rgba(0,0,0,0.02);     border: 1px solid rgba(0,0,0,0.05);border-radius: 5px;}


.ui-grid-box-links {grid-template-columns: 1fr 1fr;}
.ui-grid-box-links .width-75 {width: 100%;}

.stats-container {width: 100%; padding: 10px 20px;background: #fff; box-shadow: 0 0 12px 4px rgba(0,0,0,0.05);border-radius: 5px;    border: 1px solid rgba(0,0,0,0.05);}
.stats-table {width:100%; border-collapse: collapse;}
.stats-table tr {}
.stats-table tr td {border-bottom: 1px solid #e1e1e1;border-right: 1px solid #e1e1e1; padding: 5px 7px;}
.stats-table tr td:last-child {border-right: 0; }
.stats-table tr:last-child td {border-bottom: 0; }
.stats-table-name {}
.stats-table-name img {margin-right: 5px;}
.stats-table-stat {text-align: right; width: 35%;}
.stats-table-legend td {font-weight: 500;}


.steckbrief-title { text-align: center; font-weight: bold; font-size: 30px; margin: 10px 0 20px 0;}
.steckbrief-player {margin-bottom: 30px;}
.steckbrief-text-title {font-weight: 500; font-size: 20px; margin-bottom: 5px;}
.steckbrief-text {margin-bottom: 30px;}
.steckbrief-text a {color: #00be00; text-decoration: underline;}
.steckbrief-stats {}

@media (max-width: 500px) {
    .ui-wrapper {width: 100%; padding: 10px 20px;}
    .ui-grid-box-links {grid-template-columns: 1fr;}
    .ui-grid-box-links .width-75 {width: 75%;}
}