.nav{
    /* [Problem 1] 
        FIXME: Set the width of the nav class to 85px. */
    width:85px;
}
.nav--button{
    /*  [Problem 2]
        FIXME: Initialize flexbox vertically. Align the text and icons so that they
        are center aligned. */
    display: flex;
    flex-direction: column;
    align-items: center;

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

.dashboard--title{
    /*  [Problem 4]
        FIXME: 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. */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

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

}
.dashboard--classes__box{
    /*  [Problem 6]
        FIXME: Set the widths of each class tab to be 31.5% of the width;

        [Problem 7]
        FIXME: Add 35px to the space under each box. (Choose carefully!) */
    width: 31.5%;
    margin-bottom: 35px;
}

.dashboard--classes__box:hover{
    /*  [Problem 8]
    FIXME: 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. Use this: 0 4px 10px rgba(0,0,0,0.35)

	Write your own class identifier. */
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}


.dashboard--classes__box__image{
    /*  [Problem 9]
        FIXME: 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. Simply put, the answer is NOT border-radius: 5px.) */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

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

    Write your own class identifier. */

.h2,.h3,.h4:hover{
    text-decoration: underline;
    cursor: pointer;
}


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