@import url("https://fonts.googleapis.com/css2?family=Outfit&display=swap");
* {
  color: #fff;
  font-family: Roboto, sans-serif;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.section {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}
.section .sectionContainer {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  height: 100%;
}
.section .fullSizeContainer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.darkSection {
  background-color: #2f2e41;
}

.lightSection {
  background-color: #787780;
}

.sectionTitle {
  font-size: 1.5rem;
  margin: 0 auto 0.625rem;
  text-align: center;
}

.sectionSub {
  font-size: 1.25rem;
  margin: 0 auto 0.625rem;
  text-align: center;
}

nav {
  display: flex;
  margin: 0 0 1.25rem;
  position: relative;
  width: 100% !important;
}
nav .brand {
  display: flex;
  margin: 0 auto 0 0;
  width: -moz-fit-content;
  width: fit-content;
}
nav .brand img {
  margin: auto 1.25rem auto 0;
  width: 3.125rem;
  height: 3.125rem;
}
nav .brand h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: auto 0;
  padding: 0;
}
nav .navLinks {
  display: none;
  margin: auto 0;
}
nav .navLinks a {
  font-size: 1.25rem;
}
nav .navLinks a:not(:last-child) {
  margin-right: 1.25rem;
}
nav .navLinks a:hover {
  text-decoration: underline;
}
nav .resNavLinks {
  background-color: #2f2e41;
  border-right: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  border-left: 0.125rem solid #fff;
  display: flex;
  flex-direction: column;
  padding: 0.3125rem 0.625rem;
  position: absolute;
  right: 0;
  top: 100%;
}
nav .resNavLinks a {
  font-size: 1.25rem;
}
nav .resNavLinks a:not(:last-child) {
  margin-bottom: 1.25rem;
}
nav .resNavLinks a:hover {
  text-decoration: underline;
}
nav .resNavIcons {
  margin: auto 0;
}

#home {
  padding-bottom: 1.25rem;
}
#home .sectionContainer {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 1.25rem);
}

.homeIntro {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 100%;
}
.homeIntro .introGraphic {
  display: flex;
  margin: 0 auto 1.25rem;
  width: 100%;
}
.homeIntro .introGraphic img {
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  min-width: 250px;
}
.homeIntro .introMessage {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.homeIntro .introMessage div {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.homeIntro .introMessage div:not(:last-child) {
  margin-bottom: 1.25rem;
}
.homeIntro .introMessage .greeting h2 {
  font-size: 1.5rem;
}
.homeIntro .introMessage .greeting h1 {
  font-size: 2.25rem;
  font-weight: bold;
}
.homeIntro .introMessage .aboutMe {
  display: flex;
  flex-direction: column;
}
.homeIntro .introMessage .aboutMe p {
  margin: 0 0 1.25rem 0;
}
.homeIntro .introMessage .aboutMe .callToAction {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.homeIntro .introMessage .aboutMe .callToAction a {
  font-weight: bold;
  margin: 0;
  padding: 0.3125rem 0.625rem;
  text-align: center;
  width: 100%;
}
.homeIntro .introMessage .aboutMe .callToAction a:first-child {
  border: 0.125rem solid #fff;
  border-radius: 0.3125rem;
  margin-bottom: 1.25rem;
}
.homeIntro .introMessage .aboutMe .callToAction a:first-child:hover {
  background-color: #fff;
  color: #2f2e41;
}
.homeIntro .introMessage .aboutMe .callToAction a:last-child {
  border-top: 0.125rem solid transparent;
  border-left: 0.125rem solid transparent;
  border-bottom: 0.125rem solid #fff;
  border-right: 0.125rem solid transparent;
}
.homeIntro .introMessage .aboutMe .callToAction a:last-child:hover {
  border: 0.125rem solid #fff;
  border-radius: 0.3125rem;
}

#projects {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
#projects .sectionContainer {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2.5rem);
}
#projects .slider {
  margin: auto 0;
  width: 100%;
}
#projects .slider button {
  opacity: 1;
  width: -moz-fit-content;
  width: fit-content;
}
#projects .slider button img {
  width: 1.25rem;
}
#projects .slider button .prevProject {
  transform: rotate(180deg);
}
#projects .slider .carousel-inner {
  margin: 0 auto;
  width: calc(100% - 3rem);
}

