/* primary color 
#051D36
*/

/* - Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

:root {
  --primary-color: #051d36;
  --text-color: #e6e8eb;
  --border-and-highlight: #81f4e1;
  --body-background-color: #e6e8eb;
  --main-text-color: #191919;
  --projects-bakground-color: #b3f8ed;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Lato", sans-serif;
  color: var(--text-color);
  /* scroll-behavior: smooth; */

  /* 1 rem = 16 px and 10/16 = .625 so here, 1 rem = 10px */
  font-size: 62.5%;
  overflow-x: hidden;
}

.highlighted-text {
  color: var(--border-and-highlight);
}

.body {
  background-color: #fff;
  overflow-x: hidden;
}

.container {
  /* max-width: 120rem; */
  max-width: 114rem;
}

a:hover {
  cursor: pointer;
}

/* mobile navigation */

.hidden {
  display: none;
}

.main-header {
  position: relative;
}

.mobile-menu-open-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: transparent;
  border: none;
  display: none;
  z-index: 15;
}

.mobile-nav-hidden-at-the-largest-screen {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 3.2rem;
  background-color: #81f4e1b9;
  color: var(--primary-color);
  backdrop-filter: blur(2px);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.5s;
}

.mobile-navigation {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
}

.mobile-navigation ul {
  list-style: none;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-navigation ul li {
  margin-bottom: 4.8rem;
  border: 1px solid var(--primary-color);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
}
.mobile-navigation ul li a {
  text-decoration: none;
  color: var(--primary-color);
}

.mobile-navigation ul li:last-child {
  border: 1px solid transparent;
  background-color: var(--primary-color);
}

.mobile-navigation ul li:last-child a {
  color: var(--border-and-highlight);
}
/* mobile navigatin ends here */

/* stick navigation  */

/* ----------------------- */
/* Header CSS */

.main-header {
  background-color: var(--primary-color);
  margin: 0;
  padding-top: 0.4rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  width: 100%;
}

.unordered-list {
  list-style: none;
  font-size: 1.6rem;
  display: flex;
  justify-content: flex-end;
  padding: 0.8rem;
  margin-top: 0;
  color: var(--border-and-highlight);
}

.unordered-list li {
  margin-right: 2.4rem;
  border: 1px solid var(--border-and-highlight);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
}

.unordered-list li:first-child {
  margin-right: auto;
  border: none;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}

.unordered-list li:first-child::first-letter {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 1.8rem !important;
}

.unordered-list li:last-child {
  margin-right: 0;
  background-color: var(--border-and-highlight);
  color: var(--primary-color);
  font-weight: 600;
}

.unordered-list a {
  text-decoration: none;
  color: var(--border-and-highlight);
}

.unordered-list .contact {
  color: var(--primary-color);
}
/* ----------------------- */
/* hero-section */
.hero-section {
  background-color: var(--primary-color);
  padding-bottom: 12.8rem;
  margin-bottom: 8rem;
}
.hero-container {
  display: grid;
  grid-template-columns: 65fr 35fr;
  /* max-width: 130rem; */
  margin: 0 auto;
}

.hero-image {
  align-self: center;
}

.hero-image img {
  height: auto;
  width: 100%;
}

.heading-primary {
  margin-top: 19.2rem;
  width: 70%;
  font-size: 3.6rem;
  line-height: 1.1;
  letter-spacing: 1.3px;
  margin-bottom: 4.8rem;
  /* font-weight: 800; */
}

.paragraph {
  width: 70%;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 1px;
}

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

/* ************ */
/* Main  */

.main {
  color: var(--main-text-color);
  margin: 0 auto;
}

.my-projects-section {
  display: grid;
  justify-items: center;
}
.heading-primary-project-section {
  margin-top: 5.2rem;
  margin-bottom: 2.8rem;
}

.heading-primary-projects {
  /* width: 120rem; */
  margin: 0 auto;
  text-align: center;
}

.heading-primary-project-section {
  width: 100%;
}

.secondary-heading {
  font-size: 3.6rem;
  margin-bottom: 2.4rem;
}

.project-para {
  width: 60%;
}

.project-para,
.project-para-list {
  font-size: 1.8rem;
  line-height: 1.8;
}

.project-para-list {
  margin-top: 1.6rem;
  list-style-position: inside;

  font-weight: 600;
}

.project-0,
.project-1,
.project-2,
.project-3 {
  padding: 3.2rem;

  background-color: var(--projects-bakground-color);

  box-shadow: 0px 0px 5px 2px hsla(0, 0%, 50%, 0.275);
  width: 100%;
}

.link-to-instructor-website:link,
.link-to-instructor-website:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #051d36;
}

