.top {
    display: flex;
}

.intro {
    padding: 10vh 10vw 5vh 10vw;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* background-color: #51aafa; */
    /* background-image: linear-gradient(to bottom, #3f349a, #51aafa); */
    background-image: linear-gradient(to bottom, var(--bg), #51aafa);
    justify-content: center;
    padding-top: 85px;
}

.intro div {
    background-color: var(--brand);
    width: 75vw;
    padding: 5vh 2.5vw 5vh 2.5vw;
    border-radius: 20px;
}

.intro section p {
    font-size: 20px;
}

.schedule {
    width: 80vw;
}

.schedule p {
    font-size: 20px;
}

#week {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* background-color: aquamarine; */
    justify-content: center;
    width: 50vw;
}

.day {
    display: block;
    background-color: blanchedalmond;
    padding: 1vh 2vw 2vh 2vw;
    border-radius: 20px;
}

#gradient1 {
    background-image: linear-gradient(to bottom, #51aafa, var(--brand));
    height: 100px;
}

.roster {
    background-color: var(--brand);
    height: auto;
    padding-bottom: 20vh;
}

#roster_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.roster h2 {
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-left: 12.5vw;
    padding-top: 4vh;
    padding-bottom: 10vh;
}

.officers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* background-color: #1f1f1f; */
    width: 75%;
    justify-content: center;
}

.officers section {
    background-color: white;
    display: flex;
    flex-direction: column;
    margin: 0 0;
    /* border: 2px solid #000; */
    padding: 20px 20px;
    border-radius: 10px;
    transition: 0.5s;
}

.officers section:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.officers img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.officers h3 {
    /* background-color: #AEC3E3; */
    text-align: center;
    font-size: 20px;
    display: block;
}

.officers h4 {
    text-align: center;
    margin-block-start: 0em;
    margin-block-end: 0em;
    color: #3287d1;
    /* text-shadow: 
    -0.25px -0.25px 0 #3a7bb4,      
     0.25px -0.25px 0 #3a7bb4,  
    -0.25px  0.25px 0 #3a7bb4,  
     0.25px  0.25px 0 #3a7bb4;   */
}

.outlined-text {
  color: white; /* Set the text fill color */
  text-shadow: 
    -1px -1px 0 black,  /* Top-left shadow */
     1px -1px 0 black,  /* Top-right shadow */
    -1px  1px 0 black,  /* Bottom-left shadow */
     1px  1px 0 black;  /* Bottom-right shadow */
}