/*
 * @Author: Esteban Herrera
 * @Email: stv.herrera@gmail.com
 * @Date: 2021-09-16 01:07:33
 * @Last Modified by: Esteban Herrera
 * @Last Modified time: 2021-09-16 01:08:43
 * @Description: Google Homepage Clone
 */

/** || global element styling */
html {
  font-family: Arial,sans-serif;
  background: linear-gradient(to right,#57c1eb 0,#246fa8);
  height: 100%
}

body {
  height: 100%;
  font-size: 1.6rem
}

/** || main container */
#container {
  display: grid;
  grid: 'header header header' 47px 'main main main' 1fr 'footer footer footer' 41px
  / 1fr 582px 1fr;
  background: #fff;
  height: 100%;
  min-width: 800px;
  min-height: 450px
}

footer, header {
  display: grid
}

header {
  align-items: end
}

header {
  grid-area: header
}

section {
  grid-area: main
}

footer {
  grid-area: footer
}
menu {
  display: grid;
  grid: 'menu-left menu-center menu-right' 30px
  / 109.062px 1fr 280.94px
}

menu {
  padding: 0;
  font-size: 13px;
  font-family: Arial,sans-serif
}

#menu-left {
  grid-area: menu-left
}

#menu-center {
  grid-area: menu-center;
  text-align: center
}

#menu-right {
  grid-area: menu-right
}

#menu-left {
  display: grid;
  grid: 'about store' 1fr
  / 1fr;
  text-align: center;
  padding-top: 7px
}

#menu-left-about {
  grid-area: about;
  justify-self: center
}

#menu-left-store {
  grid-area: store
}

#menu-left-about {
  padding-left: 6px
}

#menu-left-store {
  padding: 0
}

#menu-left a {
  text-decoration: none;
  color: rgba(0,0,0,.87)
}

#menu-left a:hover {
  text-decoration: underline
}

#menu-left a:visited {
  color: rgba(0,0,0,.87)
}

#menu-right {
  display: grid;
  grid: 'menu-right-mail menu-right-images menu-right-apps menu-right-sign-in' 30px
  / 33.953px 55.641px 45px 100.344px;
  padding-left: 30px
}

#menu-right-mail {
  grid-area: menu-right-mail
}

#menu-right-images {
  grid-area: menu-right-images
}

#menu-right-apps {
  grid-area: menu-right-apps
}

#menu-right-sign-in {
  grid-area: menu-right-sign-in
}

#menu-right a {
  text-decoration: none;
  color: rgba(0,0,0,.87)
}

#menu-right a:hover {
  text-decoration: underline
}

#menu-right a:visited {
  color: rgba(0,0,0,.87)
}

#menu-right-mail {
  padding-top: 7px;
  text-align: center
}

#menu-right-images {
  padding-top: 7px;
  text-align: center;
  padding-left: 15px
}

#menu-right-apps {
  display: grid;
  grid-template-columns: 30px;
  grid-template-rows: 30px;
  text-align: center;
  padding-left: 17px
}

#menu-right #menu-right-apps {
  color: #696d72;
  padding-top: 2px;
  outline: 0
}

#menu-right #menu-right-apps:hover {
  color: rgba(0,0,0,.87)
}

#menu-right #menu-right-sign-in {
  display: grid;
  grid: 'btn-blue' 30px
  / 67.34px
}

#menu-right #menu-right-sign-in a {
  grid-area: btn-blue
}

#btn-blue {
  color: #fff;
  border: 1px solid #4285f4;
  font-weight: 700;
  outline: 0;
  background: #4285f4;
  background: -webkit-linear-gradient(top,#4387fd,#4683ea);
  background: linear-gradient(top,#4387fd,#4683ea);
  line-height: 28px;
  border-radius: 2px;
  text-align: center;
  margin: -1px 14px 1px 17px
}

#btn-blue a {
  color: #fff
}

#btn-blue a:hover {
  cursor: default
}

#btn-blue a:visited {
  color: #fff
}

section {
  display: grid;
  grid: 'figure' 271px 'search-bar' 44px 'center' 58px
  / 1fr;
  min-width: 800px
}

section {
  text-align: center;
  font-size: 13px
}

