:root {
    --primary-color: #0e0e10;
    --primary-lighter: #18181b;
    --primary-light: #1f1f23;
    --secondary-hover: #38383f;
    --secondary-color: #ff9b42;
    --text-color: #adadb8;
    --h-color: #dedee3;
    --text-in-secondary: #ffffff;
    --addition-red: #eb0400;
    --addition-blue: #2171fa;
    --addition-green: #3fa34d;
    --login-button: #a970ff;
}

header {
    background-color: var(--primary-lighter);
    margin-bottom: 15px;
}

header nav div {
    width: 50%;
}

body {
    font-family: "Roboto", sans-serif;
    color: var(--text-color);
    text-align: center;
    background-color: var(--primary-color);
    margin: 0px;
}

.header_nav {
    display: flex;
    align-items: center;
    padding: 8px;
}

.header_nav p {
    margin: 0;
}

.header_logo {
    max-height: 32px;
    height: 32px;
    float: left;
}

.header_user {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
}

.profile_picture_header {
    width: 32px;
}

.burger_menu {
    display: none;
    background-color: var(--primary-light);
    width: 250px;
    position: absolute;
    right: 0;
}

.burger_menu ul {
    list-style: none;
    padding: 0px;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}

.burger_menu_li {
    padding-top: 3px;
    padding-bottom: 3px;
    height: 25px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.burger_menu_li:hover {
    background-color: var(--secondary-hover);
}

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

.burger_menu_icon {
    width: 20px;
    padding-right: 5px;
}

.overview_container {
    display: flex;
    justify-content: space-evenly;
}

.user_overview {
    display: flex;
    justify-content: space-evenly;
    max-height: 400px;
    overflow: hidden;
}

.overview_container > * {
    flex: 1;
}

.kingdom {
    display: flex;
    background-color: var(--addition-green);
}

.kingdom_streamer {
    flex: 1;
}

.kingdom_stats {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.kingdom_resources {
    display: flex;
    justify-content: space-evenly;
}

.kingdom_resource {
    flex: 1;
}

.kingdom_modifiers {
    display: flex;
    justify-content: space-evenly;
}

.kingdom_modifier {
    display: flex;
}

.home_box {
    width: 40%;
    background-color: var(--primary-lighter);
    border-radius: 20px;
    padding: 25px;
}

.table_cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table_text {
    margin: 0;
}

.height_350 {
    max-height: 350px;
}

.log_container {
    overflow-y: scroll;
}

.tab {
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--primary-lighter);
    padding: 20px;
    flex: 1;
}

.rounded_img {
    border-radius: 9000px;
}

#tab_container {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

#twitch_login {
    color: var(--text-in-secondary);
    background-color: var(--secondary-color);
    padding: 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 5em;
}

#home_box_container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    flex-flow: wrap;
}

#home_login {
    margin-top: 4%;
    margin-bottom: 4%;
}