.nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  flex-wrap: nowrap;
  padding: 0.5rem;
  background-color: rgb(40, 39, 37);
  border-radius: 1rem;
  margin-top: 1rem;
}
.nav #seperator {
  width: 80%;
  background-color: rgb(72, 70, 66);
  margin-bottom: 0.25rem;
}
.nav .nav__name {
  color: white;
  font-size: 2rem;
  text-align: center;
  font-weight: 200;
  padding: 1rem;
}
.nav .nav__name .nav__name-alt {
  display: inline-block;
  color: rgb(212, 187, 121);
}
.nav .nav__name:hover {
  color: rgb(212, 187, 121);
}
.nav .nav__name:hover .nav__name-alt {
  color: white;
}
.nav .nav__name-alt:hover {
  color: white;
}
.nav .nav__name-alt:hover .nav__name {
  color: rgb(212, 187, 121);
}
.nav .nav__nav-links {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.nav .nav__nav-links .nav__nav-link {
  display: inline-block;
  position: relative;
  color: whitesmoke;
  padding: 0.5rem;
  font-size: 1rem;
}
.nav .nav__nav-links .nav__nav-link:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.nav .nav__nav-links .nav__nav-link:hover:after {
  width: 100%;
  left: 0;
}
.nav .nav__nav-links a:link {
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .nav {
    padding: 2rem 0rem 2rem;
    justify-content: space-between;
    flex-direction: row;
  }
  .nav #seperator {
    display: none;
  }
  .nav .nav__name {
    font-size: 2rem;
    color: white;
    font-weight: 200;
    display: inline-block;
    padding-left: 2rem;
  }
  .nav .nav__nav-links {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    right: 1px;
    padding-right: 2rem;
    margin: 0;
  }
  .nav .nav__nav-links .nav__nav-link {
    font-size: 1.5rem;
  }
}
.home .home__details {
  padding: 1rem 1.5rem;
}
.home .home__details #seperator {
  width: 20%;
  margin-top: 2rem;
  background-color: rgb(72, 70, 66);
}
.home .home__details .home__title {
  margin-top: 1rem;
  font-size: 4.5rem;
  font-weight: 400;
}
.home .home__details .home__description {
  padding: 1.5rem 0rem;
  margin-top: 1rem;
  font-family: "Inter", sans-serif;
  width: 100%;
  font-size: 1.25rem;
}