.link-to-instructor-website:hover,
.link-to-instructor-website:active {
  border-bottom: 1px solid transparent;
}

.project-link-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 3.2rem;
}

.link-to-project:link,
.link-to-project:visited {
  border: none;
  font-size: 1.8rem;
  letter-spacing: 1px;
  color: var(--border-and-highlight);
  cursor: pointer;
  padding: 1.6rem;
  background-color: var(--primary-color);
  border: none;
  cursor: pointer;
  margin-bottom: 9.6rem;
  box-shadow: 0px 0px 5px 2px hsla(0, 0%, 50%, 0.275);
  text-decoration: none;
  /* border-radius: 9px; */
  transition: all 0.3s;
}

.link-to-project:hover,
.link-to-project:active {
  /* font-weight: 575; */
  letter-spacing: 1.1px;
  /* box-shadow: 0px 0px 2.5px 1px hsla(0, 0%, 50%, 0.575); */
  box-shadow: 5px 7px 12px 1px hsla(0, 0%, 50%, 0.575);
  transform: scale(1.01);
}

/* call-to-action */

.call-to-action {
  margin: 0 auto;

  margin-bottom: 4.8rem;
}

.call-to-action-container {
  display: grid;
  grid-template-columns: 35fr 15fr 50fr;
  padding-top: 3.2rem;
  padding-bottom: 4.8rem;
}

.call-to-action-icons {
  grid-column: 3;
}

.call-to-action-text {
  font-size: 9.6rem;
  grid-column: span 2;
  font-weight: 1000;
  /* background-color: var(--primary-color); */
  color: var(--primary-color);
}
.call-to-action-text {
  position: relative;
  z-index: 5;
}
.call-to-action-text::after {
  position: absolute;
  content: "";
  display: block;
  height: 100%;
  width: 79%;
  top: 0;
  left: 0;
  background-color: var(--border-and-highlight);
  transform: translate(-12.5rem);
  z-index: -1;
}

.call-to-action-icons-section {
  display: grid;
  grid-template-rows: 30fr 70fr;
}

.call-to-action-icons-text-container {
  align-self: flex-start;
  justify-self: flex-start;
  font-size: 2.4rem;
  font-weight: 600;
}

.call-to-action-icons-text-container p {
  display: inline;
}

.arrow {
  display: inline;
}

.call-to-action-icon-github a {
  font-size: 9rem;
  color: var(--primary-color);
  z-index: 5;
}

.call-to-action-icons-text-container a:link,
.call-to-action-icons-text-container a:visited {
  color: var(--main-text-color);
  text-decoration: none;
  border-bottom: solid 2px var(--primary-color);
}

.call-to-action-icons-text-container a:hover,
.call-to-action-icons-text-container a:active {
  border-bottom: solid 2px transparent;
}
.call-to-action-icons-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.call-to-action-icon-twitter {
  grid-column: 2;
  grid-row: 2;
}

/* ********* */
/* footer */

.footer-section {
  background-color: var(--primary-color);
}

.footer {
  margin: 0 auto;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  padding: 3.2rem;

  justify-content: stretch;
}

.footer-logo {
  text-transform: uppercase;
  letter-spacing: 1.9px;
  font-weight: 600;
  color: var(--border-and-highlight);
}

.footer-logo::first-letter {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 1.8rem !important;
}

.footer-logo a {
  text-decoration: none;
  color: var(--border-and-highlight);
}

.footer p {
  margin-right: 1.6rem;
}

.footer p a:link,
.footer p a:visited {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  border-bottom: 1px solid transparent;
}

.footer p a:hover,
.footer p a:active {
  border-bottom: 1px solid var(--text-color);
}

.minds-icon {
  margin-right: 1.6rem;
}
.iconify {
  color: var(--text-color);
}

.quote-image-description {
  margin-top: 1rem;
}

.quote-image {
  display: flex;
  margin-top: 1rem;
}

.italic {
  font-style: italic;
}

.quote-image blockquote {
  flex-basis: 25%;
  margin-right: 3rem;
}

.quote-image img {
  border-radius: 50%;
}

.sticky {
  position: fixed;
  top: 0;
  height: 6rem;
  padding-top: 0.8rem;
  z-index: 20;
}
/* - Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/ ;