* {
    font-family: 'Times New Roman', Times, serif;
    padding: 0;
    box-sizing: border-box;
}
/* added this so when the screen was at a small size everything was still aligned. */
nav {
    text-align: center;
}

header {
    background-color: #b7b7a4;
    font-size: 200%;
    border: 12px solid #ffe8d6;
}

li {
    display: inline;
    margin: 20px;
    border-bottom:solid;
}

.me {
    display: center;
    margin-top: 10px;
    margin-right: 20px;
    border-radius: 500px;
    float: center;
    border: 12px solid #ffe8d6 ;
    height: 400px;
}

.name {
    text-align: center;
    margin-bottom: 0px;
}

.main {
    border: 10px solid #ffe8d6;
    background-color: #6b705c;
    padding: 10px;
    text-align: center;
    width: 100%;
   
}
.main h2 {
    font-size: 32px;
}

p{
    font-size: 20px;
}

a {
    color: black;
    text-decoration: none;
    margin:4px;
}
/* addded a hover so when you hover over the links it shows you are ontop of it */
a:hover {
    border-bottom: solid;
}

img {
    border:10px solid #a5a58d;
    border-radius: 10px;
}

#about-me {
    height: 100%;
}

footer {
    text-align: center;
}

footer a {
    margin: 4px;
}

.all {
    display: flex;
    justify-content:center;
    flex-direction: column;
}
.container {
    position: relative;
    width: 100%;
  }
.featured {
    width:50% ;
}
.projects {
    width: 35%;
}
/* added a media screen so when it hits 900px the background color changes */
@media screen and (max-width:900px){
    .main{
        background-color: #a5a58d;
    }
}
/* added another color change s */
@media screen and (max-width:600px){
    .main{
        background-color: #ffe8d6;
    }
}