body {
    background: url(images/pizza-4.1.gif);
    display: flex;
    justify-content: center;
    background-attachment: fixed;
    margin: 2vh;
}

.flex-container {
    display: flex;
    flex-direction: column;
    width: 1000px;
    border: solid black 1px;
}

nav {
    display: flex;
    justify-content: space-evenly;
    background: rgb(108, 67, 34);
    padding: 20px 10px 20px 10px;
    & .nav-item, .nav-active {
        border-radius: 25px;
        padding: 10px;
        flex: 1 0 0;
        text-align: center;
        margin: 0px 10px 0px 10px;
    }
    & .nav-item {background: purple;}
    & .nav-active {background: forestgreen;}
    & .nav-item:hover {background: forestgreen;}
    & a {margin: 0px; font-family: Arial; font-weight: bold; text-decoration: none; color: aliceblue;}
}

main {
    background: snow;
    height: 80vh;
    overflow: scroll;
    padding: 25px;
    & h1 {text-align: center; font-family: Arial; font-weight: bold;}
}

.about-me {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    & .profile-photo {grid-column: auto / span 3; margin: 0px 20px 0px 0px;}
    & .about-me-text {grid-column: auto / span 9;}
    & .profile-photo img {width: 100%;}
}


.ask-me-anything {
    background: rgb(233, 230, 225);
    border-radius: 25px;
    padding: 20px;
    margin: 0px 0px 10px 0px;
    border: solid gray 1px;
    & h2, h3 {font-family: Arial, sans-serif; color: rgb(75, 69, 62); margin: 0px;}
    & h2 {font-weight: bold;}
    & h3 {font-weight: normal;}
}

.buzzfeed {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    & .buzzfeed-results {grid-column: auto / span 6; border: solid gray 1px; margin: 10px;}
    & .buzzfeed-results img {width: 100%;}
}

@media only screen and (max-width: 1000px) {
  .flex-container {width: 90vw;}
  nav {flex-direction: column;}
  main {height: auto; overflow: hidden;}
  .profile-photo {grid-column: auto / span 12;}
  .about-me-text {grid-column: auto / span 12;}
}