/* ------------- General ------------- */
html {
    scroll-behavior: smooth;
    font-family: monospace, sans-serif;
}

body {
    background-color: beige;
    color: darkslategray;
    padding: 0rem;
    margin: 0rem;
    justify-content: center;
}

section {
    padding: 4vw;
    height: 100vh;
    min-height: 40rem;
    box-sizing: border-box;
}

.subhead {
    text-align: center;
    font-size: 2.5vw;
    margin-bottom: 2.5vw;
}

.left-half {
    width: 50%;
}

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

.row img {
    width: 4.5rem;
}

/* ------------- Navigation ------------- */
nav a {
    text-decoration: none;
    color: darkslategrey;
    margin: 0rem;
    padding: 1rem;
}

nav a:hover {
    background-color: darkslategrey;
    color: lightsteelblue;
}

nav {
    display: flex;
    justify-content: flex-end;
    background-color: lightsteelblue;
    font-size: 1.5rem;
    position: fixed;
    top: 0;
    width: 100%;
}

/* ------------- Home ------------- */
#home {
    background-color: darkslategrey;
    color: beige;
    font-size: 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#home h1 {
    margin: 0rem;
}

#home > img {
    width: 30vw;
    border-radius: 15vw;
    border: #f5f5dc solid 0.2vw;
}

#tagline {
    font-variant: small-caps;
    font-size: 2vw;
}

/* ------------- About ------------- */
#about {
    background-color: beige;
}

#about p {
    font-size: 1.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
}

#about a {
    text-decoration: none;
    font-weight: bold;
    color: darkslategrey;
}

#about a:hover {
    text-decoration: underline;
}

/* ------------- Expertise ------------- */
#expertise .row {
    margin: 1.5rem;
}

/* ------------- Portfolio ------------- */
#portfolio img {
    width: 18vw;
    height: 20vw;
    margin: 0vw;
    padding: 0vw;
    filter: grayscale(1);
    object-fit: cover;
    object-position: 20%;
    transition: 0.5s;
}

#portfolio img:hover {
    filter: grayscale(0);
    object-position: 0%;
}

#portfolio .row {
    justify-content: center;
}

/* ------------- Contact ------------- 
#contact {
    background-color: beige;
}*/