/* Reset some default browser styling */
body, ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and Layout */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Top Navigation Menu Styling */
.top-nav {
    background-color: #e9e9e9;
    padding: 10px 20px;
    border-bottom: 2px solid #ccccff; /* Periwinkle bottom border */
}

.top-nav h2 {
    color:  #ccccff; /* Periwinkle bottom border */
    display: inline-block;
    margin: 0;
    margin-right: 20px;
}

.top-nav ul {
    list-style-type: none;
    display: inline-block;
}

.top-nav ul li {
    display: inline;
    margin-right: 20px;
}

.top-nav ul li a {
    text-decoration: none;
    color: #4b0082; /* Indigo color */
    font-weight: bold;
}

.top-nav ul li a:hover {
    color: #000080; /* Navy hover color */
}

/* Periwinkle Line Below Navigation */
.nav-line {
    border: none;
    border-top: 2px solid  #000080; 
    margin-top: 10px;
}

/* Main Content Styling */
.main-content {
    padding: 20px;
}

/* Section Styling */
section {
    margin-bottom: 40px;
}

/* Horizontal Line Styling */
hr {
   border: none;
   border-top: 2px solid #ccccff; /* Periwinkle line */
   margin: 20px 0;
}

h2 {
    color: #000080; 
}

/* Dashboard */
.dashboard {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.chart-container {
    margin: 20px 0;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

canvas {
    max-width: 80%;
    height: auto;
}

.rotated {
    transform: rotate(20deg); /* Rotate the element by 20 degrees */
    transition: transform 0.3s ease; /* Smooth transition for the rotation */
}

.chart-wrapper {
    display: flex;
    justify-content: space-between; /* Space between the chart and the image */
    align-items: center; /* Vertically align items in the center */
}

.chart-container {
    margin: 20px; /* Add some space around each container */
}

.rotated:hover {
    transform: rotate(0deg); /* Reset rotation on hover for a cool effect */
}
.chart-container.left {
    width: 45%;
    float: left;
    clear: left;
    margin-bottom: 30px;
}

.chart-container.right {
    width: 45%;
    float: right;
    clear: right;
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .chart-container {
        width: 100%;
        float: none;
        clear: both;
        margin-bottom: 20px;
    }
}

/* Column sizes */
.column-1 { width: 8.33%; }   /* 1/12 = 8.33% */
.column-2 {  width: 0 0 16.66%; }  /* 2/12 = 16.66% */
.column-3 {  width: 0 0 25%; }     /* 3/12 = 25% */
.column-4 {  width: 0 0 33.33%; }  /* 4/12 = 33.33% */
.column-5 {  width: 0 0 41.66%; }  /* 5/12 = 41.66% */
.column-6 {  width: 0 0 50%; }     /* 6/12 = 50% */
.column-7 { width: 0 0 58.33%; }  /* 7/12 = 58.33% */
.column-8 {  width: 0 0 66.66%; }  /* 8/12 = 66.66% */
.column-9 { width: 0 0 75%; }     /* 9/12 = 75% */
.column-10 { width: 0 0 83.33%; } /* 10/12 = 83.33% */
.column-11 { width: 0 0 91.66%; } /* 11/12 = 91.66% */
.column-12 { width: 0 0 100%; }   /* 12/12 = 100% */

/* Zigzag Layout for H3 and Image */
.zigzag-container {
    display: flex;
    align-items: center;
    margin: 20px 0;
    width: 100%;
}

.zigzag-container h3, .zigzag-container p {
    flex-basis: 60%;
    padding: 20px;
}

.zigzag-container img {
    flex-basis: 40%;
    max-width: 100%;
    height: auto;
}

/* Alternating layout styles */
.zigzag-odd {
    flex-direction: row;
}

.zigzag-even {
    flex-direction: row-reverse;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .zigzag-container {
        flex-direction: column;
    }

    .zigzag-container img, .zigzag-container h3, .zigzag-container p {
        flex-basis: 100%;
    }
}