:root {
    --bg:  #101112;
    --bg_lighter: #16171a; 
    --blue: #3dade9;
    --fg: #FFFFFF;
    --fg_darker :#707070;
    --main_color1: #78cbef;
    --main_color2: #3cbbf2;

    --fullwidth: 100%;
    --grid_count:40;
  }
.wrapper {
    display: grid;  
    grid-template-columns: repeat(var(--grid_count), 1fr);
    margin: 20px;
    min-height: 100%;
    height: auto !important;
    /*height:100%;
    /*width: 100%;*/
    gap:4px;
    grid-auto-rows: minmax(min-height, max-content);

  }

hr{
    color:var(--blue)
}
h1{
    padding-left: 10px;
}
html{
    font-family: system-ui, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--fg);
    background-color:var(--bg);
    margin:0px;
    padding: 0px;
    height: 95%;
    width: 100%;
}

body{
    margin:0px;
    padding: 0px;
    min-height: 100%;
    height:100%;
    width: 100%;
}

.header{
    grid-column: 1/calc(var(--grid_count) + 1);
    grid-row: 1;
    color: var(--fg);
    background-color:var(--bg_lighter);
    display: flex;
    flex-direction: row-reverse;
}
.main{
    grid-column: 1/calc(var(--grid_count) + 1);
    grid-row: 2/var(--grid_count);
    color: var(--fg);
    background-color: var(--bg);
    width: 100%;
}

/* .footer,  .push{ */
    /* grid-column:1/calc(var(--grid_count) + 1); */
    /* grid-row: var(--grid_count); */
    /* color: var(--fg_darker); */
    /* background-color:var(--bg_lighter); */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* text-align: center; */
    /* font-weight: bold; */
/* } */

.header_button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    float:left;
    width: auto;
    color: var(--fg_darker);
    padding-right: 15px;
    padding-left: 15px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.header_button_active{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    float:left;
    width: auto;
    color: #000;
    background-color: var(--main_color2);
    padding-right: 15px;
    padding-left: 15px;
    font-size: 16px;
    font-weight: bold;    text-decoration: none;
}
.header_button:hover{
    background-color: #000;
}