/* Work Page CSS */

/* Margins */
.row {
    margin: 8px -16px;
  }
  
  /* Add padding BETWEEN each column */
  .row,
  .row > .column {
    padding: 8px;
  }
  
  /* 2 equal columns for misc projects section  */
  .miscProj {
    float:left;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0%;
    margin-bottom: 2%;
  }
  
  /* Clear floats after rows */ 
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Project outlines */
  .outline {
    outline-style: auto;
    outline-width: 2px;
    outline-color: grey;
    padding: 10px;
  }
 
.projTitle {
    text-align: center;
}

.projDesc { 
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

.projImg {
  width: 95%;
  max-height: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.githubButton {
  display: flex;
  justify-content: center;
}

/* Responsive layout */
@media screen and (max-width: 1200px) {
  .miscProj {
    width: 48%;
    margin-bottom: 1rem;
  }
  .githubButton {
    display: flex;
    flex-direction: column;  
    justify-content: space-evenly; 
  }

}
@media screen and (max-width: 900px) {
  .miscProj {
    width: 100%;
    margin-bottom: 1rem;
  }
  .githubButton {
    display: flex;
    flex-direction: column;  
    justify-content: space-evenly; 
  }
  .projDesc { 
    text-indent: 10px;
    margin-left: 5px;
  }
}  
@media screen and (max-width: 600px) {
  .miscProj {
    width: 100%;
  }
  .responsiveHeader {
    font-size: 80%;
  }
  .githubButton {
    display: flex;
    flex-direction: column;  
    justify-content: space-evenly;  
  }
  .projDesc { 
    text-indent: 10px;
    margin-left: 5px;
  }
}