*, *:before, *:after { 
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }

html {
    height: 100%; /* make sure our HTML takes up 100% of browser */
    font-size: 100%;    
}

body {
    font-family: "Open Sans";
    color: white; /*sets text to white */
    min-height: 100%; /*says the height of body must be, at minimum, 100% of window */
}

.navbar {
    position: relative;
    /*padding: 3rem;  controls the height of nav bar, if no logo 3rem  */
     /* #1 */
    background-color: dimgrey;
     /* #2 */
    z-index: 1;
}

/* controls cube/<> on right hand corner for logos */
.navbar .fa-code {
    position: relative;
    left: 2rem;
    cursor: pointer; /*produces the finger-pointer icon when one hovers*/
    font-size: 5rem;
    font-weight: 500;
    color: rgba(101,18,95,0.5);
}

.navbar .links-container {
     display: table;
     position: absolute;
     top: 0;
     right: 0;
     height: 100px;
     color: white;
     /* #3 */
     text-decoration: none;
}

.links-container .navbar-link {
     display: table-cell;
     position: relative;
     height: 100%;
     padding-left: 1rem;
     padding-right: 1rem;
     /* #4 */
     vertical-align: middle;
     color: white;
     font-size: 0.625rem;
     letter-spacing: 0.05rem;
     font-weight: 700;
     text-transform: uppercase;
     /* #3 */
     text-decoration: none;
     cursor: pointer;
}
 
   /* #5 change color to purple when hovering text*/
.links-container .navbar-link:hover {
     color: rgb(233,50,117);
}

 
   /* assignment 9 active psuedo-class to change backgound to white and text to purple */
.links-container .navbar-link:active {
    background-color: white;
     text: rgb(233,50,117);

   
 .container {
     margin: 0 auto;
     max-width: 64rem;
 }
  
    
/* added by exercise 10 album view */
    
 .container.narrow {
     max-width: 56rem;
 }

    
    
/* Medium and small screens (640px) */
 @media (min-width: 40rem) {
   /* Style information will go here */
     html { font-size: 112%; }
 
     .column {
         float: left;
         padding-left: 1rem;
         padding-right: 1rem;
     }
     
     .column.full { width: 100%; }
     .column.two-thirds { width: 66.7%; }
     .column.half { width: 50%; }
     .column.third { width: 33.3%; }
     .column.fourth { width: 25%; }
     .column.flow-opposite { float: right; }  

}
 
 /* Large screens (1024px) */
 @media (min-width: 64rem) {
   /* Style information will go here */
     html { font-size: 120%; }
 }