body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-height: 100vh;
    justify-content: flex-start;
  }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1%;
  background-color: #13293d;
  color: #44e21d;
  font-size: 18pt;
}

.works {
  margin: 15px 40px;
  padding: 12px 23px;
  max-width: 500px
}
  
h1 {
  font-size: 250%;
  color: #ff2121
}
  
h2 {
  margin: 0 0 0 50px;
  font-size: 200%;
  color:#ff2121
}
  
nav {
  display: flex;
  justify-content: space-around;
  min-width: 300px;
  color: #038b31;
  font-weight: bold;
  text-decoration: none;
}
  
nav :hover {
  color: #21ff21;
}
  
.about {
  display: flex;
  justify-content: center;
  padding: 2%;
  background-color: #24927a;
  color: #024d2a;
}

.portfolio {
  flex: 5;
  background-color: #3f547a;
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.works {
  border-style: solid;
  border-width: 1px;
  border-radius: 50px;
  padding: 10px;
  flex: 0 0 300px;
  transform: rotate(8deg);
  box-shadow: 10px 10px 5px #3d0000;
  margin: 20px;
} 

#primary {
  width: 200%;
  border-style: solid;
  border-width: 1px;
  border-radius: 50px;
  padding: 10px;
  flex: 0 0 300px;
  transform: rotate(8deg);
  box-shadow: 10px 10px 5px #3d0000;
  margin: 20px;
} 

#primary-image {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 300px;
  height: 300px;
}
  
.label {
  color: #00ffff
}
  
.works > header {
  border-radius: 50px 50px 0px 0px;
  padding: 20px;
}
  
.works > p {
  text-align: center;
}
  
.works > img {
  width: 100%;
}

.contact {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: start;
  padding: 1%;
  position: relative;
  background-color: #24927a;
  color: #f1134b;
}

.contact-info :hover {
  color: #21ff21;
}

#footlinks { 
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center; 
}

#footlinks li { 
  width: 300px;
}

@media screen and (max-width: 800px) {
  body,
  main,
  nav,
  div,
  footer {
    flex-direction: column;
  }

  .contact {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 1%;
    position: relative;
    background-color: #2b7bc7;
    color: #f1134b;
  }

  .contact-info :hover {
    color: #21ff21;
  }

  #footlinks { 
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center; 
  }

  #footlinks li { 
    width: 300px;
  }
}