/* Sets the background properties for the body of the website. */
body {
  background-repeat: no-repeat;               /* Prevents the background from checkering if the display is too big. */
  background-position: center center;         /* Positions the background image directly in the center (not at the upper-left corner by default). */
  background-size: cover;                     /* Scales the background image for scrolling. */
}

/* Formats the container that contains all of the elements on the screen. */
.container {
  align-items: center;                          /* Aligns the items in the center for smaller displays. */
  color: #FFF;                                /* Makes the text white. */
  font-family: 'Playfair Display', serif;       /* Sets the font of the text. */
  justify-content: center;                      /* Sets the font at the center of the screen. */
  margin-left: auto;                            /* Prevents skew to the left. */
  margin-right: auto;                           /* Prevents skew to the right. */
  max-width: 1200px;                            /* Sets a max width so that it doesn't stretch over large displays. */
  text-align: center;                           /* Aligns all the text within the container. */
  text-shadow: 2px 2px 8px #000;              /* Adds a shadow on the text for better contrast. */
  display: flex;                                /* Fixes the display format for mobile viewers with narrow displays. */
  flex-direction: column;                       /* Fixes the display format for mobile viewers with narrow displays. */
  align-items: center;                          /* Aligns the items in the center for smaller displays. */
  min-height: 100vh;                            /* Makes the height of the container fill the screen. */
}

/* Formats the buttons. */
.abstractButton, 
.collaboratorsButton, 
.publicationsButton, 
.talksButton, 
.visualizationsButton,
.imageSourcesButton {
	opacity: 0%;								              /* Sets the opacity to zero so that it can fade in through jQuery. */
	display: inline-block;						        /* Makes the buttons appear horizontally. */
	background-color: rgba(0, 0, 0, 0.5);	  /* Creates the faded background for the button. */
	height: 110px;								            /* Hardcodes the height of the button. */
	width: 250px;								              /* Hardcodes the width of the button. */
	font-size: 30px;							            /* Sets the font of the text. */
	margin: 10px;								              /* Pads the buttons. */
	transition: 0.3s;							            /* Adds a small animation when the button is hovered over. */
	cursor: pointer;							            /* Makes the cursor show that the button is clickable. */
}

/* Adds some additional attributes for the "image sources" button. */
.imageSourcesButton {
  font-family: 'Playfair Display', serif;       /* Sets the font of the text. */
  height: 40px;								                  /* Hardcodes the height of the button. */
	width: 300px;								                  /* Hardcodes the width of the button. */
  font-size: 1rem;                              /* Sets the font of the button. */
  color: white;                               /* Sets the font of the button. */
  border: none;                                 /* Removes the white border around the button. */
}

/* Adds the property for fading the buttons to a different color. */
.abstractButton:hover, 
.collaboratorsButton:hover, 
.publicationsButton:hover, 
.talksButton:hover, 
.visualizationsButton:hover,
.imageSourcesButton:hover {
	background-color: rgba(0, 0, 0, 0.9);	  /* Darkens the background color when the mouse is hovered over it. */
}

/* Removes the color if the link is visited to provide better contrast. */
a {
	color: white;		/* Removes the purple color for the href text. */
}

.content {
  max-height: 0;                            /* Hides the text when the dropdown is not clicked on. */
  overflow: hidden;                         /* Hides the text when the dropdown is not clicked on. */
  transition: max-height 0.3s ease-out;     /* Adds the transition effect. */
}

/* Author: Eric Nieters - niete018@d.umn.edu */