:root {
    --white: #ffffff;
    --uw-purple: #4B2E83;
    --kojobs-gray: #505050; 
    --gold: #A49E87; 
    --light-gold: #B7A57A; 
}

#officers-23-24 {
    display: block;
}

#officers-22-23 {
    display: none;
}

/* to remove margin in corners of website */
body {
    margin:0px;
}

.add-space {
    margin-bottom: 54px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}  

.headings {
    font-family: 'Encode Sans', sans-serif;
}

.lknlink {
    color: var(--gold); 
}

main {
    padding: 42px 72px;
}

.officer {
    font-size: 20px;
    width: 33%; 
    margin-bottom: 32px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.officer-23-24 {
    font-size: 20px;
    width: 50%; 
    margin-bottom: 32px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.officer-representatives {
    font-size: 20px;
    width: 50%; 
    margin-bottom: 32px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.officer-teamlead {
    font-size: 20px;
    width: 100%; 
    margin-bottom: 32px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.officers-list {
    /* margin-left: 12%;  */
    margin-top: 36px; 
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.officer-text {
    padding: 0% 5%; 
}

.page-title {
    background-color: var(--kojobs-gray); 
    padding: 42px 72px; 
    font-size: 42px; 
}

.picture-container {
    width: 260px; /* Set the desired width */
    height: 300px; /* Set the desired height */
    overflow: hidden;
    margin-bottom: 10px;
}

.picture-container img {
    max-width: 100%;
    max-height: auto;
    object-fit: cover; /* Crop the image to cover the container */
    object-position: center center; /* Position the image at the center */
}

section {
    margin-bottom: 60px; 
}

.section-title {
    font-size: 32px;
    font-weight: bold; 
    text-align: center;
}

.white {
    color: var(--white); 
}

.year {
    text-align: center;
    color: var(--uw-purple);
}

.year-button {
    background-color: var(--uw-purple);
    color: var(--white);

}

.year-division {
    background-color: var(--light-gold);
    height: 2px;
}

@media (max-width: 820px) {
    .officer {
        font-size: 18px;
        width: 50%; 
        margin-bottom: 32px; 
    }

    .officer-representatives {
        font-size: 18px;
    }

    .officer-23-24 {
        font-size: 18px;
    }

    .officer-text {
        overflow-wrap:break-word;
    }

    .picture-container {
        width: 208px; /* Set the desired width */
        height: 240px; /* Set the desired height */
    }
}

@media (max-width: 580px) {
    .picture-container {
        width: 142px; /* Set the desired width */
        height: 165px; /* Set the desired height */
    }
}

@media (max-width: 400px) {
    .officer {
        font-size: 10px;
    }

    .officer-representatives {
        font-size: 10px;
    }

    .officer-teamlead {
        font-size: 10px;
    }

    .officer-23-24 {
        font-size: 10px;
    }

    .officer-text {
        padding: 0%;
    }

    main {
        padding: 28px 40px;
    }

    .page-title {
        padding: 28px 60px; 
        font-size: 32px; 
    }

    .section-title {
        text-align: center;
    }
    
}