@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

body {
    font-family: Arial, sans-serif;
    color: black;
    background-color: white;
}

header, footer {
    text-align: center;
    padding: 1em;
    background-color: black;
    color: white;
}


nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

nav ul {
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


nav ul li {
    flex: 0 0 33.333%; /* each li will take up 1/3 of the container's width */
    display: flex;
    justify-content: center; /* center li in the flex container */
    align-items: center;
    margin: 10px 0; /* add vertical margin */
}

nav ul li img {
    max-width: 80%; /* ensure the image is not larger than the container */
    height: auto; /* maintain aspect ratio */
    transition: transform 0.3s ease;
}
nav ul li img:hover {
    animation: shake 0.3s; /* Run for half a second */
    animation-iteration-count: infinite; /* Repeat the animation indefinitely */
}

/*newly added style*/
nav ul li p {
    font-size: 20pt;
}


ul li:nth-child(1), ul li:nth-child(2){
    flex: 0 0 50%;
    justify-content: center;   
}

/* Since you have 4 images and you want them in a specific pattern, 
   you can use the :nth-child selector to add specific styles to each one. */

nav ul li:nth-child(1), nav ul li:nth-child(4) {
    flex: 0 0 100%; /* these will take the full width of the container */
    justify-content: center; /* center the images */
}

nav ul li:nth-child(2), nav ul li:nth-child(3) {
    flex: 0 0 50%; /* these will take up half of the container's width */
}



nav ul li a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-block {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    justify-content: space-between; /* Puts maximum space between flex items */
}
  
.content-block img, .content-block p {
    max-width: 50%;
    flex: 1; /* Gives img and p an equal flex basis */
    margin-right: 10px; /* Add space between the img and the paragraph */
}
  
.content-block p {
    font-size: 20pt;
    margin-left: 10px; /* Add space between the paragraph and the img */
}

p{
    text-align: left;
    padding: 0 20px; /* This applies 20px padding to both left and right sides */
    margin: auto; /* This will work if the <p> is a block element */
    max-width: 800px; /* Adjust the max-width as needed for your design */
}

.chart-container {
    max-width: 800px; /* Your desired maximum width */
    margin: auto; /* This will center the chart if the container is less than 100% width */
}

#workMap {
    margin-top: 10px;
    margin:auto;
    height: 400px;
}

p{
    font-family: cursive;
}