body, html {
  width: 100%;
  height: 100%; }

body {
  padding-top: 0;
  padding-left: 0;
  text-align: center;
  font-family: 'Bitter', monospace; }

.navbar-default, .navbar {
  height: 65px;
  background: rgba(50, 50, 50, 0);
  font-size: 1.5em;
  padding: 10px 32px;
  margin-bottom: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none; }
  .navbar-default .navbar-collapse, .navbar .navbar-collapse {
    margin-left: 0; }
    .navbar-default .navbar-collapse .pdLink, .navbar .navbar-collapse .pdLink {
      color: #aaa;
      margin: 0; }
    .navbar-default .navbar-collapse .pdLink:hover, .navbar .navbar-collapse .pdLink:hover {
      background: rgba(50, 50, 50, 0.1);
      border-radius: 8px; }

.navbar-default:hover {
  background-color: rgba(50, 50, 50, 0.1); }

@keyframes slideInFromLeft {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0); } }
@keyframes nameBox {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.openingContainer {
  display: flex;
  justify-content: center;
  height: 700px;
  padding-top: 150px;
  background-image: url("./images/golf.png");
  background-size: cover; }
  .openingContainer .nameBox {
    animation: 1.5s ease-out 0s 1 slideInFromLeft; }
    .openingContainer .nameBox #myName {
      animation: 5s ease-out 0s nameBox;
      font-family: monospace;
      font-size: 55px;
      color: rgba(80, 80, 80, 0.8); }

.aboutContainer {
  background-color: #ececec;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 50px 0 50px 0; }
  .aboutContainer .aboutPara {
    width: 35%;
    font-size: 17px;
    color: #12646f; }
  .aboutContainer .resume {
    color: #12646f;
    text-decoration: underline; }
  .aboutContainer .resume:hover {
    color: #53b0bd;
    cursor: pointer; }
  .aboutContainer .mePic {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center; }
    .aboutContainer .mePic #profileImg {
      width: 250px;
      border: 2px solid #53b0bd; }
    .aboutContainer .mePic #profileImg2 {
      width: 245px;
      display: none;
      border: 2px solid #53b0bd; }
  .aboutContainer .linkContainer {
    width: 20%;
    padding-left: none; }
    .aboutContainer .linkContainer .fa-linkedin-square {
      color: #007bb6; }
    .aboutContainer .linkContainer .fa-linkedin-square:hover {
      color: #33bdda; }
    .aboutContainer .linkContainer .fa-free-code-camp {
      color: #09b609; }
    .aboutContainer .linkContainer .fa-free-code-camp:hover {
      color: #3ada3a; }
    .aboutContainer .linkContainer .fa-github {
      color: #444; }
    .aboutContainer .linkContainer .fa-github:hover {
      color: #888; }
  @media screen and (max-width: 852px) {
    .aboutContainer .aboutPara {
      width: 100%; }
    .aboutContainer .mePic {
      width: 40%; }
    .aboutContainer .linkContainer {
      width: 40%; } }
  @media screen and (max-width: 600px) {
    .aboutContainer .aboutPara {
      width: 90%;
      margin-bottom: 20px; }
    .aboutContainer .mePic {
      width: 90%;
      margin-bottom: 20px; }
    .aboutContainer .linkContainer {
      width: 90%;
      margin-bottom: 20px; } }

.techContainer {
  padding: 30px 0 30px 0;
  background-color: #12646f; }
  .techContainer h3 {
    margin-bottom: 30px;
    text-decoration: underline;
    color: #53b0bd; }
  .techContainer .iconCont {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; }
    .techContainer .iconCont #bootstrap {
      color: #997aff; }
    .techContainer .iconCont #nodejs {
      font-size: 70px; }
    .techContainer .iconCont #jQuery {
      color: white; }
    .techContainer .iconCont i {
      width: 12%;
      font-size: 50px;
      padding-bottom: 35px; }
    @media screen and (max-width: 852px) {
      .techContainer .iconCont i {
        width: 20%; } }
    @media screen and (max-width: 600px) {
      .techContainer .iconCont i {
        width: 25%; } }

.projCont {
  margin-top: 0;
  padding: 40px 0 40px 0;
  background-color: #fbfbfb;
  color: #12646f; }
  .projCont h3 {
    text-decoration: underline; }
  .projCont .projectsContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; }
    .projCont .projectsContainer .project {
      width: 260px;
      height: 260px;
      margin: 5px;
      margin-bottom: 50px; }
      .projCont .projectsContainer .project .projLink {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px; }
        .projCont .projectsContainer .project .projLink img {
          max-width: 260px;
          max-height: 260px;
          border: 3px solid #53b0bd;
          border-radius: 8px; }
        .projCont .projectsContainer .project .projLink .projTechs {
          max-width: 260px;
          height: 50px;
          border-right: 3px solid #53b0bd;
          border-left: 3px solid #53b0bd;
          border-bottom: 3px solid #53b0bd;
          padding-top: 5px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          position: relative;
          bottom: 50px;
          right: 0;
          background-color: rgba(210, 210, 210, 0.9);
          font-size: 0.9em;
          color: #12646f; }
        .projCont .projectsContainer .project .projLink .projTechs:hover {
          text-decoration: none; }
      .projCont .projectsContainer .project .projLink a:hover {
        text-decoration: none; }

.certContainer {
  background-color: #ececec;
  padding: 30px 0 30px 0; }
  .certContainer h3 {
    text-decoration: underline; }
  .certContainer .certName {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    flex-wrap: wrap;
    color: #53b0bd; }
  @media (max-width: 600px) {
    .certContainer .certName h4 {
      width: 100%; } }
  .certContainer .certs {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4); }
    .certContainer .certs .popUpFccFE {
      background-color: #53b0bd;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; }
      .certContainer .certs .popUpFccFE .exit {
        color: #53b0bd;
        float: right;
        font-size: 28px;
        font-weight: bold; }
    .certContainer .certs .popUpFccDV {
      background-color: #53b0bd;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; }
      .certContainer .certs .popUpFccDV .exit {
        color: #53b0bd;
        float: right;
        font-size: 28px;
        font-weight: bold; }
    .certContainer .certs .popUpUDBoot {
      background-color: #53b0bd;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; }
      .certContainer .certs .popUpUDBoot .exit {
        color: #53b0bd;
        float: right;
        font-size: 28px;
        font-weight: bold; }
    .certContainer .certs .popUpStanford {
      background-color: #53b0bd;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; }
      .certContainer .certs .popUpStanford .exit {
        color: #53b0bd;
        float: right;
        font-size: 28px;
        font-weight: bold; }
    .certContainer .certs img {
      max-width: 500px;
      max-height: 500px; }
    @media (max-width: 600px) {
      .certContainer .certs .popUpFccFE, .certContainer .certs .popUpStanford, .certContainer .certs .popUpFccDV, .certContainer .certs .popUpUDBoot {
        margin: 15% 0;
        padding: 10px;
        width: 100%; }
        .certContainer .certs .popUpFccFE .exit, .certContainer .certs .popUpStanford .exit, .certContainer .certs .popUpFccDV .exit, .certContainer .certs .popUpUDBoot .exit {
          display: none; }
      .certContainer .certs img {
        max-width: 300px;
        max-height: 300px; } }

.contactContainer {
  padding: 30px 0 30px 0;
  background-color: #53b0bd;
  color: #12646f; }
  .contactContainer h3 {
    text-decoration: underline; }

/*# sourceMappingURL=main.css.map */