.projectItem .project {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 0.3125rem;
  width: 100%;
}
.projectItem .project .projectDetails {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem 0;
  width: 100%;
}
.projectItem .project .projectDetails h3 {
  margin: 0;
  text-decoration: underline;
}
.projectItem .project .projectDetails .techStack {
  display: flex;
  flex-direction: row;
  margin: 1.25rem 0;
}
.projectItem .project .projectDetails .techStack span {
  background-color: #fff;
  border-radius: 0.3125rem;
  color: #2f2e41;
  padding: 0.3125rem 0.625rem;
}
.projectItem .project .projectDetails .techStack span:not(:first-child) {
  margin-left: 0.625rem;
}
.projectItem .project .projectDetails .projectDescription {
  margin: 0 0 1.25rem 0;
  min-height: 200px;
}
.projectItem .project .projectDetails a {
  border-top: 0.125rem solid rgba(0, 0, 0, 0);
  border-right: 0.125rem solid rgba(0, 0, 0, 0);
  border-bottom: 0.125rem solid rgba(0, 0, 0, 0);
  border-left: 0.125rem solid #fff;
  font-weight: bold;
  margin: 0 auto 0 0;
  padding: 0.3125rem 0.625rem;
  transition: 0.1s ease-in-out;
}
.projectItem .project .projectDetails a:hover {
  background-color: #fff;
  border: 0.125rem solid #fff;
  border-radius: 0.3125rem;
  color: #2f2e41;
}
.projectItem .project .projectImage {
  display: flex;
  width: 100%;
}
.projectItem .project .projectImage img {
  border-radius: 0.3125rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  min-width: 250px;
}

#contact .sectionContainer {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 2.125rem);
}

.contactFormAndMedia {
  border: 0.125rem solid #fff;
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0.3125rem 0.3125rem 0.25rem rgba(0, 0, 0, 0.25));
  margin: 0 auto !important;
  width: 100%;
}
.contactFormAndMedia .contactMedia,
.contactFormAndMedia .contactForm {
  width: 100%;
}

