html, body{
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

body {
    background-color:#171717;
    color: #fefefe;
    font-family: Helvetica, Arial, "Arial Unicode MS", sans-serif;
}

/* Home */
#homePage {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 10%;
    gap: 50px;
}

#companyName{
    font-size: min(10vw, 70px);
    font-weight: bolder;
}

#mission{
    color: lightgrey;
    margin-right: 50px;
    max-width: min(80%, 700px);
}

a {
    display: inline-block;
    background-color: #fefefe;
    border: none;
    border-radius: 10px;
    padding: 10px;
    color: #171717;
    text-decoration: none;
}


/* Team page */
#teamPage{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#teamMembers{
    position: relative;
    display: flex;
    gap: 30px;
}

.teamMember{
    width: 300px;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-device-width: 1000px){
    @media (orientation: landscape){
        #homePage {
            padding: 5%;
            padding-bottom: 0px;
            gap: 20px;
        }
        
        #companyName{
            font-size: min(5vw, 70px);
            font-weight: bolder;
        }
        
        #mission{
            color: lightgrey;
            margin-right: 50px;
        }
    }

    #teamPage{
        transform: initial;
        top: 0;
        left: 0;
        padding: 5%;
    }
    #teamMembers{
        flex-direction: column;
        top: 10%;
    }
    .teamMember{
        width: 90%;
    }
    html, body{
        overflow-y: scroll;
    }

}

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    float: left;
    width:  200px;
    height: 200px;
    object-fit: cover;
}

h2 {
    font-size: 20px;
}