/* PROBLEM 1: Remove white margin of body, html */
body,html{
    margin: 0;
    padding: 0;
}

/* PROBLEM 2: Select profile picture and make it round */
#profile-pic .img-scaled{
    border-radius: 50%;
}

/* PROBLEM 3: Flesh our your follow button! 5 px for the
top and bottom, 30 for the left and right*/
#follow-button{
    padding: 5px 30px;
}

/* PROBLEM 4: Turn items into a square, 120x120 px image */
/* PROBLEM 5: Create a 10 px horizontal space between items */
.item{
    width: 120px;
    height: 120px;
    margin: 3.5px;
    
}

/* PROBLEM 6: Create a 10px vertical space between rows */
.row{
    margin-bottom: 10px;

}

/* PROBLEM 7: Add 20px of space between each navigation item */
.navbar-item{
    margin-right: 20px;
}

/* PROBLEM 8: Create a hover effect, so that items will have
full opacity when hovered over! It should also have a
transition period of 0.2 seconds*/
a:hover{
    opacity: 1;
    transition: 0.2s;
}

/* PROBLEM 9: Add a click effect to the follow button, so
the font becomes size 18 px when clicked on - as a result, the button will become
larger when clicked on!*/
#follow-button:active{
    font-size: 18px;
}

/* PROBLEM 10: Add a hover effect such that the text of the
navigation has an opacity of 1 when hovered over!*/
.navbar-item:hover{
    opacity: 1;
}

/* PROBLEM 11: In one selection, make the follow button, picture
items, and nav bar items have a pointer cursor */
#follow-button, .item, .navbar-item{
    cursor: pointer;
}