.navbar {
  padding: 20px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 5px solid rgba(255, 0, 0, 0.5);
  border-color: black;
  width: 1455px;
}

.navbar a{
  color: black;
  font-family: futura, sans-serif;
  margin-right: 10px;
  font-size: 200%;

}

.hero {
  background-image: url("xaviers.jpg");
  padding: 150px;
  background-repeat: no-repeat;
  background-size: cover;

}

a:link {
  text-decoration: none;
}

body {
  background-color: white;
}

.Gallery1, .Gallery2, .Gallery3, .Gallery4, .Gallery5, .Gallery6, .Gallery7, .Gallery8, .Gallery9, .Gallery10, .Gallery11, .Gallery12, .Gallery13, .Gallery14, .Gallery15 {
    display: none;
}

.MiniPics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 70%;
  margin: auto;
}

.MiniPics div{
  width: 150px;
  height: 150px;
  background-position: center;
  background-size: cover;
  margin: 10px;
}

.Gallery-active {
  width: 1495px;
  height: 900px;
  margin: auto;
  margin-top: 5px;
  background-position: center;
  background-size: cover;
  display: block;
}

.Gallery1, .Mini1 {
  background-image: url("jean_grey.jpg");
}

.Gallery2, .Mini2 {
  background-image: url("havok.jpg");
}

.Gallery3, .Mini3 {
  background-image: url("polaris.jpg");
}

.Gallery4, .Mini4 {
  background-image: url("wolverine.jpg");
}

.Gallery5, .Mini5 {
  background-image: url("madrox.jpg");
}

.Gallery6, .Mini6 {
  background-image: url("brotherhood.jpg");
}

.Gallery7, .Mini7 {
  background-image: url("sentinel.jpg");
}

.Gallery8, .Mini8 {
  background-image: url("marauders.jpg");
}

.Gallery9, .Mini9 {
  background-image: url("u-men.png");
}

.Gallery10, .Mini10 {
  background-image: url("purifiers.jpg");
}

.Gallery11, .Mini11 {
  background-image: url("uncanny.jpg");
}

.Gallery12, .Mini12 {
  background-image: url("new_mutants.jpg");
}

.Gallery13, .Mini13 {
  background-image: url("x-factor.jpg");
}

.Gallery14, .Mini14 {
  background-image: url("x_force.jpeg");
}

.Gallery15, .Mini15 {
  background-image: url("avengers.jpg");
}

img, .imageBorder {
  border: 5px solid rgba(255, 0, 0, 0.5);
  border-color: black;
}

.characterName {
  float: left;
  color: black;
  padding: 10px 20px 30px 20px;
  background-color: white;
  font-weight: bold;
  font-family: sans-serif;
  display: none;
  border: 5px solid rgba(255, 0, 0, 0.5);
  border-color: black;
  margin: 10px 10px;
}

.characterName h2{
  font-size: 32px;
  text-align: left;
  padding: 5px;
  margin-top: 10px;
}

.characterName p{
  font-size: 20px;
  /*width: 80%;*/
  margin: auto;
  text-align: left;
}

.characterBio {
  float: right;
  color: black;
  padding: 10px 20px 30px 20px;
  background-color: white;
  font-weight: bold;
  font-family: sans-serif;
  display: none;
  border: 5px solid rgba(255, 0, 0, 0.5);
  border-color: black;
  margin: 10px 10px;
}

.characterBio h2{
  font-size: 32px;
  text-align: left;
  padding: 5px;
  margin-top: 10px;
}

.characterBio p{
  font-size: 20px;
  /*width: 70%;*/
  margin: auto;
  text-align: left;
}

.homeNav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.navItem {
  background-color: blue;
  padding: 50%;
  background-position: center;
  background-size: cover;
  border: 5px solid rgba(0, 0, 0, .9);
}

.x-menLogo img{
  width: 600px;
  border: none;
  margin-bottom: 100px;
}