body, html {
  margin: 0;
  padding: 0;
  background-color: #FFF2D8;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
}

main {
  margin-top: 90px;
}

* {
  box-sizing: border-box;
}

/* ---------NavBar Styling--------- */

.navbar {
  background-color: #1E708A;
}

.navbar-brand {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;

}

.nav-link {
  color: #ffffff;
  margin: 10px;
  font-weight: 600;
  text-decoration: none;
}

.nav-link:hover, .navbar-brand:hover {
  text-decoration: underline #BCA37F 2px;
  color: rgba(255, 255, 255, 0.5);
  transition: all, 0.5s;
}

.nav-link:active, .navbar-brand:active {
  text-decoration: underline #bca37f 2px;
  color: #ffffff;
}


/* ---------About Page--------- */

.about {
  min-height: 100vh;
  max-width: 2100px;
  margin: 0 auto;
  scroll-margin-top: 100px;
}

.about_container {
  width: 90%;
  margin: 0 auto;
}

.about_container_parts {
  background-color: #EAD7BB;
  border: solid 2px #BCA37F;
  border-radius: 10px;
  margin: 0;
}

#name {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 700;
  margin: 10px 0 30px 0;
}

#skills {
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 600;
  margin: 10px 0 15px 0;
  color: #BCA37F;
}

.about_descript h3 {
  font-size: calc(1rem + 1.25vw);
  font-weight: 600;
}

.about_descript p {
  font-size: calc(1rem + 0.25vw);
  font-weight: 500;
  line-height: 1.5;
}

#github, #linkedin {
  width: calc(4rem + 0.5vw);
  height: calc(4rem + 0.5vw);
  color: #1E708A;
  margin-bottom: 5px;
}

#resume {
  font-size: calc(1rem + 0.5vw);
  text-align: center;
  margin: 5px;
  background-color: #1E708A;
  border: none;
}

#github:hover, #linkedin:hover {
  color: rgba(30, 112, 138, 0.5);
  transition: 0.5s;
}

#github:active, #linkedin:active {
  color: rgba(30, 112, 138, 1);
}

#resume:hover {
  background-color: rgba(30, 112, 138, 0.5);
  transition: all, 0.5s;
}

#resume:active {
  background-color: rgba(30, 112, 138, 1);
}

.photo {
  margin: 0 auto;
  max-width: 500px;
}

.photo img {
  border-radius: 50%;
  width: 100%;
  border: solid 2px #1E708A;
  margin: 10px auto;
}

/* ---------Project Page--------- */

.projects {
  max-width: 2100px;
  min-height: 100vh;
  margin: 0 auto;
  scroll-margin-top: 90px;
  margin-top: 200px;
}

.projects_container {
  width: 90%;
  margin: 100px auto 0 auto;
}

.projects_container h2 {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 700;
  margin: 10px 0 30px 0;
}

.project-title {
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 600;
  margin: 10px 0 15px 0;
  color: #BCA37F;
}

.project-title a:link, .project-title a:visited {
  color: rgba(30, 112, 138, 1);
}

.project-title a:hover {
  color: rgba(30, 112, 138, 0.5);
  transition: 0.5s;
}

.project-title a:active {
  color: rgba(30, 112, 138, 1);
}

.project_container_parts {
  background-color: #EAD7BB;
  border: solid 2px #BCA37F;
  border-radius: 10px;
  margin: 0 0 40px 0;
}

.project_descript_container{
  margin: 10px auto;
  font-weight: 500;
  line-height: 1.5;
  font-size: calc(1rem + 0.25vw);
}
.project-descript {
  margin: 10px auto;
}

.project-techstack {
  color: rgba(30, 112, 138, 1)
}

.project-demo {
  margin: auto;
  max-width: 2000px;
}

.project-demo img {
  width: 100%;
  margin: 10px auto;
  border-radius: 10px;
}

strong {
  font-weight: 800;
}

/* ---------Previous Career Page--------- */

.location {
  color: rgba(30, 112, 138, 1);
}

.project-pics {
  margin: 0 auto;
  max-width: 2000px;
}

.project-pics img {
  width: 100%;
  margin: 10px auto;
}

/* ---------Contact Page--------- */

.contact {
  max-width: 2100px;
  min-height: 100vh;
  margin: 0 auto;
  scroll-margin-top: 90px;
  margin-top: 200px;
}

.contact_container {
  width: 90%;
  margin: 100px auto 0 auto;
}

.contact_container>h2 {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 700;
  margin: 10px 0 30px 0;
}

.contact_container_parts {
  background-color: #EAD7BB;
  border: solid 2px #BCA37F;
  border-radius: 10px;
  margin: 0 0 40px 0;
}

.contact_text h3 {
  font-size: calc(1rem + 1.25vw);
  font-weight: 600;
  margin: 10px auto;
}

.contact_text p,
.contact_email,
.contact_linkedin,
.contact_github,
.contact_location {
  font-size: calc(1rem + 0.25vw);
  font-weight: 500;
  line-height: 1.5;
}

.email:link,
.linkedin:link,
.github:link,
.email:visited,
.linkedin:visited,
.github:visited {
  color: rgba(30, 112, 138, 1);
}

.email:hover, .linkedin:hover, .github:hover {
  color: rgba(30, 112, 138, 0.5);
  transition: 0.5s;
}

.email:active, .linkedin:active, .github:active {
  color: rgba(30, 112, 138, 1);
}

.contact_map iframe {
  width: 100%;
  margin: 10px auto;
  border-radius: 10px;
}