html, body {
    font-size: 13px;
    font-family: Arial, sans-serif;
    height: 100%;
    width: 100%;  
    margin: 0; 
}

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
}

a {
    text-decoration: none;
    color: rgba(0, 0 ,0 ,0.75);
}

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

/* Navigation Bar Section*/
#nav-bar {
    display: grid;
    grid-template-columns: repeat(2, 53px) 1fr repeat(3, 53px) 90px;
    grid-template-rows: 43px;
    grid-template-areas:"about store . gmail images menu sign-in"; 
    justify-items: center;
    align-items: center;
    padding: 14px;
}

#menu-image {
    height: 18px;
    height: 18px;
    opacity: 0.6;
}

#sign-in {
    border-radius: 2px;
    background-color: #4285f4;
    opacity: 1;

    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    padding: 7px 12px;
}

#about{
    grid-area: about;
}
#store{
    grid-area: store;
}
#gmail{
    grid-area: gmail;
}
#images{
    grid-area: images;
}
#menu{
    grid-area: menu;
}
#sign-in{
    grid-area: sign-in;
}

/* Main Section */
#main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 190px 70px 70px 200px;
    grid-template-areas: 
    ". logo ."
    ". search ."
    ". main-buttons ."
    ". . .";  
    justify-items: center;
    align-items: center;
}

.buttons {
    background-color: rgba(0, 0 ,0 ,0.05);
    border: 1px solid rgba(0, 0 ,0 ,0);
    margin: 6px;
    padding: 10px 19px;
    border-radius: 4px;
    color: rgba(0, 0 ,0 ,0.75); 
    white-space: nowrap;
}

.buttons:hover {
    border: 1px solid rgba(0, 0 ,0 ,0.25);
    cursor: pointer;
}
.buttons:focus {
    outline: 0;
    border: 1px solid #4285f4;
}

#search:hover {
    box-shadow: 0px 1px 4px 1.5px rgba(0, 0 ,0 ,0.1);
}

#search:focus {
    outline: 0;  
    box-shadow: 0px 1px 4px 1.5px rgba(0, 0 ,0 ,0.1); 
}

#logo {
    grid-area: logo;
    align-self: end;
}
#search {
    grid-area: search;
    width: 100%;
    height: 40px;
    border: 1px solid rgb(216, 216, 216);
    border-radius: 19px;
    padding: 1px 30px;
}
#main-buttons {
    grid-area: main-buttons;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-basis: auto;
}

/* Footer Section*/
#footer {
    display: grid;
    grid-template-columns: repeat(2, 90px) 120px 1fr repeat(3, 73px);
    grid-template-rows: 15px;
    grid-template-areas: "advertising business hsw . privacy terms settings";
    justify-items: center;
    align-items: center;
    background-color: rgba(0, 0 ,0 ,0.05);
    font-size: 14px;
    border-top: 1px solid rgba(0, 0 ,0 ,0.05);
    padding: 14px;
}

#advertising {
    grid-area: advertising;
}
#business {
    grid-area: business;
}
#hsw {
    grid-area: hsw;
}
#privacy {
    grid-area: privacy;
}
#terms{
    grid-area: terms;
}
#settings {
    grid-area: settings;
}