fisher.css

/* General body styling */
body {
    font-family: 'Avenir', sans-serif;
    color: rgba(0, 31, 63, 0.85);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    font-size: 17px;
}
p {
    margin: 0 0 15px 0; /* Controls spacing between paragraphs */
    padding: 0; /* Removes padding inside the paragraph */
    line-height: 1.8; /* Controls the vertical spacing between lines of text */
    font-size: 17px; /* Font size for paragraph text */
    color: rgba(0, 31, 63, 0.85); /* Text color */
}

header {
    text-align: center;
    padding: 40px 20px 20px 20px; /* Controls the spacing inside the header */
    color: #001f3f; /* Header text color */
    background-color: transparent; /* Header background color */
}

h1 {
    font-size: 2.5em; /* Header font size */
    margin: 0; /* Controls spacing outside the header */
    font-weight: 400; /* Header font weight (thickness) */
}

.subtitle {
    font-size: 1.3em;
    color: rgba(0, 31, 63, 0.85);
    margin-bottom: 20px;
}

/* Content Wrapper for Text */
.content-wrapper {
    max-width: 900px; /* Keep text centered with 900px width */
    margin: 0 auto;
    padding: 20px;
    text-align: justify;
}

/* Blockquote Styling */
blockquote {
    font-size: 1.1em;
    font-style: italic;
    margin: 20px auto;
    padding: 10px 20px;
    border-left: 4px solid #001f3f;
    color: rgba(0, 31, 63, 0.85);
}

/* Visualization Container */
.visualization-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px; /* Space between sliders and the chart */
    width: 100%; /* Expand container to full width of the page */
    margin: 30px auto;
    padding: 0;
}

/* Chart Styling */
.chart-container {
    flex: 3; /* Allow the chart to occupy most of the space */
    width: 100%;
    max-width: 1500px; /* Expand horizontally for wide layout */
    height: auto;
    overflow: hidden; /* Prevent scrollbars within the chart */
}

.chart {
    width: 100%;
    height: 400px; /* Reduce the height of the bar chart */
}

/* Slider Styling */
.slider-container {
    flex: 1; /* Smaller space for sliders */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Adjust spacing between sliders */
    font-size: 0.9em;
    align-items: flex-start; /* Align sliders to the left */
}

.slider-container label {
    font-size: 0.9em; /* Smaller font for slider labels */
    margin-right: 10px;
}

.slider-container input[type="range"] {
    width: 100%; /* Adjust slider width */
    margin: 5px 0;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 20px;
    background-color: #f1f1f1;
    color: rgba(0, 31, 63, 0.8);
    font-size: 0.9em;
}

footer p {
    margin: 0;
}