mystyle.css

body {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 7fr 2fr 10fr 1fr;
    grid-template-areas: 
        "upper-left . upper-right"
        ". google-logo ."
        ". search ."
        ". more-search ."
        "bottom-left bottom-left bottom-right";
    height: 100%;
    font-size: 12px;
    background-color: #222222;   
}

.upper-left {
    grid-area: upper-left;
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.upper-right {
    grid-area: upper-right;
    display: flex;
    justify-content: space-evenly;
    align-self: flex-start;
}

.google-logo {
    grid-area: google-logo;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.search-bar {
    grid-area: search;
    display: flex;
    justify-content: center;
    align-self: flex-start;
}

.search {
    height: 30px;
}

.more-search {
    grid-area: more-search;
    display: flex;
    justify-content: space-evenly;
}

.bottom-left {
    grid-area: bottom-left;
    display: grid;
    grid-template-columns: 1fr 1fr 5fr;
    background-color: #222222;
    align-content: center;
    border-top: solid 2px #e4e4e4;
}

.bottom-right {
    grid-area: bottom-right;
    display: flex;
    justify-content: space-evenly;
    background-color: #222222;
    align-items: center;
    border-top: solid 2px #e4e4e4;
}

.left-box {
    background-color: #f2f2f2;
    height: 20px;
    padding: 10px;
    border-radius: 10%;
}

.right-box {
    background-color: #f2f2f2;
    height: 20px;
    padding: 10px;
    border-radius: 10%;

}

.left-box:hover {
    border: solid 1px #e4e4e4;
}

.right-box:hover {
    border: solid 1px #e4e4e4;
}

input {
    width: 500px;
}

#profile {
    border-radius: 50%;
}

a {
    text-decoration: none;
    font-size: 20px;
    padding: 20px;
    color: white;
}

#profile {
    display: block;
    width: 40px;
    height: auto;
    padding: 10px;
}