@font-face {
    font-family: "DejaVu Sans Mono";
    src: url(fonts/DejaVu\ Sans\ Mono/DejaVuSansMono.ttf);

}

body {
    font-size: 2em;
    font-family: "DejaVu Sans Mono", monospace;
    color: #ffffff;
    background-color: #136b78;
    margin: 0;
    --bar-color: darkslategray;
    --sorted-color: limegreen;
    --selected-color: orange;
}

h1 {
    text-align: center;
}

div#graphs {
    display: flex;
    flex-wrap: wrap;
    width: 95vw;
    height: fit-content;
    padding: 0 2.5vw 2.5vw 2.5vw; /* handles spacing on all sides of the graphs except the top */
    justify-content: space-around;
}

div.graph-container {
    background-color: var(--bg-dark);
    width: 29%; /* default is 3 graphs per row */
    margin-top: 1.5vw; /* handles the top spacing on the graphs, seperate so that there is vertical spacing in flex */
    padding: 1.5vw;
    border-radius: 1vw;
}

p.graph-title {
    text-align: center;
    font-size: 0.5em;
    margin: 0;
}

div.controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.5vw;
}

div.controls > input[type="range"] {
    width: 60%;
}

div.controls > button {
    width: 15%;
}

div.graph {
    display: flex;
    flex-direction: row;
    background-color: gray;
    aspect-ratio: 1 / 1;
    width: 100%;
}

div.bar {
    margin-top: auto;
    background-color: var(--bar-color);
}

div.bar.sorted {
    background-color: var(--sorted-color);
}

div.bar.selected {
    background-color: var(--selected-color);
}

/* mid-small screens will have 2 graphs per row */
@media (max-width: 1200px) {
    div.graph-container {
        width: 45%;
    }
}

/* small screens will have 1 graph per row */
@media (max-width: 600px) {
    div.graph-container {
        width: 90%;
    }
}