/* Dark Mode */

body.dark {
  background-color: #17182f;
  color: #f4e4c1;
}

body.dark .section--about {
  background-color: #171724;
  color: #ffffff;
}

body.dark .section--skills {
  background-color: #f8dbab;
  color: black;
}
body.dark .section--experience {
  background-color: #f8dbab;
  color: black;
}
body.dark .section--education {
  background-color: #f8dbab;
  color: black;
}
body.dark .section--contacts {
  background-color: #f8dbab;
  color: black;
}
body.dark footer {
  background: #f1dac4;
  color: black;
}

@font-face {
  font-family: "Cabinet";
  src: url("../assets/fonts/CabinetGrotesk-Regular.otf");
  font-display: swap;
}

@font-face {
  font-family: "Cabinet-Bold";
  src: url("../assets/fonts/CabinetGrotesk-Bold.otf");
  font-display: swap;
}

.contact-form__feedback {
  font-size: larger;
  font-style: italic;
}
.contact-form_box-hidden {
  display: none;
}

.nav__toggle:hover {
  opacity: 60%;
}

.degree-card__location {
  margin-top: 0;
}

.degree-card__dates {
  margin-top: 0;
  margin-bottom: 0;
}

.degree-card__degree {
  margin-top: 0;
  margin-bottom: 0;
}

.degree-card__title {
  margin-bottom: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  max-width: 400px;
}

.contact-form_box {
  margin-bottom: auto;
}

.contact-form__title {
  font-family: "Cabinet Bold";
  margin: 0 0 8px 0;
}

.project-card__description {
  margin-top: 4px;
  max-width: 231px;
  height: 54px;
}

.scroll_up {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: #0f1233;
  color: #f4e4c1;
  font-size: 24px;
  cursor: pointer;
  display: none;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* background-image: url("../assets/up.svg"); */
}

.scroll_up-icon {
  height: 100%;
  width: 100%;
}

.scroll_up-visible {
  display: block;
}

.project-card__title-icon {
  width: 20px;
  height: 20px;
}

.project-card__title-icon:hover {
  opacity: 70%;
}

.about__box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.degree--card_icon {
  margin-right: 20px;
}
.about__icon {
  height: 250px;
  width: 250px;
}