.contactMedia {
  background-color: #2f2e41;
  border-radius: 0.625rem 0.625rem 0 0;
  display: flex;
}
.contactMedia .container {
  display: flex;
  flex-direction: column;
  margin: 1.25rem auto;
  padding: 0;
  width: -moz-fit-content;
  width: fit-content;
}
.contactMedia .container p {
  margin: 0;
  padding: 0;
}
.contactMedia .container p:not(:first-child) {
  margin-top: 1.25rem;
}
.contactMedia .container p:last-child {
  text-align: center;
}
.contactMedia .container .socialMedia {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 1.25rem auto 0;
  width: 100%;
}
.contactMedia .container .socialMedia a {
  display: flex;
  margin: 0;
  padding: 0;
}
.contactMedia .container .socialMedia a i {
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

.contactForm {
  background-color: #787780;
  border-radius: 0 0 0.625rem 0.625rem;
  display: flex;
  padding: 0 1.25rem;
}
.contactForm form {
  display: flex;
  flex-direction: column;
  margin: 1.25rem auto;
}
.contactForm form .inputDiv {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem;
}
.contactForm form .inputDiv label {
  margin: 0 0 0.625rem;
}
.contactForm form .inputDiv input,
.contactForm form .inputDiv textarea {
  border: none;
  border-radius: 0.3125rem;
  color: #000;
  margin: 0;
  padding: 0 0.625rem;
  width: 100%;
}
.contactForm form .inputDiv input:focus,
.contactForm form .inputDiv textarea:focus {
  filter: drop-shadow(0.3125rem 0.3125rem 0.25rem rgba(0, 0, 0, 0.25));
  outline: 0.125rem solid #2f2e41;
}
.contactForm form button {
  background: none;
  border: 0.25rem solid #fff;
  border-radius: 0.625rem;
  font-weight: bold;
  margin: 0 auto;
  padding: 0.3125rem 0.625rem;
  transition: 0.1s ease-in-out;
  width: 30%;
}
.contactForm form button:hover {
  background-color: #fff;
  color: #000;
}

footer {
  background-color: #000;
  display: flex;
  min-height: 2.125rem;
  margin: auto 0 0;
  padding: 0.3125rem 0;
  width: 100%;
}
footer p {
  margin: auto;
  text-align: center;
}

@media (max-width: 760px) {
  .techStack span {
    padding: 0.3125rem !important;
  }
  .techStack span:first-child {
    border-radius: 0.3125rem 0 0 0.3125rem !important;
  }
  .techStack span:not(:first-child) {
    border-left: 0.125rem solid #787780;
    border-radius: 0 !important;
    margin-left: 0 !important;
  }
  .techStack span:last-child {
    border-radius: 0 0.3125rem 0.3125rem 0 !important;
  }
  .contactFormAndMedia {
    margin: 0 auto !important;
  }
}
@media (min-width: 760px) {
  nav .navLinks {
    display: flex;
  }
  nav .resNavIcons,
  nav .resNavLinks {
    display: none;
  }
  .homeIntro .introMessage,
  .homeIntro .introGraphic {
    margin-right: auto;
    margin-left: auto;
    width: 50% !important;
  }
  .slider button img {
    width: 1.5rem !important;
  }
  .slider button:first-child {
    margin-right: 0.625rem !important;
  }
  .slider button:last-child {
    margin-left: 0.625rem !important;
  }
}
@media (min-width: 1000px) {
  .contactFormAndMedia {
    width: 50vw;
  }
}
@media (min-width: 1260px) {
  .homeIntro {
    flex-direction: row-reverse;
    margin: auto !important;
  }
  .homeIntro .introMessage,
  .homeIntro .introGraphic {
    width: 50%;
  }
  .homeIntro .introMessage {
    margin: auto 1.25rem auto 0;
  }
  .homeIntro .introMessage .aboutMe .callToAction {
    margin: 0 auto 0 0;
  }
  .homeIntro .introGraphic {
    margin: auto !important;
  }
  .slider button:first-child {
    margin-right: 0.625rem !important;
  }
  .slider button:last-child {
    margin-left: 0.625rem !important;
  }
  .project {
    width: 85% !important;
  }
}
@media (min-width: 1400px) {
  .slider button img {
    width: 2.5rem !important;
  }
  .projectItem .project {
    flex-direction: row !important;
  }
  .projectItem .project .projectDetails {
    margin: 0 1.25rem 0 0;
    width: 35% !important;
  }
  .projectItem .project .projectImage {
    margin: 0 auto;
    width: 65% !important;
  }
  .projectItem .project .projectImage img {
    -o-object-fit: contain !important;
       object-fit: contain !important;
    -o-object-position: center !important;
       object-position: center !important;
    width: 100% !important;
  }
  .contactFormAndMedia {
    flex-direction: row !important;
    margin: auto !important;
    width: 50vw !important;
  }
  .contactFormAndMedia .contactMedia,
  .contactFormAndMedia .contactForm {
    width: 50% !important;
  }
  .contactFormAndMedia .contactMedia {
    border-radius: 0.625rem 0 0 0.625rem;
  }
  .contactFormAndMedia .contactMedia .container {
    margin: auto !important;
  }
  .contactFormAndMedia .contactForm {
    border-radius: 0 0.625rem 0.625rem 0;
  }
}/*# sourceMappingURL=style.css.map */