@font-face {
    font-family: 'Windows Command Prompt';
    src: url('./windows_command_prompt.ttf') format('truetype'); 
    font-family: 'Riffic';
    src: url('./riffic-bold.ttf') format('truetype');
}

body {
    background: darkslategray;
    font-family: 'Windows Command Prompt', 'Riffic';
    padding: 0px;
    margin: 0px;
}

#container {
    width: 80%;
    margin: 0px auto;
    height: 800px;
    background: rgb(36, 36, 36);
}

#topBanner {
    font-family: 'Windows Command Prompt', 'Riffic';
    font-size: 40px;
    color: cornflowerblue;
    text-shadow: 2px 1px 1px black;
    text-align: center;
    margin: 0px;
    margin-top: 50px;
    padding: 10px;
}

#dataSet {
    text-align: center;
    margin: 50px auto;
    width: 90%;
    height: 200px;
    padding: 0px;
    /*border-top: 3px solid gray;*/
    transform: rotate(180deg);                      /* rotate div/graph 180deg upside-down */
    transform: scaleY(-1);                          /* flips div/graph on Y-axis (mirror) */
}

.num {
    background-color: cornflowerblue;
    color: cornflowerblue;
	font-size: 1px;
    border: 1px solid white;
    border-left: none;
    border-top: 3px solid gray;
    width: 12px;
    height: 200px;
    display: inline-block;
    padding: 0px;
    margin: 0px auto;
    /*margin-right: -4px */             /* offset to right 4px, remove spacing between inline-blocks */
}

#arraySize {
    text-align: center;
    font-size: 20px;
    text-shadow: 2px 1px 1px black;
    width: 20%;
    margin: 20px auto;
    color: cornflowerblue;
    padding-bottom: 20px;
    border: 1px solid gray;
}

#sortButtons {
    text-align: center;
}

button {
    font-family: 'Windows Command Prompt', 'Riffic';
    font-size: 20px;
    color: rgb(36, 36, 36);
    background-color: cornflowerblue;
    margin: 20px;
    padding: 10px;
}

button:hover {
    color: cornflowerblue;
    background-color: rgb(36, 36, 36);
}