/*
body {

  background-image: url("img/mymarsbackground.png");
  background-color: #cccccc;
  background-repeat: no-repeat;
  height: 1500px;
  background-position: center;
  background-repeat: no-repeat; */

}
.neobio {
  text-align: left;
  font-size: 2em;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   color: black;
   text-align: center;
   opacity: 0.5;
}
.container {
  height: auto
  position: relative;
  overflow: auto;
  width: auto;
/*  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.navbar {
  background-color: #f9f9f9;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 11;
}
.topmargin {
  margin-top: 50px; /* Add a top margin to avoid content overlay */
}
.dropdown {
  position: inline-block;
  display: inline-block;
  padding: 2px 10px 2px 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.clip {
  max-width: 100%;

}
/*END MENU*/
.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  width: 500px;
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
}

/*END GALLERY*/

.logo {
  width: 100%;
  height: 220px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.banner {
  width: 100%;
  height: 25px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.definition {

  display: inline-block;
  margin-left: auto;
  margin-right: auto;

}
.logoimg {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.wrapper {
  width: 100%;
  height: 550px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.wrapper2 {
  top: 760px;
  height: 900px;
  max-height: 900px;
  width: 700px;
  max-width: 700px;
  display: grid;
  grid-template-columns:  50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
  grid-template-rows: 170px 70px 70px 70px 120px 100px 100px 100px 100px;
  grid-template-areas:
    'brain brain brain brain brain brain brain brain brain brain brain brain brain brain'
    'brain brain brain brain brain brain brain brain brain brain brain brain brain brain'
    'brain brain brain brain brain brain brain brain brain brain brain brain brain brain'
    'eyes lefteye lefteye eyes righteye righteye eyes eyes lefteye lefteye eyes righteye righteye eyes'
    'eyes lefteye lefteye eyes righteye righteye eyes eyes lefteye lefteye eyes righteye righteye eyes'
    'eyes lefteye lefteye eyes righteye righteye eyes eyes lefteye lefteye eyes righteye righteye eyes'
    'mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth'
    'mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth'
    'mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth'
    'mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth';
}
.wrapper2 .skull .brain .eyes .lefteye .righteye .mouth {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.skull .brain .eyes .lefteye .righteye .mouth{
  position: relative;
  justify-content: center;
  align-items: center;
}
.skull {
  z-index: 6;
  grid-column: 1/8;
  grid-row: 1/9;
}
.brain {
  z-index: 3;
  grid-column: 2/14;
  grid-row: 1/4;
  clip-path: polygon(50% 0, 100% 55%, 100% 100%, 0 100%, 0 55%);
}
.lefteye {
  z-index: 4;
  grid-column: 2/3;
  grid-row: 3/6;
}
.righteye {
  z-index: 4;
  grid-column: 9/13;
  grid-row: 3/6;
}
.nose {
  z-index: 3;
  grid-column: 6/10;
  grid-row: 4/7;
  clip-path: polygon(50% 0%, 100% 0, 90% 100%, 10% 100%, 0 0);
}
.mouth {
  z-index: 2;
  grid-column: 2/14;
  grid-row: 5/10;
  clip-path: polygon(50% 20%, 100% 0, 80% 100%, 20% 100%, 0 0);
}