* {
    font-family: "Google Sans", "Open Sans", "Roboto", sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    width: 90%;
    height: 10%;
    margin: -2em 1em auto;
}

#searchbox svg {
    height: auto;
    width: 1.5em;
    padding: 0.5em;
}

#googlogo {
    height: 30px;
    width: 92px;
    /*margin: 1.75em 0 auto 1em;*/
}

#searchbox {
    /*margin: 1.75em auto auto auto;*/
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: hidden;
    border-radius: 50px;
    border-width: 1px;
    padding: 0.25em 0.5em 0.25em 1.25em;
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    width: 42em;
    margin-left: 3em;
    /*height: 50%;*/
}

input {
    width: 90%;
    /*margin-left: 0px;*/
    border-style: hidden;
    font-size: 16px;
    outline: 0;
    border-right: solid;
    border-width: 1px;
    border-color: #dfe1e5;
}

#appsnuser {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 1em;
    padding-left: 19em;
}

#appsnuser svg {
    width: 1.5em;
    margin-right: 1em;
}

#appsnuser a {
    background-color: rgb(255, 0, 128);
    color: rgb(255, 255, 255);
    padding: 0.5em 0.75em;
    border-radius: 100%;
    text-decoration: none;
}

#leftheader {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
}

input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1.6em;
    width: 1.6em;
    border-radius: 50em;
    background: url(https://fonts.gstatic.com/s/i/materialiconsoutlined/clear/v10/24px.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    opacity: 0.5;
    pointer-events: all;
}

/* All of the above is just the header :,) */
/* Coding is Hard But I Love it */
/* Can't wait to start programming */
/* I hope I can see this and laugh after a couple of years */

#nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50em;
    margin-left: 13.25em;
    font-size: small;
}

nav a {
    font-size: small;
    margin: 0.75em;
    color: #696c71;
    text-decoration: none;
    font-weight: 400;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

nav a svg {
    width: 1.5em;
    margin-right: 0.15em;
}

nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: -35px;
}

hr {
    height: 1px;
    width: 100%;
    margin: 0;
    border: hidden;
    background-color: #ebebeb;
}

#current {
    height: 9px;
    width: 3em;
    box-shadow: 0 20px 0 -3px #1a73e8;
    position: absolute;
}

#currenta {
    color: #2177e8;
}

/* navbar above */

/* Results */

p {
    color: #74797e;
    font-size: 14px;
    font-family: arial, sans-serif;
    margin: 5px 0;
}

.result p {
    color: #646771;
}

#search-results {
    /*display: flex;*/
    margin-left: 180px;
    width: 652px;
}

.result h2 {
    font-size: 20px;
    line-height: 1.3;
    padding: 0;
    margin: 0;
    color: #1a14b0;
    font-weight: lighter;
}

.result {
    padding: 0.75em 0 0.5em;
    width: 37em;
}

a {
    text-decoration: none;
}

.link {
    color: #20212a !important;
}

span {
    color: #5f6368;
}

#results {
    margin-top: 1em;
}

#related-searches {
    margin: 0% auto auto;
    font-weight: lighter;
}

#lists {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0%;
    padding: 0;
}

ul {
    padding: 0%;
    margin: 0;
    margin-top: 1em;
}

li {
    background-color: #f1f3f4;
    border-radius: 25px;
    width: 20em;
    height: 3em;
    margin: 10px;
    text-align: center;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    align-items: center;
    background-color: #f1f3f4;
    border-radius: 100px;
    box-sizing: border-box;
    display: flex;
    margin: 8px;
    max-height: none;
    min-height: 48px;
    padding: 0 17px;
    position: relative;
}

li p {
    color: #20212a;
    font-size: 16px;
    width: inherit;
    text-align: left;
    margin-left: 16px;
}

.taken-from-google {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,.54)' d='M20.49 19l-5.73-5.73C15.53 12.2 16 10.91 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.41 0 2.7-.47 3.77-1.24L19 20.49 20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    border-radius: 4px;
    height: 20px;
    padding: 10px;
    width: 20px;
}

/* Goooooooooogle*/

#Goooooooooogle {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 2em;
    align-items: baseline;
}

h3 {
    padding: 0;
    margin: 0;
    margin-top: 10px;
}

#Goooooooooogle p {
    font-size: 0.5em;
}

#g {
    color: #4285f4;
}

#o {
    color: #ea4335;
}

.o {
    color: #fbbc05;
}

#l {
    color: #34a853;
}

#e {
    color: #ea4335;
}

#num {
    color: #000;
}

.nums {
    color: #4785f4;
}

a:hover {
    text-decoration: underline;
}

/* footer */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*position: absolute;*/
    /*bottom: -980;*/
    background: #f2f2f2;
    width: 100%;
    height: 3.5em;
    margin-top: 12em;
}

footer a {
    margin: 1em;
    color: #70757a;
    font-size: 14px;
}

body {
    padding: 0;
    margin: 0;
}

#left-navlinks {
    margin-left: 11.5em;
}

/* don't know what this code means (yet) */

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

footer {
    flex-shrink: 0;
}

/*   People Also Ask    */
#feedback {
    display: flex;
    align-items: center;
    height: 0;
}

#peoplealsoask {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 1.5em;
}

#peoplealsoask p {
    padding: 0.5em 0;
    font-size: 19px;
    color: #202124;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#feedback p {
    padding-left: 10px;
    font-size: 12px;
    color: #70757a;
}

#paatit {
    margin: 0.5em 0;
    font-size: 21px;
    font-weight: lighter;
}

#peoplealsoask p svg {
    width: 1.5em;
    height: auto;
}