public/css/style.css

body {
    font-family: 'Noto Serif SC', serif, 'Anonymous Pro', monospace;
    background-color: floralwhite;
}

h1,
h2,
h3,
h4 {
    font-weight: bold;
}

@media screen {
    body {
        padding: 20px 5px 5px 5px;
    }
}


@media screen and (min-width:699px) {
    body {
        padding: 20px 75px 40px 75px;
    }

    #fileOutput {
        margin-right: 50px;
    }

    .table {
        margin-left: 60px;
    }
}

@media screen and (min-width:1200px) {
    body {
        padding: 20px 150px 40px 150px;
    }

    #fileOutput {
        margin-right: 200px;
    }

    .table {
        margin-left: 100px;
    }
}

.table {
    font-size: 14px;
}

.chart {
    width: auto;
    height: 400px;
}

.blurred {
    transition-duration: 100ms;
    filter: blur(2px);
}

.blurred:hover {
    filter: none;
}

.btn:focus:active,.btn:focus {
    outline: 0;
}

.btn-info:focus,
.btn-info:focus-visible,
.btn-info:active:focus {
    outline: 5px dashed rgba(95, 177, 221, 0.5);
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active:focus {
    outline: 5px dashed rgba(46, 109, 164, 0.5);
}

.btn-warning:focus,
.btn-warning:focus-visible,
.btn-warning:active:focus {
    outline: 5px dashed rgba(200, 157, 39, 0.5);
}

.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active:focus {
    outline: 5px dashed rgba(234, 71, 71, 0.5);
}

.btn-info:hover,
.btn-info:active {
    outline: 10px double rgba(95, 177, 221, 0.5);
}

.btn-primary:hover,
.btn-primary:active {
    outline: 10px double rgba(46, 109, 164, 0.5);
}

.btn-warning:hover,
.btn-warning:active {
    outline: 10px double rgba(200, 157, 39, 0.5);
}

.btn-danger:hover,
.btn-danger:active {
    outline: 10px double rgba(234, 71, 71, 0.5);
}

.btn {
    transition-duration: 100ms;
}