figure {
  grid-area: figure
}

img {
  padding-top: 151px;
  max-height: 100%;
  max-width: 100%
}

#search-bar {
  display: grid;
  grid: 'search-bar-left search-bar-center search-bar-right' 44px
  / 1fr 582px 1fr
}

#search-bar {
  min-width: 800px
}

#search-bar-left {
  grid-area: search-bar-left;
  text-align: center
}

#search-bar-right {
  grid-area: search-bar-right;
  text-align: center
}

#search-bar-center {
  display: grid
}

#search-bar-icons {
  display: grid;
  grid: 'glass search-input mic' 44px
  / 40px 1fr 40px
}

#search-bar-icons .material-icons {
  grid-area: glass
}

#search-box {
  grid-area: search-input
}

#keyboard-voice {
  grid-area: mic
}

#rounded-rectangle {
  width: 582px;
  height: 44px;
  border-radius: 24px;
  border: 1px solid #d6d7da
}

#rounded-rectangle:hover {
  box-shadow: -.5px 1px 5px .5px rgba(0,0,0,.19);
  border: 1px solid #ccc
}

#search-bar-icons span {
  color: #9aa0a6;
  font-size: 20px;
  margin: 11px 0 0 8px
}

#search-bar-icons span a {
  text-decoration: none;
  cursor: default
}

#search-bar-icons span a:visited {
  color: #9aa0a6
}

#rounded-rectangle input {
  font-family: Arial,sans-serif;
  font-size: 16px;
  width: 487px;
  height: 40px;
  outline: 0;
  border: none
}

#rounded-rectangle input:focus {
  outline: 0
}

#keyboard-voice {
  background: url(//web.archive.org/web/20191130234759im_/https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png) 0 0 no-repeat;
  height: 24px;
  width: 24px;
  background-size: 24px;
  vertical-align: middle;
  cursor: pointer;
  align-self: center;
  margin-left: -.5px;
  margin-top: -1.5px
}

center {
  display: grid;
  grid: 'center-left center-right' 48px
  / 49.25% 50.75%;
  padding-top: 20px
}

#center-left {
  grid-area: center-left;
  text-align: end
}

#center-right {
  grid-area: center-right;
  text-align: start
}

#center-left input, #center-right input {
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-color: #f2f2f2;
  margin: 11px 6px;
  padding: 0 16px;
  border: 1px solid #f2f2f2;
  cursor: pointer;
  text-align: center;
  height: 36px;
  border-radius: 4px;
  font-family: Arial,sans-serif;
  font-size: 14px;
  color: #5f6368
}

#center-left input:hover, #center-right input:hover {
  background-color: #f2f2f2;
  color: #000;
  box-shadow: 0 1px 1px rgba(0,0,0,.19);
  border: 1px solid #ccc
}

/** || footer */
footer {
  grid: 'menu-footer-area' 16px
  / 1fr
}

footer {
  font-size: 14px;
  background: rgba(0,0,0,.05);
  border-top: 1px solid #e4e4e4;
  padding-top: 13px
}

#menu-footer {
  grid-area: menu-footer-area
}

#menu-footer {
  display: grid;
  grid: 'menu-footer-left-area menu-footer-center-area menu-footer-right-area' 16px
  / 1fr 1fr 1fr
}

#menu-footer-left {
  grid-area: menu-footer-left-area
}

#menu-footer-center {
  grid-area: menu-footer-center-area
}

#menu-footer-right {
  grid-area: menu-footer-right-area;
  text-align: end
}

.footer-link {
  color: #5f6368
}

footer span a:hover {
  text-decoration: underline;
  cursor: pointer
}

footer span a:visited {
  color: #5f6368
}

#advertising {
  padding: 0 0 0 30px
}

#business {
  padding: 0 0 0 23px
}

#how-search-works {
  padding: 0 0 0 23px
}

#privacy {
  padding: 0
}

#terms {
  padding: 0 0 0 23px
}

#settings {
  padding: 0 30px 0 23px
}

@media (max-height:767px) {
  img {
    padding-top: 109px
  }
  section {
    grid: 'figure' 229px 'search-bar' 44px 'center' 58px
  }
}