/* Locally hosted web font */
@font-face {
  font-family: "space_monoregular";
  src: url("SpaceMono-Regular-webfont.eot");
  src: url("SpaceMono-Regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("SpaceMono-Regular-webfont.woff2") format("woff2"),
    url("../assets/fonts/SpaceMono-Regular-webfont.woff") format("woff"),
    url("SpaceMono-Regular-webfont.ttf") format("truetype"),
    url("SpaceMono-Regular-webfont.svg#space_monoregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Locally hosted web font */
@font-face {
  font-family: "space_monoitalic";
  src: url("SpaceMono-Italic-webfont.eot");
  src: url("SpaceMono-Italic-webfont.eot?#iefix") format("embedded-opentype"),
    url("SpaceMono-Italic-webfont.woff2") format("woff2"),
    url("../assets/fonts/SpaceMono-Italic-webfont.woff") format("woff"),
    url("SpaceMono-Italic-webfont.ttf") format("truetype"),
    url("SpaceMono-Italic-webfont.svg#space_monoitalic") format("svg");
  font-weight: normal;
  font-style: normal;
}

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

/* Light theme colours (Light Mode) */
:root {
  --background-color: linear-gradient(
    130deg,
    #eee9e9 0%,
    #63738a 100%
  ); /* Gradient Background colour */
  --primary-color: #ededed; /* light gray colour*/
  --secondary-color: #b4d4ff; /*light blue colour*/
  --text-color: #1f1e1e; /* dark gray colour*/
  --para-color: #eef5ff; /* light blue colour */
  --skill-color: #d3e6ed; /* light blue-gray colour*/
  --toggle-color: #fff; /* white colour*/
  --nav-color: #656363; /* gray colour*/
}

/* Dark theme colours(Dark Mode) */
body.dark-theme {
  --background-color: linear-gradient(
    130deg,
    #474646 0%,
    #18182a 100%
  ); /* Gradient Background colour */
  --primary-color: #1e1e1e; /* dark gray colour */
  --secondary-color: #2980b9; /* blue colour */
  --text-color: #f0f0f0; /* */
  --para-color: #cccccc; /* light gray colour */
  --skill-color: #2d3748; /* dark blue colour*/
  --toggle-color: #fff; /* white color*/
}

header,
main,
footer {
  font-size: clamp(1rem, 1.3vw, 1.7rem);
}

body {
  background: var(--background-color);
  font-family: "Space Mono", monospace; /* externally hosted web font */
  font-weight: 500;
}

/* To make sure header stays fixed to the top while scrolling */
header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* styles for the header content */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* styles for the logo image */
.logo img {
  width: 3rem;
  position: relative;
  z-index: 2; /*to stay above navigation bar, to be visible*/
}

/* Navigation menu styles */
nav {
  position: absolute; /*setting the position over the web content */
  top: 0;
  left: 0;
  height: 100vh; /* setting it to the full viewport height*/
  width: 100vw; /* setting it to the full viewport wifth */
  background-color: var(--primary-color);
  display: flex; /* to center the nav links*/
  align-items: center;
  justify-content: center;
  transform: translateX(-100%); /* to hide it off the screen to the left*/
  transition: transform 1s ease; /* for a smooth slide in animation from th left */
  z-index: 1; /* to make sure it's below the logo*/
}

/*to make the navigation active(visible) when menu is clicked*/
nav.active {
  transform: translate(0); /*the nav-bar will slide on screen in view  */
}

/* Nav list styles*/
nav ul {
  list-style: none;
  display: flex;
  flex-direction: column; /* To stack the items in th list*/
  gap: 2.2rem;
}

/*Navigation links styles*/
nav li a {
  text-decoration: none;
  font-family: "space_monoregular", monospace; /* locally hosted web font size */
  font-size: 2rem;
  color: var(--nav-color);
  text-transform: uppercase;
  transition: all 0.3s ease; /* for hover effects */
}

/* Nav hover */
nav li a:hover {
  color: var(--text-color); /* text will be changed when hovered */
}

/* menu toggle button styles */
.nav-toggle {
  font-family: "space_monoregular", monospace; /* locally hosted web font size */
  text-transform: uppercase;
  border: none; /* removes all border */
  font-size: 0.9rem;
  position: absolute; /* for it stay over the conent */
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  z-index: 2; /* for to stay above navigation when its active*/
  color: var(--text-color);
  background: none;
}

.theme-toggle {
  display: none; /* to make the light-dark theme hiddin on mobile devices */
}

/* Introduction section styles */
.intro {
  padding: 1rem;
  margin-top: 1rem;
}

/* introduction content styles */
.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* styles for profile image */
.intro-content > img {
  width: 12rem; /* A fixed width */
  height: 12rem; /* A fixed height */
  border-radius: 100%; /*for the circular shape of the image */
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
}

/* introduction message styles */
.intro-message {
  text-align: left;
}

/* introduction message Heading */
.intro-message h1 {
  font-family: "space_monoitalic", monospace; /*locally hosted web font */
  font-size: 1.8rem;
  line-height: 1.4; /*for spacing*/
  color: var(--toggle-color);
  margin-bottom: 1rem;
  text-align: left;
}

/* styles for the introductry paragraph  */
.intro-message p {
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.09rem;
  color: var(--text-color);
  margin-top: 0.5rem;
}

/* Projects Section styles */
.projects {
  margin-top: 2rem;
  padding: 1rem;
}

/* projects header styles*/
.projects-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* styles for the h1 of projects*/
.projects-header h1 {
  font-family: "space_monoitalic", monospace; /* locally hosted web font*/
  font-size: 2rem;
  color: var(--toggle-color);
}

/* styles for the container the project cards */
.projects-container {
  display: flex;
  flex-direction: column; /*to stack vertically on small devices*/
  gap: 1.5rem;
}

/*styling for each project card */
.project-card {
  position: relative;
  width: 100%;
}

/* styles for each image and video container*/
.project-video,
.project-image {
  width: 100%;
}

/* styles for the actual videos and images */
.project-video video,
.project-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
}

.project-card:nth-of-type(2) video {
  width: 100%;
  height: 14rem;
  object-fit: fill;
}

/* styles for the texts appearing(overlaying) on each card */
.project-text {
  position: absolute; /*for it to be above the each video, image media */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  opacity: 0; /* it is not visible until hovered on */
  transition: all 0.3s ease; /*  */
  background-color: rgba(
    0,
    0,
    0,
    0.9
  ); /* black color with a form of transparency */
  color: var(--primary-color);
  border-radius: 1rem;
}

/* to make text visible once it's been hovered on */
.project-card:hover .project-text {
  opacity: 1;
}

/* to make it visible on devices, that clicks or taps since hover(no effect on mobile devices) */
.project-card.touch-active .project-text {
  opacity: 1;
}

/* style for the project title */
.project-text h2 {
  font-family: "space_monoitalic", monospace;
  color: var(--para-color);
  font-size: 1rem;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* style for the project description*/
.project-text p {
  font-weight: 600;
  color: var(--para-color);
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

/* styles for the projects external links container */
.links {
  display: flex;
  gap: 0.7rem;
}

/* styles for the links */
.links a {
  color: var(--secondary-color);
  text-decoration: none;
  font-size: 0.9rem;
}

/* About me section */
.aboutMe {
  display: flex;
  flex-direction: column; /*for stacking vertically*/
  align-items: center;
  margin: 3rem 1rem 1rem 1rem;
  padding: 1rem;
}

/* styles for about me header */
.myBio h2 {
  font-family: "space_monoitalic", monospace; /*locally hosted web fonmt */
  font-size: 2rem;
  text-align: center;
  color: var(--toggle-color);
  margin-bottom: 1rem;
}

/* styles for the paragraph text */
.myBio p {
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.09rem;
  color: var(--text-color);
  text-align: left;
}

/* styles for the second paragraph */
.myBio p:nth-of-type(2) {
  margin-top: 1rem;
}

/* styles for the image container */
.aboutMe-img {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* styles the actual img */
.aboutMe-img img {
  width: 60%;
  border-radius: 1rem;
}

/*skills section*/
.Skills {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 2rem;
  width: 100%;
}

/*styles for skills container */
.mySkills {
  margin-bottom: 2rem;
  background-color: var(--skill-color);
  padding: 2rem;
  border-radius: 1rem; /* so the corners will be rounded*/
  width: 100%;
}

/* styles for the header */
.Skills h2 {
  font-family: "space_monoitalic", monospace; /* locally hosted webfont*/
  font-size: 2rem;
  color: var(--toggle-color);
  margin-bottom: 2rem;
  text-align: center;
}

/* styles for the skill list  */
.Skills ul {
  list-style: none; /*rem0val of bullet points */
  display: grid; /* using Grid layout*/
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 2.2rem; /*for space between them */
  color: var(--text-color);
  margin-bottom: 1rem;
}

/* styles for the items on the list */
.Skills ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

/* styles for the icons */
.Skills ul li img {
  width: 1.5rem;
  height: 1.5rem;
}

/* style for the skill name */
.Skills ul li span {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-color);
}

/* Contact Me Section */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  padding: 2rem;
}

/* Contact header style */
.contact h2 {
  font-family: "space_monoitalic", monospace; /*locally hosted web fonts*/
  font-size: 2rem;
  color: var(--toggle-color);
  margin-bottom: 1rem;
  text-align: center;
}

/* contact paragraph style */
.contact p {
  font-size: 1.1rem;
  letter-spacing: 0.09rem; /* letter spacing between the letters */
  line-height: 1.5;
  color: var(--text-color);
  text-align: center;
}

/* Contact links styles  */
.Contact-me ul {
  list-style: none;
  display: flex; /* to make it horizontal*/
  justify-content: center;
  gap: 2.5rem;
  margin: 1.2rem 0;
}

/* Contact link icon */
.Contact-me ul li a img {
  width: 1.5rem; /* */
  height: 1.5rem;
}

/* form section */
.form-info {
  padding: 0.5rem 0;
}

/* form label styles */
.form-info label {
  margin-bottom: 1rem;
  font-family: "space_monoitalic", monospace; /*locally hosted web font */
  color: var(--text-color);
}

/* styles for from input fields */
.form-info input,
.form-info textarea {
  width: 23rem;
  height: 2.8rem;
  border: 2px solid var(--secondary-color); /*Blue border colour */
  border-radius: 0.5rem;
  font-family: "space_monoitalic", monospace;
  color: var(--text-color);
  padding: 1rem;
}

/*styles for text area */
.form-info textarea {
  height: 10rem;
  resize: none;
}

/* style for focus state for inputs */
.form-info input:focus,
.form-info textarea:focus {
  outline: none;
  border-color: var(--text-color);
}

/* style for the submit button container */
.form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

/* styles for the submit button */
.form-actions button {
  width: 15rem;
  height: 2.8rem;
  border: none;
  border-radius: 0.5rem; /*for rounded corners */
  font-family: "space_monoitalic", monospace; /*locally hosted web font */
  cursor: pointer;
  transition: all 0.4s ease;
}

/* Hover effect for the submit button */
.form-actions button:hover {
  transform: scale(1.3); /*for it to scale-up(grow) slightly */
  background-color: var(--para-color);
  color: var(--text-color);
}

/* footer section */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

/* Footer text styling */
footer p {
  font-family: "space_monoitalic", monospace;
  color: var(--para-color);
  font-size: 1rem;
  text-align: center;
}

/* media queries for different screen sizes */
/* for small mobile screens (max-width = 320px) */
@media (max-width: 20em) {
  /* to hide the dark mode toggle on small screens */
  .theme-toggle img {
    display: none;
  }

  /* form styles for smaller screens */
  .form-info input,
  .form-info textarea {
    width: 17rem;
    padding: 0.8rem;
    font-size: 1rem;
  }
}

/* for tablet and mini laptop screens(min-width = 768px) and (max-width: 1024px) */
@media (min-width: 48em) and (max-width: 64em) {
  /* to make sure project card take 90% of screen width, centeting them */
  .project-card {
    width: 90%;
    margin: 0 auto;
  }

  /* styles for input and textarea for ths screens */
  .form-info input,
  .form-info textarea {
    width: 45rem;
    height: 4rem;
    padding: 0.8rem;
    font-size: 1rem;
  }

  /* setting a specifc style for the textarea */
  .form-info textarea {
    height: 10rem;
    resize: none;
  }

  /* styles for the button size for this screen size */
  .form-actions button {
    width: 25rem;
    height: 3.3rem;
  }

  .Skills {
    margin-top: 7rem;
  }
}

/* for large screens laptops/desktops (min-width = 1280px) */
@media (min-width: 80em) {
  /* styles for the dark mode toggle, only available on larger screens */
  .theme-toggle {
    display: flex;
    border: 2px solid var(--skill-color); /* border color around the button */
    background: none; /*to maeke the background transparent */
    border-radius: 1rem;
    padding: 0.13rem 0.3rem 0.1rem 0.3rem;
    transition: all 1s ease; /* transition effect when it is interacted with */
    cursor: pointer;
  }

  .theme-toggle:hover {
    transform: translateY(-2px) scale(1.1); /*hover effect whenever it is hovered  */
  }

  /* style for the img */
  .theme-toggle img {
    width: 1.7rem;
    height: 1.2rem;
  }

  /* hiding the nav-toggle(menu) on larger screens */
  .nav-toggle {
    display: none;
  }

  /* styles for the nav */
  nav {
    position: relative; /*for positioning relative to the header */
    flex-grow: 1; /* for the nav to grow */
    height: auto;
    width: auto;
    background-color: transparent;
    transform: none; /* to remove andy slide-in effect present on mobile */
  }

  nav ul {
    flex-direction: row; /* to put them in a row */
    justify-content: center;
    gap: 10rem;
  }

  nav li a {
    font-size: 0.9rem;
    color: var(--text-color);
    letter-spacing: 0.1rem;
    transition: all 1s ease; /*transition effect */
    display: inline-block;
  }

  nav li a:hover {
    color: var(--toggle-color); /*switches color when hovered on */
    transform: translateY(-2px) scale(1.1); /*move upwards and grows in scale when hovered on */
  }

  /* styles for intro content */
  .intro {
    padding: 2rem 5rem;
    margin-top: 2rem;
  }

  .intro-content {
    margin-top: 4rem;
    flex-direction: row; /* to display the text and image side by side */
    justify-content: space-between;
    align-items: center;
  }

  /* using the animate css library (pulse) animation to achieve this effect on hover*/
  .intro-content:hover {
    animation: pulse 2s;
  }

  /* styles for the projects */
  .projects {
    margin-top: 4rem;
  }

  .projects-container {
    margin-top: 3rem;
    display: grid; /*using Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  }

  /* styling each video/image individually */
  .project-card:nth-of-type(1) video {
    width: 80%;
    margin: 0 auto;
    height: 19rem;
    object-fit: cover;
  }

  .project-card:nth-of-type(2) video {
    width: 80%;
    height: 19rem;
    object-fit: fill;
  }

  .project-card:nth-of-type(3) video {
    margin: 0 auto;
    width: 80%;
    height: 19rem;
    object-fit: cover;
  }

  .project-card img {
    width: 81%;
    height: 19rem;
    border-radius: 1.5rem;
    object-fit: fill;
  }

  /* for the adjustment of the each text on the individual projects  */
  .project-card:nth-of-type(1) .project-text {
    left: 4rem;
    width: 75%;
  }

    /* for the adjustment of the each text on the individual projects  */
  .project-card:nth-of-type(2) .project-text {
    width: 80%;
  }

   /* for the adjustment of the each text on the individual projects  */
  .project-card:nth-of-type(3) .project-text {
    left: 4rem;
    width: 75%;
  }

    /* for the adjustment of the each text on the individual projects  */
  .project-card:nth-of-type(4) .project-text {
    width: 82%;
  }

  /* about me section */
  .aboutMe {
    margin-top: 5rem;
  }

  .myBio {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
  }

  .myBio h2 {
    font-family: "space_monoitalic", monospace;
    font-size: 1.7rem;
  }

  .myBio p {
    font-size: 1.2rem;
    line-height: 2;
    margin-top: 1rem;
  }
  /* styles for the img */
  .aboutMe-img img {
    width: 70%;
    height: auto;
    border-radius: 1.5rem;
  }

  /* using the animate css library (pulse) animation to achieve this effect on hover*/
  .aboutMe-img img:hover {
    animation: pulse 2s;
  }

  /* skill section */
  .Skills {
    padding: 3rem;
    margin-top: 7rem;
  }

  /* using the animate css library (pulse) animation to achieve this effect on hover*/
  .mySkills:hover {
    animation: pulse 2s;
  }

  .Skills ul {
    grid-template-columns: repeat(
      auto-fill,
      minmax(200px, 1fr)
    ); /*for the layout for skills on larger screeens  */
    gap: 1.5rem;
  }

  /* styles for the form input for larger screens */
  .form-info input,
  .form-info textarea {
    width: 50rem;
    height: 4rem;
    padding: 0.8rem;
    font-size: 1rem;
  }

  /* styles for the textarea */
  .form-info textarea {
    height: 10rem;
    resize: none;
  }

  /* styles for the button */
  .form-actions button {
    width: 25rem;
    height: 3.3rem;
  }
}

/* media query for reduced motion(accessiblity) for browsers with this settings */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    animation: none !important;
    transition: none !important;
  }
}