.welcome{
    text-align: center;
    background-color: rgba(255, 255, 255, 0.44);
    backdrop-filter: blur(1vw);
    padding: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
}

.mission-vision{
    display: flex;
    flex-direction: row;
    gap: 2vw;
    padding: 2vw 3vw;
    margin-bottom: 3vw;
}

.mission{
    flex: 1;
    background-color: rgba(255, 255, 255, 0.44);
    backdrop-filter: blur(1vw);
    padding: 1vw;
}

.announcements{
    text-align: justify;
    background-color: rgba(83, 81, 81, 0.17);
    backdrop-filter: blur(1vw);
    padding: 3vw;
    margin: 2vw 5vw;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.announcements-box{
    text-align: justify;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1vw);
    padding: 3vw;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.announcements-entry{
    background-color: rgba(255, 255, 255, 0.44);
    backdrop-filter: blur(1vw);
    height: 9vw;
}

@media (max-width: 768px) {
    .mission-vision{
        flex-direction: column;
        gap: 5vw;
    }
  .announcements-entry h2{
        font-size: 3vw;
        padding-left: 5vw;
    }
    .announcements-entry{
        padding: 0vw 1vw 2vw 1vw;
        height: auto;
        background: none;
    }

    .announcements-entry p{
        font-size: 2vw;
        color: black;
    }
}

@media (min-width: 768px) {
    .announcements-entry h2{
        font-size: 2vw;
        padding-left: 2vw;
    }
    .announcements-entry{
        padding: 0vw 0vw 2vw 25vw;
        background-image: url(/photos/announcement-1-bg.png);
    }
    .announcements-entry p{
        font-size: 1vw;
    }
}