.brackets-viewer, * {
    /* Colors */
    --primary-background: #111310;
    --secondary-background: #303030;
    --match-background: var(--primary-background);
    --font-color: #d8e8ef;
    --win-color: #50b649;
    --loss-color: #de2c26;
    --label-color: grey;
    --hint-color: #a7a7a7;
    --connector-color: #DDDDDD;
    --border-color: #DDAB54;
    --border-hover-color: #b6b5b5;
  
    /* Sizes */
    --text-size: 12px;
    --round-margin: 40px;
    --match-width: 200px;
    --match-horizontal-padding: 8px;
    --match-vertical-padding: 6px;
    --connector-border-width: 2px;
    --match-border-width: 1px;
    --match-border-radius: 0.3em;
}

body {
    font-size: var(--text-size);
    color: var(--font-color);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

@font-face {
    font-family: hyliaserif;
    src: url("hyliaserif.otf") format("opentype");
}

*::-webkit-scrollbar {
    display: none;
}

table {
    width: 80%;
    margin: 40px auto;
    border-radius: var(--match-border-radius);
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px  var(--label-color);
}

th, td {
    border: 1px solid var(--label-color);
    padding: var(--match-vertical-padding) var(--match-horizontal-padding);
}

nav {
    text-align: center;
    display: block;
}

a {
    color: var(--border-color);
}

.selected {
    color: var(--loss-color) !important;
}

nav a {
    display: inline;
    margin: 10px;
    color: var(--loss-color) !important;
    font-family: hyliaserif !important;
    font-size: 2.5em !important;
    font-weight: normal;
}

.active {
    color: #DDAB54 !important;
}

html {
    background-color: #111310;
}

body {
    padding: 50px;
}

.logo {
    display: block;
    margin: 0 auto;
    width: 30%;
    min-width: 300px;
}

h1 {
    color: var(--loss-color) !important;
    font-family: hyliaserif !important;
    font-size: 3em !important;
    font-weight: normal;
}

.brackets-viewer .participant .name {
    width: 70% !important;
}

.result {
    width: 30% !important;
}

.column {
    float: left;
    width: 50%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.hint {
    color: var(--hint-color);
}