@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
    --bgcol: #f0eedc;
}



@font-face {
    font-family: NHaasGrotesk;
    src: url("fonts/NHaasGroteskTXPro-65Md.ttf");
}

html {
    background-color: var(--bgcol);
}


h1{
    color:black;
    font-family: "NHaasGrotesk", Arial, Helvetica, sans-serif;  
    text-align: left;
    font-weight: normal;
}


h2{
    color:black;
    font-family: "NHaasGrotesk", Arial, Helvetica, sans-serif;  
    text-align:left;
    font-weight: normal;
}

h3{

    color: black;
    font-family: "NHaasGrotesk", Arial, Helvetica, sans-serif;  
    text-align: left;
    font-weight: normal;
}

b {
    color: black;
    font-family: "NHaasGrotesk", sans-serif;
    text-align: left;}

p{
    color: black;
    font-family: "DM Mono", sans-serif;
    text-align: left;
    font-weight: normal;
}

header{
    margin-top: 20px;
    border-color: black;
    margin-bottom: 15px;
    border-bottom: solid 1px;
}

.container{
    display:grid;
    column-gap: 0px;
    row-gap: 10px;
    grid-template-columns:150px auto;
    margin-right: 40px;
    font-family: "NHaasGrotesk", Arial, Helvetica, sans-serif;  

    /* test the above in prod and delete if it makes things ugly
    update: looks good as hell but adjugting column-gap to 0px now that margin-right40px accounts for the two inbetween. can change as needed*/
}

th{
    align-items: left;
    text-align: left;
    font-weight: normal;    
}


.sidebar{
    align-content: left;
    font-weight: normal;
    text-align: center;
    grid-column-start: 1;
}