@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

body {
  /* position: sticky; */

  /* background: #2b2217; */
  background: linear-gradient(180deg, #0a0f1b 0%, #201b14 100%);
  font-family: "Nunito Sans", sans-serif;
  height: 100%;
  margin: 0px 0px 64px 0px;
  padding: 0;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #c9beac;
  font-weight: 600;
  font-family: "Nunito";
}

h1 {
  font-size: 28px;
}

p {
  color: #f7f6ff;
  font-weight: 300;
}

hr {
  border-color: #ddcdb400;
  margin: 0px 128px 0px 128px;
}

nav a {
  text-decoration: none;
  font-size: 16px;
}

#intro-section {
  height: calc(95vh);
  border: 0.25px solid #75757575;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #00000060;
  box-shadow: 0px 4px 12px 0px #ffffff25;
  border-radius: 12px 12px 12px 12px;
  margin: 24px 12px 64px 12px;
}
@media (max-width: 650px) {
  #intro-section {
    height: calc(98vh);
  }
}

#intro-subsection {
  text-align: center;
  margin: 8px;
}

#intro-section h1 {
  font-weight: 700;
  font-size: 40px;
  margin: 12px 0px 12px 0px;
}

#intro-section p {
  font-weight: 200;
}

@media (max-width: 650px) {
  #intro-section h1 {
    font-size: 32px;
    flex-direction: column;
  }
}

#intro-section p {
  font-size: 20px;
  margin: 0;
  padding: 0;
  padding-bottom: 20px;
}

#intro-section a {
  text-decoration: none;
}

#intro-skills-section img {
  width: 40px;
  margin: 8px;
  transition-duration: 0.2s;
}

#intro-skills-section img:hover {
  width: 40px;
  opacity: 0.6;
}

#inrtro-skills-section a {
  text-decoration: none;
}

#projects-section,
#skills-section {
  margin: 0px 16px 64px 16px;
  border: 0.25px solid #75757575;
  padding: 02px 16px 24px 12px;
  border-radius: 12px;
  background: #00000060;
  box-shadow: 0px 0px 12px 10px #84848425;
}
@media (max-width: 650px) {
  #projects-section,
  #skills-section {
    margin: 24px 20px 24px 20px;
  }
  #intro-section {
    margin: 0px 20px 64px 20px;
  }
}

#projects-section a {
  text-decoration: none;
  transition-duration: 0.25s;
}

#projects-section a:hover {
  text-decoration: none;
  opacity: 0.75;
}

#projects-section-header {
  padding: 0px 12px 0px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 650px) {
  #projects-section-header h1,
  #skills-section-header {
    font-size: 20px;
  }
  #projects-section-header h3,
  .skills-section-subheader h3 {
    font-size: 16px;
    font-weight: 400;
  }
}

#projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
  align-items: top;
}
@media (max-width: 650px) {
  #projects-list {
    flex-direction: column;
  }
}

.project-item {
  background-color: #30303050;
  border: 0.25px solid #75757575;
  box-shadow: 0px 0px 8px 0px #84848425;
  border-radius: 8px;
  padding: 8px 4px 4px 12px;
  margin: 4px 20px 24px 12px;
}

.project-item-header {
  display: flex;
  justify-content: space-between;
}

.project-item-header img {
  padding: 0px 16px 0px 0px;
}

.project-item-header h2,
.project-item-header h3 {
  margin: 0px 2px 0px 0px;
}
@media (max-width: 650px) {
  .project-item-header h2 {
    font-size: 18px;
  }
  .project-item-header h3 {
    font-size: 16px;
  }
}
.project-item-subheader {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.project-description {
  margin: 12px 12px 12px 4px;
}

.project-year {
  text-wrap: none;
  color: #888b8f;
  font-size: 20px;
  margin: 0px 4px;
}

#moneyrush {
  color: #82baa4;
}

@media (max-width: 650px) {
  #skills-section {
    margin: 0px 12px 0px 12px;
  }
}

.skills-section-subheader {
  margin: 0px 0px -12px 0px;
}

.skills-section-subheader h3 {
  margin: -4px 8px 20px 2px;
  font-weight: 400;
}

.skills-list {
  display: flex;
  padding: 0px 0px 12px 0px;
  margin: 0px 0px 128px 0px; /* to modify when adding more content*/
}
@media (max-width: 650px) {
  .skills-list {
    flex-direction: column;
  }
}

.skill-item {
  display: flex;
  width: 200px;
  align-items: center;
  margin: 0px 12px 12px 12px;
}

.skills-list {
  flex-wrap: wrap;
  margin: -8px 0px 0px 0px;
}

.skills-list img {
  width: 36px;
  padding: 0px;
  margin: 0px 8px 0px 12px;
}

.skill-text {
  margin: 0px 0px 0px 0px;
  display: flex;
  flex-direction: column;
}

.skill-text h3 {
  margin: 0px 0px 0px 0px;
}

.skill-text p {
  color: #cccccc;
  font-weight: 200;
  font-size: 16px;
  margin: 0;
}

#skill-text-js {
  color: #fdd642;
}

#skill-text-html {
  color: #f96c45;
}

#skill-text-css {
  color: #397dc1;
}

#skill-text-react {
  color: #6cdaf8;
}

#skill-text-swift {
  color: #f95833;
}

#skill-text-python {
  color: #448cc8;
}