style.css

* {
  box-sizing: border-box;
}

body {
  font-family: "Space Mono", mono space;
  font-size: 22px;
  color: black;
  text-align: center;
  line-height: 2;
  background-image: url("Images/background2.png");
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: #66FCF1;
}

nav > img {
  position: absolute;
  top: 25%;
  left: 20%;
  width: 50px;
  border-radius: 50%;
  background-color: whitesmoke;
}

.lowerPicture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -55px;
  width: 42.5%;
}

.quickLinks > a:link
{
   color: #66FCF1;
}
.quickLinks > a:visited
{
   color: #66FCF1;
}

.quickLinks > a {
  text-decoration: none;
  padding: 7px 7px;
}

.quickLinks {
  display: block;
  margin-top: 30px;
  margin-right: 250px;
  float: right;
}

header {
  display: flex;
  padding: 6% 6% 0 6%;
  color: #66FCF1;
  font-family: "Dancing Script", cursive;;
  height: auto;
}

.firstPage {
  margin: auto;
}

.firstPage > h1 {
  font-size: 60px;
}

.subline {
  font-family: "Ubuntu", sans-serif;
}

.aboutMe {
  position: relative;
  background-color: #C5C6C7;
  padding: 2%;
  line-height: 2.5;
}

.profile {
  width: 15%;
  margin-top: 20px;
  margin-bottom: 30px;
}

.bio1 {
  padding-bottom: 60px;
}

h2 {
  color: white;
  font-size: 50px;
  margin-bottom: 150px;
}

.subHead {
  color: white;
  font-size: 30px; 
}

h4 {
  color: white;
  font-size: 20px; 
}


ul {
  padding-inline-start: 0px;
}

.skills > li {
  list-style: none;
  display: inline-block;
  border: solid 2px black;
  color:#45A29E;
  padding: 3px;
  border-radius: 5px;
  margin-bottom: 15px;
}

b {
  display: block;
}

.blogLinks {
  list-style: none;
  display: inline-block;
}

.blogLinks > a {
  color:#45A29E;
  font-size: 18px;
}

.blogLinks > a:visited
{
   color: #45A29E;
}

.projectPicture {
  width: 800px;
  height: 360px;
  border: 1px #C5C6C7 solid;
  padding: 15px;
  border-radius: 5px;
  margin-top:30px;
  margin-bottom: 20px;
}

.description {
  color: white;
  padding-bottom: 20px;
  padding-top: 50px;
}

.thumbnail {
  display: inline-block;
  cursor: pointer;
  height: 60px;
}


a.thumbnail:hover {
  box-shadow: 5px 5px 5px gray;
}

.thumbnail img {
  max-height: 100%;
}

.liveLinks {
  list-style: none;
  display: inline-block;
  margin-bottom: 80px;
}

.liveLinks > a {
  color:#45A29E;
  font-size: 18px;
  margin-bottom: 40px;
  padding: 0 20px 0 20px;
}

.liveLinks > a:visited
{
   color: #45A29E;
}

footer {
  padding: 1% 0;
  background-color: white;
  color: #1F2833;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-github {
  background: black;
  color: white;
}


@media only screen and (min-width: 600px) and (max-width: 1250px) {
  .quickLinks {
  margin-right: 100px;
  }

.lowerPicture {
    margin-bottom: -40px;
  }

  nav > img {
  top: 25%;
  left: 15%;
  }

  .projectPicture {
    width: 65%;
    height: 65%;
  }


}

@media only screen and (max-width: 600px) {
  .quickLinks {
  margin-right: 50px;
  }

  .quickLinks > a {
    font-size: 14px;
    text-decoration: none;
    padding: 4px;
  }

  .lowerPicture {
    margin-bottom: -15px;
  }

  .profile {
    width: 40%;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .projectPicture {
    width: 350px;
    height: 158px;
    border: 1px #C5C6C7 solid;
    padding: 15px;
    border-radius: 5px;
    margin-top:30px;
    margin-bottom: 20px;
  }

  nav > img {
    top: 25%;
    left: 10%;
  }
}