html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow-x: hidden; /* prevent screen overflow */
    font-family: "Avenir Next", "Avenir Next LT", "Avenir", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(14px, 1.2vw, 18px); /* scale text with viewport */
    background-color: #f6f7f9;
    line-height: 1.4;
}

.graph{
    display: flex;
    min-height: 500px;
    position: relative;
    margin-left: auto;
    margin-top: auto;
    flex-direction: column;
}

/* PAGE HEADER WITH TITLE */

.pageHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4em;
    width: 100%;
    background-color: #E6E7E8;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.headerImage {
    height: 2em;
    width: auto;
    position: absolute;
    left: 1em;
}

.headbarTitle {
    font-size: clamp(1em, 1.3em, 1.5em);
    margin: 0;
    text-align: center;
}

.headbarTitle a{
    
    color: black;
    text-decoration: none;

}
/* MAIN PAGE CONTENT */

.pageContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 4em);
}

/* Quick classes */

table {
    border: 1px solid black;
}

tr {
    height: 1em;
    width: auto;
}

td {
    height: 1em;
    width: auto;
}

td:nth-child(even){
    background-color: #D6EEEE;
}

.flexCol{
    display: flex;
    flex-direction: column;
}

.flexRow{
    display: flex;
    flex-direction: row;
}

@font-face{
    font-family: 'Avenir';
    src: url("../ASSETS/Avenir Regular.ttf") format('truetype'),
    url("../ASSETS/Avenir Regular.woff") format('woff'),
    url("../ASSETS/Avenir Regular.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}