:root {
    --bg-color: #33393B;
    --bg-dark-color: #232729;
    --text-color: #CCC;
    --success-color: #3EB93F;
    --error-color: #B93E3E;
    --dark-color: #1D2021;
    --link-color: #3E99B9;

    --background-stripe-width: 10px;
    --background-stripe-width-2: 20px;

    --selected-main-color: #106100;
    --selected-secondary-color: #0d3604;

    --downgradable-main-color: #630101;
    --downgradable-secondary-color: #250101;

    --targetable-main-color: #413700;
    --targetable-secondary-color: #201c03;

    --box-shadow: 1px 1px 8px #111;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color);
    text-decoration: underline;
}

ul,li {
    list-style-type: none;
    padding: 0;
}

ul.menu {
    box-shadow: var(--box-shadow);
    margin: 0.5rem 1rem;;
}
ul.menu.floating {
    position: absolute;
}

ul.menu.right.floating {
    right: 0;
}

ul.menu > li {
    padding: 0.5rem;
    white-space: nowrap;
}

ul.menu > .separator {
    padding: 0;
    height: 1rem;
}

body {
    font-family: "Tomorrow", sans-serif;
    font-size:1.2rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

body > .main-title {
    padding: 0 1rem;
    margin: 0rem;
}

body > .page-content {
    padding: 6rem 1rem 1rem 1rem;
    min-width: 900px;
    margin: 0 auto;
}

hr {
    color: var(--bg-dark-color);
    border: none;
    border-top: 2px solid var(--bg-dark-color);
    margin: 1rem 25%;
}

.right-aligned-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

table.full-width {
    width: 100%;
}

table {
    margin: 1rem;
    border-spacing: 0;
    font-size:0.9rem;
}

table td,
table th {
    padding: 0.35rem 0.5rem;
}

table > thead > tr > th {
    background: var(--bg-color);
    text-align: left;
}
table td.right-aligned,
table th.right-aligned {
    text-align: right;
}
table td.center-aligned,
table th.center-aligned {
    text-align: center;
}

table > tbody > tr:hover {
    background: var(--bg-color);
}

ul.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0;
}

body .m-1 {
    margin: 0.5rem;
}

body .m-2 {
    margin: 0.75rem;
}

body .m-3 {
    margin: 1rem;
}

body .m-4 {
    margin: 1.5rem;
}

body .mx-1 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

body .mx-2 {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

body .mx-3 {
    margin-right: 1rem;
    margin-left: 1rem;
}

body .mx-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

body .my-1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

body .my-2 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

body .my-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

body .my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
body .text-center {
    text-align: center;
}