body {
  font-family: "Courier New", Courier, monospace;
  background-color: bisque;
  margin: 0;
  font-size: 14px;
}

main {
  margin-left: 16rem;
}

#Introduction h1 {
  font-size: 4rem;
}

.socials {
  font-size: 3rem;
  color: #cf9033;
}
/* Make all spans bold */
span {
  font-weight: bold;
}

/* Image for main page */
img {
  float: right;
  padding: 5rem;
  margin: 3rem;
  width: 20rem;
  height: 20rem;
}

@media screen and (max-width: 900px) {
  img {
    width: 15rem;
    height: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
  }
}

/* Font Size for smaller screens */
@media screen and (max-width: 600px) {
  body {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 380px) {
  img {
    width: 12rem;
    height: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
  }
}

/* MyCybersecurity section and images */

.horse_plinko {
  padding: 0;
  margin: 3rem;
  max-width: 100%;
  height: auto;
}

/* Cyber captions */
figure {
  margin: 0;
  padding: 0;
  text-align: center;
}

figcaption {
  color: black;
  font-style: italic;
  text-align: center;
}

.figure_container {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width: 900px) {
  .figure_container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
  }
}

@media screen and (max-width: 500px) {
  .horse_plinko {
    padding: 0;
    margin: 1rem;
    width: 20em;
    height: auto;
  }

  figcaption {
    color: black;
    font-style: italic;
    text-align: center;
    font-size: 0.5rem;
  }
}

/* Navigation bar */
ul.ul_nav {
  top: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 10rem;
  background-color: #4b3b40;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li.li_nav a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: white;
}

li.li_nav a:hover {
  background-color: grey;
}

@media screen and (max-width: 900px) {
  ul.ul_nav {
    width: 100%;
    height: auto;
    position: relative;
  }

  ul.ul_nav li a {
    float: left;
    padding: 15px;
  }

  main {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  ul.ul_nav li a {
    text-align: center;
    float: none;
  }
}

.Work-Experience {
  margin-top: 30px;
  text-align: left;
}

.Work-Experience ul {
  margin: 0;
  padding: 0;
}

#Skills {
  margin-top: 80px;
  text-align: center;
  margin-bottom: 80px;
}

.Education {
  text-align: left;
}

.Education ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#Contact-info {
  margin-top: 50px;
  margin-bottom: 40px;
  text-align: center;
}

/* CSS for Project 1 and 2 page mainly images */

.headers_color {
  color: #d3d3d3;
  text-shadow: 2px 2px #4b3b40;
}

#Project1 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(Photos/HD-wallpaper-storm-landscape-nature.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#Project1.headers {
  margin-top: 3rem;
  font-size: 1rem;
}

@media only screen and (min-width: 1300px) {
  #Project1 {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url(Photos/stormy-weather-over-florida.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .headers {
    margin-top: 5rem;
    font-size: 2rem;
  }
}

#wrap {
  margin: 3em 3em;
  max-width: 100vw;
  overflow-x: hidden;
}

#Weather_Final {
  width: 32em;
  height: auto;
}

/* Ensuring picture of / command fits on small screens */
@media only screen and (max-width: 600px) {
  #Weather_Final {
    width: 23em;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #wrap {
    margin: 0;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

.left {
  float: left;
  margin-right: 1em;
}

.right {
  float: right;
  margin-left: 1em;
}

#wrap > p {
  text-shadow: 2px 2px #4b3b40;
  color: #ffffff;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

#wrap > ul {
  text-shadow: 2px 2px #4b3b40;
  color: #ffffff;
}

#wrap p:last-child {
  overflow: visible;
}

li.indiv_skills {
  font-weight: bold;
}

/* Project page 2 css*/
.headers_color2 {
  color: black;
}

#wrap_project2 {
  margin: 3em 3em;
}

#Keylogger_image {
  width: 32em;
  height: auto;
}

/* Ensuring picture of / command fits on small screens */
@media only screen and (max-width: 600px) {
  #Keylogger_image {
    width: 23em;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #wrap_project2 {
    margin: 0;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

#wrap_project2 > p {
  color: black;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

#wrap_project2 > ul {
  color: black;
}

#wrap_project2 p:last-child {
  overflow: visible;
}