@media screen and (min-width: 768px) {
  .home .home__details .home__description {
    width: 60%;
  }
  .home .home__details .home__title {
    font-size: 8rem;
  }
}
.projects {
  background-color: rgb(40, 39, 37);
  padding: 2% 3% 2%;
  border-radius: 25px;
}
.projects .projects__title {
  padding-left: 1.5rem;
  padding-top: 1rem;
  font-size: 4rem;
  font-weight: 400;
}
.projects #seperator {
  width: 20%;
  background-color: rgb(72, 70, 66);
  margin-top: 1rem;
}
.projects .projects__grid {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  justify-items: center;
  align-items: start;
  margin-top: 3rem;
  width: 100%;
}
.projects .projects__grid .projects__grid-item {
  width: 100%;
  border-radius: 1rem;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
  transition: all 0.25s ease-in-out;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-image {
  width: 80%;
  height: 60%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.781rem;
  border: solid 0.25rem white;
  margin: 2% 8% 0%;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-title {
  font-size: 2rem;
  font-weight: 200;
  text-align: center;
  margin-top: 5%;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-skillTags {
  display: flex;
  flex-direction: column column column;
  grid-template-rows: row row;
  grid-template-columns: column column column;
  justify-content: center;
  align-items: center;
  padding-left: 8%;
  padding-top: 2%;
  margin-bottom: 5%;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-skillTags .projects__grid-item-skill {
  background-color: rgb(60, 51, 42);
  padding: 0.5rem;
  display: inline-block;
  border-radius: 7%;
  font-size: 0.9rem;
  margin-top: 0.4rem;
  margin-right: 0.2rem;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-skillTags .projects__grid-item-icons {
  display: flex;
  padding-top: 2.5%;
  gap: 0.3rem;
  justify-content: center;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-skillTags .projects__grid-item-icons .projects__grid-item-icon {
  color: white;
  margin-left: 0.156rem;
  border: solid white 0.01rem;
  border-radius: 1rem;
  padding: 0.5rem;
}
.projects .projects__grid .projects__grid-item .projects__grid-item-skillTags .projects__grid-item-icons .projects__grid-item-icon:hover {
  background-color: rgba(138, 138, 138, 0.754);
  transform: scale(1.1);
}
.projects .projects__grid .projects__grid-item:hover {
  transform: scale(1.075);
  box-shadow: 0 0 0.25rem rgb(74, 71, 66);
  background-color: rgb(74, 71, 66);
  color: white;
}

@media screen and (min-width: 768px) {
  .projects {
    padding: 2% 3.5% 4%;
  }
  .projects .projects__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    width: 100%;
  }
  .projects .projects__grid .projects__grid-item {
    width: 100%;
  }
  .projects .projects__grid .projects__grid-item .projects__grid-item-image {
    width: 85%;
  }
}
.about {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about #seperator {
  width: 20%;
  background-color: rgb(72, 70, 66);
  margin-bottom: 3%;
}
.about .about__details {
  display: inline-block;
  align-items: center;
  padding: 1rem 1.5rem;
}
.about .about__details .about__title {
  margin-bottom: 1rem;
  font-size: 3rem;
}
.about .about__details .about__description {
  font-family: "Inter", sans-serif;
}
.about .about__image {
  border: solid 0.35rem rgb(90, 79, 72);
  width: 35%;
  align-self: center;
  margin: 2rem;
  max-width: 30rem;
}
.about .about__image:hover {
  box-shadow: black 0 0 0.5rem;
  transform: scale(1.1);
  transition: ease-in-out 0.35s;
}
.about .about__grid {
  margin: 1rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.about .about__grid .about__dropsection {
  margin-bottom: 2rem;
}
.about .about__grid .about__dropsection .about__drop-title {
  margin-bottom: 1rem;
  font-size: 2rem;
}
.about .about__grid .about__dropsection .about__item {
  width: 100%;
}
.about .about__grid .about__dropsection .about__item:hover .about__item-span {
  background-color: rgb(105, 92, 83);
  transform: scaleX(1.025);
  transition: ease-in-out 0.25s;
}
.about .about__grid .about__dropsection .about__item-span {
  padding: 2rem;
  background: rgb(80, 64, 53);
  color: white;
  font-size: 1.2em;
  font-variant: small-caps;
  cursor: pointer;
  display: block;
}
.about .about__grid .about__dropsection .about__item-span:after {
  float: right;
  right: 10%;
  content: "+";
}
.about .about__grid .about__dropsection .about__item-expanded {
  clear: both;
  width: 80vw;
  height: 0;
  overflow: hidden;
  text-align: center;
  transition: height 0.4s ease;
  background-color: rgb(31, 28, 26);
}
.about .about__grid .about__dropsection .about__item-expanded li {
  padding: 2rem;
}
.about .about__grid .about__dropsection #about__item-check1 {
  position: absolute;
  opacity: 0;
  height: 0px;
}
.about .about__grid .about__dropsection #about__item-check1:checked + .about__item-expanded {
  height: 6rem;
}
.about .about__grid .about__dropsection #about__item-check2 {
  position: absolute;
  opacity: 0;
  height: 0px;
}
.about .about__grid .about__dropsection #about__item-check2:checked + .about__item-expanded {
  height: 6rem;
}
.about .about__grid .about__dropsection #about__item-check3 {
  position: absolute;
  opacity: 0;
  height: 0px;
}
.about .about__grid .about__dropsection #about__item-check3:checked + .about__item-expanded {
  height: 6rem;
}
.about .about__grid .about__dropsection #about__item-check4 {
  position: absolute;
  opacity: 0;
  height: 0px;
}
.about .about__grid .about__dropsection #about__item-check4:checked + .about__item-expanded {
  height: 8rem;
}
.about .about__grid .about__dropsection #about__item-check5 {
  position: absolute;
  opacity: 0;
  height: 0px;
}
.about .about__grid .about__dropsection #about__item-check5:checked + .about__item-expanded {
  height: 8rem;
}
.about .about__grid .about__dropsection #about__item-check6 {
  position: absolute;
  opacity: 0;
  height: 0px;
}
.about .about__grid .about__dropsection #about__item-check6:checked + .about__item-expanded {
  height: 6rem;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}
.contact .contact__title {
  font-size: 5rem;
  margin: 2rem 0rem 1rem;
  padding-bottom: 1rem;
  text-align: center;
  display: inline-block;
  position: relative;
}
.contact .contact__title:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 5rem;
  content: "";
  display: block;
  height: 0.125rem;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.5s ease 0s, left 0.5s ease 0s;
  width: 0;
}
.contact .contact__title:hover:after {
  width: 100%;
  left: 0;
}
.contact .contact__btn {
  background-color: rgb(39, 36, 31);
  color: whitesmoke;
  border: solid rgb(255, 209, 176);
  margin-bottom: 1.5rem;
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  font-family: "Cormorant", serif;
  font-size: 2rem;
  text-align: center;
  width: 10rem;
  text-decoration: none;
}
.contact .contact__btn:hover {
  background-color: rgb(95, 87, 73);
  transform: scale(1.1);
  transition: ease-in 0.25s;
}
.contact .contact__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-top: 2rem;
  gap: 1rem;
}
.contact .contact__icons a:visited {
  color: white;
}
.contact .contact__icons a:hover {
  transform: scale(1.2);
  transition: ease-in-out 0.1s;
}

.footer__bar {
  margin-top: 1rem;
  align-items: center;
}
.footer__bar .footer__copyright {
  margin-top: 5rem;
  margin-bottom: 2rem;
  padding: 3rem 0rem 3rem;
  text-align: center;
  position: relative;
  width: 85vw;
  border-radius: 1rem;
  background-color: rgb(40, 39, 37);
}

* {
  margin: 0;
  padding: 0;
}

html {
  background-color: rgb(44, 42, 40);
  scroll-behavior: smooth;
}

.page {
  color: whitesmoke;
  font-family: "Cormorant", serif;
}
.page .container {
  display: flex;
  flex-direction: column;
  background-color: rgb(44, 42, 40);
  width: auto;
  justify-content: center;
  align-items: center;
  padding-left: 6%;
  padding-right: 6%;
  margin-top: 1rem;
}/*# sourceMappingURL=style.css.map */