fisher.css

/* General body styling */
body {
    font-family: 'Avenir', Arial, sans-serif; /* Fallback font added */
    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) */
}

h2 {
    font-size: 2em;
    margin: 0;
    font-weight: 400;
}

.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;
    background-color: #f1f1f1; /* Light background for emphasis */
    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;
}

/* Navigation Buttons */
.navigation-buttons {
    text-align: center;
    margin: 30px 0; /* Adjust spacing around the button container */
}

.navigation-buttons button,
.navigation-buttons a button {
    background-color: transparent; /* Transparent background */
    color: #001f3f; /* Navy text */
    border: 2px solid #001f3f; /* Navy border with crisp lines */
    border-radius: 50%; /* Makes buttons circular */
    padding: 0; /* Remove default padding */
    width: 70px; /* Set width for circle */
    height: 70px; /* Set height for circle */
    font-size: 16px; /* Adjust font size */
    font-family: 'Avenir', Arial, sans-serif; /* Keep the Avenir font */
    cursor: pointer;
    text-align: center; /* Center the text horizontally */
    line-height: 70px; /* Perfectly vertically center the text */
    transition: all 0.3s ease; /* Smooth transition for hover */
    margin: 0 15px; /* Add horizontal spacing between buttons */
}

/* Hover state for buttons */
.navigation-buttons button:hover,
.navigation-buttons a button:hover {
    background-color: #1e90ff; /* Light blue background on hover */
    color: white; /* White text on hover */
    border-color: #1e90ff; /* Change border to match background */
}