.nav {
    width: 85px; /* [Problem 1] Set the width of the nav class to 85px. */
}

.nav--button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* [Problem 2] Initialize flexbox vertically. Align the text and icons so that they are center aligned. */
}

.dashboard {
    padding: 20px; /* [Problem 3] Add some breathing room! The dashboard portion is a bit tight! (Hint: use padding!) */
}

.dashboard--title {
    display: flex;
    justify-content: space-between;
    align-items: center; /* [Problem 4] Use flex to add the correct spacing between the "Dashboard" text and the three dot button icon that you added previously. Align them to the center of each item. */
}

.dashboard--classes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* [Problem 5] Use flexbox to make the classes tabs wrap in a 3x2 setup. Use flexbox to create equal spacing between each box. */
}

.dashboard--classes__box {
    width: 31.5%; /* [Problem 6] Set the widths of each class tab to be 31.5% of the width; */
    margin-bottom: 35px; /* [Problem 7] Add 35px to the space under each box. (Choose carefully!) */
}

.dashboard--classes__box:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); /* [Problem 8] When the dashboard--classes__box class is hovered over, add a darker shadow around the edges of the class tab, just like the real bcourses interface. */
}

.dashboard--classes__box__image {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; /* [Problem 9] The class tab should have a border-radius of 5px along the top of the boxes. (Hint: Make sure you only add it to the top left and top right corners.) */
}

h2:hover, h3:hover, h4:hover {
    text-decoration: underline;
    cursor: pointer; /* [Problem 10] When h2, h3, and h4 are hovered over, add an underline and change the cursor to a pointer. Write the selectors and the styles! */
}

.notifications__notifs .notifications__notifs--box {
    display: flex;
    align-items: center; /* [Problem 11] Turn this element into a flex element and use the correct property to align the announcement icon and the text box. */
}