.header__home-link {
  display: flex;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

.degree--card_descriptor {
  display: flex;
}

.project-card__title-box {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

body {
  display: grid;
  /* grid-template-areas: "header" "nav" "main" "footer"; */
  /* grid-template-rows: auto auto 1fr auto; */
  grid-template-rows: auto auto 1fr auto;
  max-width: 1360px;
  min-height: 100vh;
  margin: 0 auto;
  border: 2px solid gainsboro;
  font-family: "Cabinet";
  background-color: rgb(244, 244, 244);
  /* padding-left: 35px;
  padding-right: 35px; */
}

main {
  display: grid;
  gap: 21px;
  margin-bottom: 25px;
  /* align-content: start; */
}

header {
  display: flex;
  align-items: baseline;
}

/* .header__menu-mobile {
    display: none;
  } */

.modal {
  /* display: none; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  justify-content: center;
  align-items: flex-start;
  /* padding: 10px; */
  /* padding-top: 36px; */
  padding-top: 107px;
  display: flex;
  justify-content: center;
  display: none;
}

.modal_is_open {
  display: flex;
}

.modal__content {
  background: white;
  /* width: 90%; */
  width: 73%;
  height: 64%;
  max-width: 360px;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal__link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: black;
  font-size: 27px;
  font-weight: bold;
}

.modal__item {
  display: flex;
  align-items: center;
}

.modal__title {
  font-family: "Cabinet-Bold";
  font-size: 28px;
  margin: 0;
}

.modal__close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}
.modal__close:hover {
  opacity: 20%;
}

.modal__icon {
  width: 28px;
  height: 28px;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__theme-toggle {
  background: none;
  border: none;
  align-self: center;
  margin-top: 1rem;
  cursor: pointer;
}

.header__logo {
  font-weight: bold;
  font-family: "Cabinet-Bold";
  font-size: 56px;
  margin-bottom: 2px;
  margin-top: 33px;
  margin-right: auto;
}

/* Mobile resolution */
.header__menu-mobile {
  /* border: solid red; */
  border: none;
  background: transparent;
}

.skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}

.skill-card__box {
  /* max-width: 240px; */
  /* max-width: 240px; */
  min-height: 63px;
  border: 2px solid beige;
  background-color: HSL(39, 100%, 97%);
  display: flex;
  gap: 10px;
  align-items: center;
  /* flex-direction: column; */
}

.skill-card__icon {
  width: 45px;
  height: 45px;
  margin-right: 12px;
}

.skill__box-icon-container {
  display: flex;
  justify-content: end;
}

/* .skill-card__title { */
/* width: 240px;
  height: 63px; */
/* } */

/* .section--skills .section__title {
  grid-column: 1 /-1;
} */

.skill-card__item {
  /* border: 2px solid red; */
  display: flex;
  align-items: center;
}

.header__logo-icon {
  height: 35px;
  width: 35px;
  margin-top: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.section {
  /* border: 3px solid red; */
  padding: 1rem;
  /* max-height: 600px;
  overflow: hidden; */
}

.project-card {
  margin-bottom: 17px;
  margin-right: 51px;
}

.project-card__tag {
  margin-bottom: 0px;
}

.project-card__title {
  margin-bottom: 0;
}

.project-card__title.neu {
  margin-top: 42px;
  font-size: 15px;
  margin-bottom: 8px;
  width: 195px;
  /* border: solid red; */
}

.section--about {
  background-color: rgb(171, 171, 171);
}

.section--skills {
  background-color: rgb(232, 233, 237);
}

.section--experience {
  background-color: rgb(232, 233, 237);
}

.section--education {
  background-color: rgb(232, 233, 237);
}

.section--contacts {
  background-color: rgb(232, 233, 237);
}

.contact-list__box {
  display: flex;
  flex-direction: column;
  height: 90%;
}

.section__title {
  /* font-family: "Cabinet-Bold"; */
  font-family: "Cabinet";
  font-size: 51px;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 262px;
}

/* .skill-card__list {
  list-style: none;
  margin-top: 8px;
} */

.skill-card__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  margin-top: 8px;
}

.skill-card__title {
  /* font-size: 20px; */
  font-size: 17px;
  /* border: 2px solid red; */
  /* gap: 2px; */
  margin-right: auto;
  /* margin-left: 31px; */
}

.skill__box-nut {
  display: none;
}

.experience__box-cv {
  display: none;
}

.education__box-icon {
  display: none;
}
.contact-list__box-icon {
  display: none;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr;
}

nav {
  /* grid-area: nav; */
  display: flex;
  /* border: 2px solid red; */
  justify-content: space-between;
  height: 50px;
  background-color: #f2eada;
  border: 2px solid rgb(120, 117, 110);
  margin-bottom: 17px;
  display: none;
}

.nav__toggle {
  /* width: 41px; */
  width: 36px;
  background-image: url("../assets/day_night.svg");
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-color: transparent;
  background-size: contain;
}

.nav__list {
  list-style: none;
  display: flex;
  /* border: 3px solid purple; */
  /* border: 2px solid rgb(120, 117, 110); */
  /* gap: 1rem; */
  padding: 0;
  max-width: 800px;
  margin: 0;
  width: 80%;
  align-items: center;
  /* padding: 1px; */
}

.nav__item {
  border: solid 1.5px black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none;
  border-top: none;
  border-bottom: none;
  height: 100%;
  max-width: 127px;
  padding-left: 24px;
  padding-right: 24px;
  /* margin-left: 24px;
  margin-right: 24px; */
}

.nav__item:hover {
  background: #d89c9c;
}

.nav__link {
  /* font-weight: bold; */
  letter-spacing: 2px;
  color: black;
  font-weight: bold;
}

a {
  text-decoration: none;
}
.contact-list {
  display: flex;
  list-style: none;
  gap: 20px;
  padding: 0;
  margin: 0;
  /* margin-bottom: auto; */
}

.contact-list__item-icon {
  height: 45px;
  width: 45px;
}

footer {
  /* border: 2px solid red; */
  display: flex;
  justify-content: center;
}

/* @media (max-width: 415px) {
  .nav__item {
    padding-left: 5px;
    padding-right: 5px;
  }
} */

@media (max-width: 534px) {
  /* .header__menu-mobile {
    display: none;
  }

  nav {
    display: flex;
  } */

  .nav__item {
    padding-left: 5px;
    padding-right: 5px;
  }

  body {
    padding-right: 0;
    padding-left: 0;
    border: 1px solid gainsboro;
  }

  .skill-card__item-icon {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  .nav__link {
    font-weight: normal;
    letter-spacing: 0;
  }

  footer {
    background: #e8e9ee;
  }

  /* .skill__box-nut {
    display: block;
  } */
}

/* @media screen and (min-width: 521px) {
  .skill-grid {
    justify-items: center;
  }
  .skill-card__box {
    width: 240px;
  }
} */

/* @media screen and (min-width: 768px){ */
@media screen and (min-width: 744px) {
  nav {
    display: flex;
  }

  .header__menu-mobile {
    display: none;
  }

  body {
    padding-right: 0;
    padding-left: 0;
    /* border: solid purple; */
  }

  .project-card {
    /* margin-bottom: 17px; */
    margin-right: 0;
  }

  .skill-card__box {
    max-width: 180px;
  }

  /* Ensuring that these icons turn back once we exit mobile mode */
  .skill__box-nut {
    display: block;
  }

  .experience__box-cv {
    display: block;
  }

  .education__box-icon {
    display: block;
  }
  .contact-list__box-icon {
    display: block;
  }

  .skill-card__item-icon {
    width: 15px;
    height: 15px;
    /* margin-right: 4px; */
  }

  main {
    grid-template-columns: 1fr 1fr;
  }

  footer {
    background: #e8e9ee;
  }

  .section--about {
    grid-column: 1 /-1;
  }
  .skill-grid {
    grid-template-columns: 1fr 1fr;
  }

  .experience-grid {
    grid-template-columns: 1fr 1fr;
  }

  .experience__box-icon-container {
    display: flex;
    justify-content: end;
  }

  .education__box-icon-container {
    display: flex;
    justify-content: end;
  }

  .contact-list__box-icon-container {
    display: flex;
    justify-content: end;
  }

  .skill-card__box {
    width: 240px;
    min-height: 63px;
    border: 2px solid beige;
    background-color: HSL(39, 100%, 97%);
  }

  .about__box {
    display: block;
  }
}

@media (min-width: 1200px) {
  /* Resetting the view for Desktop */

  .header__menu-mobile {
    display: none;
  }

  body {
    padding-right: 35px;
    padding-left: 35px;
    padding-bottom: 24px;
    border: none;
  }

  main {
    grid-template-columns: 1fr;
    /* width: 100%; */
  }

  .skill__box {
    display: flex;
  }

  .skill-card__box {
    max-width: 240px;
  }

  .skill__box-nut {
    /* border: solid red; */
    margin-left: 43px;
    margin-top: -2px;
  }

  .skill-card__item {
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
  }

  .skill-card__item-icon {
    width: 26px;
    height: 26px;
  }

  /* .nav {
    width: 100%;
  } */

  /* footer {
    width: 100%;
  } */

  .nav__list {
    font-weight: bold;
  }

  .nav__toggle {
    width: 40px;
  }

  .section--about {
    grid-column: auto;
  }

  .wtwr {
    margin-left: 21px;
  }

  .skill-grid {
    grid-template-columns: repeat(4, 1fr);
    /* border: 2px solid blue; */
    /* width: 77%; */
    width: 81%;
  }

  .experience-grid {
    grid-template-columns: 1fr 1fr;
    margin-right: auto;
    margin-right: auto;
  }

  .about__box {
    display: flex;
  }
  .about__bio {
    width: 401px;
  }

  .about__icon {
    width: 167px;
    height: 167px;
    margin-right: 8px;
  }

  .experience__box {
    display: flex;
  }

  .experience_test {
    margin-right: auto;
  }

  .experience__box-cv {
    /* border: solid red; */
    margin-bottom: auto;
    margin-top: 17px;
    /* margin-right: -2px; */
  }

  .education__box {
    display: flex;
  }

  .education__box-icon {
    /* border: solid red; */
    margin-bottom: auto;
    margin-top: 17px;
    margin-right: -2px;
  }

  .education__box-cards {
    margin-right: auto;
  }

  .contact-list__box {
    display: flex;
    height: 67%;
  }

  .contact-list {
    margin-right: auto;
  }

  .about__box {
    /* display: block; */
    display: flex;
    flex-direction: row;
  }
}