body {
    background-color: #202124;
    color: white;
    font-family: arial, sans-serif;
    margin: 0;

    height: 100vh;
    width: 100vw;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

/* Header */

header {
    padding: .2em;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

header div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header img {
    width: 3em;
    height: 3em;
}

header a {
    color: white;
    font-size: small;
    display: inline-block;
}

header section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.headerSpacer {
    padding: .5em;
}

.dots {
    filter: invert(98%) sepia(0%) saturate(612%) hue-rotate(281deg) brightness(96%) contrast(91%);
    width: 1.1em;
    height: auto;
}

.circle {
    width: 2.6em;
    height: 2.6em;

    display: flex;
    align-items: center;
    justify-content: center;
}

.circle:hover {
    background-color: #5f636852;
    border-radius: 50%;
    cursor: pointer;
}

.profilePic {
    border-radius: 50%;
    width: 2.1em;
    height: auto;
}

/* Center */

.center {
    height: 73.9vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.positionLogo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 2em;
}

.positionLogo img {
    width: 17em;
    height: auto;
}

.searchZone {
    height: 6.5em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.searchBox {
    /* width: 38em; */
    width: 35em;
    height: 2.7em;
    border-radius: 1.5em;
    border: .1em solid #5f6368;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.searchBox:hover, .searchBox:focus, .searchBox:focus-within {
    background-color: #303134;
    border: none;
    box-shadow: 0 0 .4em rgba(0, 0, 0, 0.37);
}

.searchBox img {
    width: .9em;
    padding: 0 1em;
}

.searchBox input {
    width: 90%;
    height: 70%;
    border: none;
    background-color: transparent;

    caret-color: #bdc1c6;
    font-size: 1.01em;
    color: white;
}

.searchBox input:focus {
    outline: none;
}

.mag {
    filter: invert(98%) sepia(0%) saturate(612%) hue-rotate(281deg) brightness(96%) contrast(91%);
    margin-top: .3em;
}

.mic {
    margin-top: .1em;
}

.button {
    background-color: #303134;

    padding: .8em 1.2em;
    border-radius: .4em;

    font-size: .9em;
    margin: 0 .2em;
}

.button:hover, .button:focus {
    border: .1em solid rgb(133, 133, 133);
    text-decoration: none;
}

.offered {
    margin-top: 3em;
    color: #bdc1c6;
    font-size: small;
}

.offered a {
    color: #8ab4f8;
    padding: 0 .3em;
}

/* Footer */

footer {
    background-color: #171717;
}

footer section {
    padding: 0 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media only screen and (max-width: 1200px) {
    footer section {
        justify-content: space-evenly;
    }
}

.country {
    padding: 1em 3em;
    border-bottom: .1em solid #212327;
    color: #999da2;
}

.footerLink {
    color: #999da2;
    padding: 1em;
    display: inline-block;
    white-space: nowrap;
}

.footerLink:hover {
    text-decoration: underline;
    cursor: pointer;
}