* {
    margin: 0;
    padding: 0;
}

html, body {
    background-color: #312f3d;

    height: 100%;
    width: 100%;

    overflow: hidden;
}

#main-content {
    background-color: #312f3d;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    height: 100%;
    width: 100%;

    margin-top: 10px;

    position: relative;
}

#header {
    color: #dcdcdc;

    font-family: 'Syne Mono', monospace;
    font-size: 2em;
    font-weight: bold;
}

#content-container {
    background-color: #3b3849;

    border-color: #4a435a;
    border-style: solid;
    border-width: 1px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    height: 80%;
    width: 90%;

    position: relative;
}

#heading {
    background-color: #304257;
    color: #dcdcdc;

    border-bottom-style: solid;
    border-color: #4a435a;
    border-width: 1px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    font-family: 'Space-Mono', monospace;
    font-size: 1.25em;

    width: 100%;

    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

input {
    border-color: #d8d8d8;
    border-style: solid;
    border-width: 1px;

    font-family: 'Space-Mono', monospace;
    font-size: 1em;

    margin: 10px;

    text-align: center;

    width: 100px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    appearance: none;

    margin: 0; 

    -webkit-appearance: none;
    -moz-appearance: none;
}

#make-chart {
    background-color: #d8d8d8;

    border-style: solid;
    border-width: 1px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Space-Mono', monospace;
    font-size: 1em;

    height: 40px;

    margin-left: auto;
    padding: 20px;
}

#make-chart:hover {
    background-color: #aaaaaa;
}

#make-chart:active {
    background-color: #969696;
}

.chart-container {
    background-color: #3c3749;

    border-color: #dcdcdc;
    border-style: solid;
    border-width: 3px;

    height: 32.5%;
    width: 80%;

    margin: 25px;
    padding: 20px;
}

#slider-container {
    color: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Space-Mono', monospace;
    font-size: 1.5em;

    width: 100%;
}

#slider {
    cursor: pointer;

    width: 50%;
}