video {
  max-width: 100%;
}


/*Some notes on the code:
•	You can change the colours to any colour you would like, provided CSS recognizes the colour code you or name you use
•	If you make any changes to this code, make sure to detail what the code pieces are doing by leaving a note (which needs to be sandwiched between /* text goes here */, otherwise CSS thinks you're typing code.  Example, if PIs select colour schemes etc;
*/

/* to change the colour of the link text on the page, and remove the underlines in the navigation bar when you hover */

a:link {
 color: black !important;
font-size: 18px;
text-decoration: none;
}

a:visited {
color: #000000 
font-family: "Arial, Helvetica, sans-serif"
text-decoration: none;
}

/* to create hoverable navigation bar and align the navigation bar at the bottom of the header image.  Note, you may have to mess with the "top" value if you change the background image  */

ul.navigation {
   list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: black !important;
  font-weight: bold;
position: relative;
top: 198px;
background-color: black;
text-decoration: none;
}

li {
  float: left;
}

li a {
  display: block;
  color: white !important;
  text-align: center;
  padding: 5px 8px;
  text-decoration: none;
opacity: 100% !important;
}

/* Change the link color to different colour on hover */
li a:hover {
  background-color: rgb(128,0,0); /*this is the hover colour*/
  color: #F5F5F5 !important; /* this is the text colour*/
opacity: 100% !important;
 text-decoration: none;
}

/* To add the header image*/
header {
 background-image: url("https://docs.google.com/drawings/d/e/2PACX-1vTRqfCutC_Q0ezfjxEvbHNcW2pF5RfN53ylhRQ6ntTg5FG5zftvANTDRa1fQcKNR9DC_8hKmKpsTfeA/pub?w=965&h=414");
  height: 315px;
  width: 100%;
 }

/*This piece of code makes a larger title which sits on top of the header image.  We decided we didn't want this title to show, since we were going to add it in the HTML section of the page.  I have set the opacity to 0%, so that we can't see the title, but can always add it back in if we want later.*/

.site-title {
    font-size: 50px !important;
    text-transform: uppercase;
    letter-spacing: .125em;
    margin: 40px 0 0;
    display: block;
    text-align: center;
    position: relative;
    bottom: -100px;
    color: #F5F5F5 !important;
    font-weight: bold;
    opacity: 0;
  }

/* to set up columns */

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}



.column img { 
  height: 300px;
  display: block;
}

/*to make hoverable links*/

h2 {
text-align: center;
color: black;
}

h2 a:link {
text-align: center;
float: center;
border: none;
font-size: 27px;
}

/*to fix issues with truncated footer*/

.browse .resource h4 a  {
color: black !important
}

.browse .resource h4 a:hover {
  background-color: rgb(128,0,0); /*this is the hover colour*/
  color: #F5F5F5 !important; /* this is the text colour*/
opacity: 100% !important;
 text-decoration: none;
}

/*to make columns in grid layout responsive*/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
   }