body{
    background-color: #f9c8ee;
}
h1{
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
}

h3{
    font-family: 'Trebuchet MS', sans-serif;
}
/*nav bar */
.stuff{
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #fa65c4;
      }
      
      li {
        float: left;
      }
      
      li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-family: 'Trebuchet MS', sans-serif;
      }
      
      li a:hover {
        background-color: #111;
      }
}


p{
    font-family: 'Trebuchet MS', sans-serif;
}

li{
    font-family: 'Trebuchet MS', sans-serif;
}

.diagram-container {
    display: flex;
    justify-content: center;
    gap: 40px; /* space between items */
    flex-wrap: wrap; /* optional: for smaller screens */
    margin-top: 2rem;
}

.diagram {
    text-align: center;
    font-family: 'Trebuchet MS', sans-serif;
}

.diagram h2 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #333;
}

.diagram img {
    max-width: 400px;
    height: auto;
    border: 2px solid #ccc;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.diagram img:hover {
    transform: scale(1.05);
}