style.css

/* START: Top navigation bar*/
.header {
  overflow: hidden;
  padding: 10px 8px;
}

/* upper bar 2 upper right images  */
.grid {
  height: 25px;
  width: auto;
}
.gaby {
  height: 28px;
  width: auto;
  border-radius: 50%;
}

/* Top navigation hover text */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Hover background color for header */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Top navigation bar right two buttons, grid, and picture */
.header-right {
  float: right;
}

/* media querie header - when the screen is 370px wide or less, stack the links on top of each other */
@media screen and (max-width: 370px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
/* END: Top navigation  */

/* START: center div that holds everything  */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Top: search box with magniying glass, input, and microphone */
.center-top {
  width: 560px;
  height: 40px;
  text-align: center;
  border: 1px solid;
  border-radius: 90px;
  border-color: #c6c6c6;
}
.center-top:hover {
  box-shadow: 0 1px 6px #dfe1e5;
}

.icon {
  color: #5f6368;
}

.input2{
  border: none;
  outline: none;
  height: 35px;
  width: 470px;
  font-size: 16px;
  background: url("https://www.google.com/cse/static/images/1x/en/branding.png") left center no-repeat rgb(255, 255, 255);

}
.input2:focus{
  background:white;
  outline: none;
}
/* Icons are only decorative */
.icons {
  color: #5f6368;
}
/* google image*/
.logo {
  padding: 20px;
}
.center-bottom {
  display: block;
  text-align: center;
  padding-top: 18px;
}
.button {
  background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  color: #5f6368;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.button:hover {
  border: 1px solid #c6c6c6;
  box-shadow: 0 1px 1px #dfe1e5;
}

/* END: center  */

/* START: Footer bar all  */
.footer {
  overflow: hidden;
  background-color: #f2f2f2;
  padding: 10px 8px;
  bottom: 0;
  position: fixed;
  border-top: 1px solid #e4e4e4;
  line-height: 40px;
  width: 100%;
}
/* Footer hover text */
.footer a {
  float: left;
  color: black;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Hover background color for footer */
.footer a:hover {
  background-color: #ddd;
  color: black;
}

/* Footer right 3 buttons */
.footer-right {
  float: right;
  padding-right: 20px;
}

/* media querie footer - when the screen is 565px wide or less, stack the links on top of each other */
@media screen and (max-width: 565px) {
  .footer a {
    float: none;
    display: block;
    text-align: left;
  }
  .footer-right {
    float: none;
  }
}
/* END: Footer */